美文网首页
2023-03-07_JSDay08-堆栈结构及原型对象

2023-03-07_JSDay08-堆栈结构及原型对象

作者: 远方的路_ | 来源:发表于2023-03-06 21:28 被阅读0次

1. getter 方法

var person = {
   name:'张三',
   age:30,
   // eat:function(){
   //     console.log('炸鸡');
   // }
    get eat(){
            console.log('啤酒');
    }
}
person.eat; // 通过 get获取的不需要加括号调用
person.eat(); //报错

2. setter 方法

var dog = {
     name:'黑豹',
     age:7,
     // 使用 setter 来设置对象方法
     set setGender(gender){
          this.gender = gender;
     }
}
dog.setGender = '公';
console.log(dog); // {name: '黑豹', age: 7, gender: '公'}

一. 堆栈区别

JS堆内存和栈内存
  • 栈(stack):栈会自动分配内存空间,会自动释放,存放基本类型和引用数据类型的变量
    • 特点:先进后出,后进先出,存储的是基本数据类型和引用数据类型的变量
    • 优点:占用内存小,存取速度比堆快。
    • 缺点:存在栈中的数据大小与生存期必须是确定的,缺乏灵活性。
  • 堆(heap):动态分配的内存,大小不定也不会自动释放,存放引用类型的对象,指那些可能由多个值构成的对象,保存在堆内存中。
    堆内存中的对象不会随方法的结束而销毁,即使方法结束后,这个对象还可能被另一个引用变量所引用(参数传递)。创建对象是为了反复利用。
    • 特点:无序,存储的是对象
    • 优点:不会被销毁
    • 缺点:占用内存大,存取速度相对较慢。

1.1 基本数据类型使用

var a = 1;
var b = a;
a = 2;
console.log(a);  // 2
console.log(b);  // 1
基本数据类型图解

1.2 引用数据类型使用

var a = [1,2,3];
var b = a;
a[1] = 22;
console.log(a);  // [1, 22, 3]
console.log(b);  // [1, 22, 3]
引用数据类型
  • 堆栈结构---案例1
var obj = new Object();
var obj1 = obj;
obj.name = 'zs';
console.log(obj);  // {name: 'zs'}
console.log(obj1);  // {name: 'zs'}
案例1
  • 堆栈结构---案例2
var arr = [1,2,3];
var arr1 = arr;
arr = [4,5,6];
console.log(arr);  //456
console.log(arr1); //123
案例2
  • 基本数据类型当做参数

function add(a, b) {
    a = 60;
}
var a = 10;
var b = 20;
add(a, b);
console.log(a, b);
基本数据类型当做参数
  • 引用数据类型当做参数

function add(a){
     a[1] = 6;
}
var a = [1,2,3];
add(a);
console.log(a);
引用数据类型当做参数
  • new关键字的作用

  1. 开辟内存空间(堆)
  2. this指向该内存(让函数内部的this)
  3. 执行函数代码
  4. 生成对象实例返回(把空间的地址返回)
new关键字的作用 new关键字 new关键字的作用

二. JavaScript原型对象

思考:下列代码有什么弊端?

function Villa(size,styleType,price){
    this.size = size;
    this.styleType = styleType;
    this.price = price;
    this.live = function(){
          console.log('住的很舒服');
    }
}       
var v1 = new Villa(1000,'新中式',700);
v1.live();
console.log(v1.styleType);
        
var v2 = new Villa(2000,'简欧',1000);
v2.live();
console.log(v2.styleType);

这个live是个方法, 每个实例化对象内部到时候都会有单独的自己的这个方法
如果实例化的对象多了, 那么就会造成内存浪费很厉害
因为每个对象去调用自己的这个方法, 最终实现的功能是一样的;
所以我们得想办法让所有的实例化对象去调用同一个方法。 以达到资源共享, 节省内存的目的;

