阅读 112

【javsScript】对象创建的不同方式、原生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()
    复制代码
    Child.prototype.constructor = Child
    复制代码

    注:这句话实现的是修改正确的构造函数,如下所示

    
    function Parent() { }
    
    function Child() { }
    
    // 子类型的原型指向父类型实例
    Child.prototype = new Parent(); 
    //constructor属性是只存在于实例对象的原型对象中的属性,其指向了该实例对象的构造函数
    Child.prototype.constructor = Child; 
    
    var child = new Child(); 
    var p2=new Parent();
    
    console.log(p2==Child.prototype);//false,说明p2于child实例对象的原型对象无关!
    console.log(p2.constructor);//Parent
    console.log(Child.prototype.constructor);//Child
    console.log(child.constructor);//Child
    
    复制代码
  • 借用构造函数 : 得到属性(使用不到继承,这是假的实现继承的方法)

    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
    • 执行构造函数体(给对象添加属性/方法)
文章分类
前端
文章标签