js 对象高级


对象的创建模式

  • Object构造函数模式

    var obj = {};
    obj.name = 'Tom'
    obj.setName = function(name){this.name=name}
  • 对象字面量模式

    var obj = {
      name : 'Tom',
      setName : function(name){this.name = name}
    }
  • 构造函数模式

    function Person(name, age) {
      this.name = name;
      this.age = age;
      this.setName = function(name){this.name=name;};
    }
    new Person('tom', 12);
  • 构造函数+原型的组合模式

    function Person(name, age) {
      this.name = name;
      this.age = age;
    }
    Person.prototype.setName = function(name){this.name=name;};
    new Person('tom', 12);

继承模式

  • 原型链继承 : 得到方法

    function Parent(){}
    Parent.prototype.test = function(){};
    function Child(){}
    Child.prototype = new Parent(); // 子类型的原型指向父类型实例
    Child.prototype.constructor = Child
    var child = new Child(); //有test()
  • 借用构造函数 : 得到属性

    function Parent(xxx){this.xxx = xxx}
    Parent.prototype.test = function(){};
    function Child(xxx,yyy){
        Parent.call(this, xxx);//借用构造函数   this.Parent(xxx)
    }
    var child = new Child('a', 'b');  //child.xxx为'a', 但child没有test()
  • 组合

    function Parent(xxx){this.xxx = xxx}
    Parent.prototype.test = function(){};
    function Child(xxx,yyy){
        Parent.call(this, xxx);//借用构造函数   this.Parent(xxx)
    }
    Child.prototype = new Parent(); //得到test()
    var child = new Child(); //child.xxx为'a', 也有test()
  • new一个对象背后做了些什么?

    • 创建一个空对象
    • 给对象设置__proto__, 值为构造函数对象的prototype属性值 this.__proto__ = Fn.prototype
    • 执行构造函数体(给对象添加属性/方法)

原型链继承


文章作者: Liwker
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Liwker !
评论
 上一篇
js 线程机制与事件处理机制 js 线程机制与事件处理机制
线程与进程 进程: 程序的一次执行, 它占有一片独有的内存空间 可以通过windows任务管理器查看进程 线程: 是进程内的一个独立执行单元 是程序执行的一个完整流程 是CPU的最小的调度单元 关系 一个进程至少有一个线程(主) 程
2021-02-25
下一篇 
js 函数高级 js 函数高级
原型与原型链 所有函数都有一个特别的属性: prototype : 显式原型属性 所有实例对象都有一个特别的属性: __proto__ : 隐式原型属性 显式原型与隐式原型的关系 函数的prototype: 定义函数时被自动赋值,
2021-02-22
  目录