2,1 什么是原型对象

  • 所有 JavaScript 对象都从原型继承属性和方法。
  • 日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自 Person.prototype。
  • Object.prototype 位于原型继承链的顶端:
  • 日期对象、数组对象和 Person 对象都继承自 Object.prototype。
  1. 显式原型对象
      原型对象就是函数对象的一个属性prototype的值( 地址),这个prototype属性值是原型对象, 也被叫做显式原型对象.ES5中适合在原型内部添加东西---修改。
    console.dir(Villa);
  2. 隐式原型对象
      由这个函数实例化出来的对象身上都会有一个属性叫_proto_, 它和函数对象prototype地址一样, 代表同一个对象,如果我们通过_proto_去操作原型对象, 称为隐式原型对象。ES5中适合查看原型。
    var v1 = new Villa(1000,'中式',10000000);
    console.log(v1);

2.2 原型对象的格式

function Villa(size, styleType, price) {
    this.size = size;
    this.styleType = styleType;
    this.price = price;
    //              this.live = function(){
    //                  console.log('住的很舒服');
    //              }
}
Villa.prototype.live = function() {
        console.log('住的很舒服');
} //把方法添加在原型对象当中,让所有的实例化对象共享

var v1 = new Villa(1000, '新中式', 10000000);
v1.live();
console.log(v1.styleType);

var v2 = new Villa(2000, '简欧', 20000000);
v2.live();
console.log(v2.styleType);
原型对象基本介绍

2,3 原型链

描述的是对象在查找属性或者方法的过程
   实例化对象在找属性或者方法的时候,先从自身去找看有没有这个属性或者方法,如果有,直接使用这个属性的值或者方法,如果没有,会继续顺着这个对象的隐式原型对象(_proto_)找到这个对象的原型对象(和它的构造函数的显式原型对象是同一个),看看原型对象是否存在这个属性,如果有就使用原型对象当中的这个属性值,如果还没有,再去找原型对象的隐式原型对象(默认就是Object显式原型对象),找到以后去看看有没有这个属性,如果有就使用这个属性值;如果没有就返回undefined(代表已经找到顶了);

原型链
总结:

那什么是原型链呢?

   简单理解就是原型组成的链,对象的_proto_它的是原型,而原型也是一个对象,也有_proto_属性,原型的proto又是原型的原型,就这样可以一直通过_proto_想上找,这就是原型链,当向上找找到Object的原型的时候,这条原型链就算到头了。

原型对象和实例之间有什么关系呢?
   通过一个构造函数创建出来的多个实例,如果都要添加一个方法,给每个实例去添加并不是一个明智的选择。这时就该用上原型了。
在实例的原型上添加一个方法,这个原型的所有实例便都有了这个方法。

相关文章

  • lesson 5 面向对象及原型链 2021-04-29

    课程标题 面向对象及原型链 课程目标 面向对象思想 原型及原型链 继承 知识点 面向对象思想 原型链的指向 new...

  • 原型链介绍

    什么是原型链:每一个对象都有自己的原型,而原型也是对象,也有自己的原型,一次类推而形成的链式结构就叫做原型链 对象...

  • 原型模式C++

    原型模式,用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。 原型模式结构图 原型模式基本代码 原型...

  • 对象及原型

    1、OOP指什么,有哪些特性? OOP(Object Oriented Programming),面向对象程序设计...

  • 2021-07-07 原型模式

    概述 用一个已经创建的实例作为原型,通过复制该原型对象来创建一个和原型对象相同的新对象。 结构 原型模式包含如下角...

  • Js面向对象

    一、Js面向对象 二、Js原型及原型链 1、原型 JavaScript 的每个对象都继承另一个父级对象,父级对象称...

  • 堆栈内存及栈结构

    堆栈内存 JS代码之所以能够在浏览器运行,是因为浏览器会从计算机的内存挑中分配出对应的内存,用来存储值和运行代码内...

  • js_继承及原型链等(四)

    js_继承及原型链等(三) 1. 继承 依赖于原型链来完成的继承 发生在对象与对象之间 原型链,如下: ==原型链...

  • UINavigationController

    UINavigationController 导航控制器是一个堆栈结构,只是其中管理的对象是controller,...

  • Android设计模式系列(10)--SDK源码之原型模式

    1.意图用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。 2.结构图和代码它的结构图非常简单,我们...

网友评论

      本文标题:2023-03-07_JSDay08-堆栈结构及原型对象

      本文链接:https://www.haomeiwen.com/subject/hkamldtx.html