原型、原型链、继承

  • 原型链下端的属性会屏蔽原型链上端的属性(最下端为实例对象)
  • 构造函数创建的原型对象,因为Foo.prototype.constructor === Foo(原型对象的构造器是构造函数Foo)
  • 构造函数首字母大写是JavaScript世界的惯例!标识它是一个“类”
  • new调用普通函数就是变成了构造函数调用
  • 实例对象不是由构造函数构造的,实例的constructor有时候不等于构造函数,比如重写原型对象,所以constroctor不表示由谁构造,避免使用实例对象的constructor属性。
  • 原型的机制就是指对象中的一个内部链接引用另一个对象,其本质就是对象之间的关联关系。

创建关联

es6之前需要抛弃原型对象,例如
Bar.prototype = Object.create(Foo.prototype)
es6语法不用抛弃,例如Object.setPrototypeOf(Bar.prototype,Foo.prototype)
instance = Object.create(obj)

  • 找实例的祖先
  1. a instanceof Foo a的原型链上是否有Foo函数的原型(对象和函数的关系)
  2. Foo.prototype.isPrototypeOf(a) a的原型链上是否出现过Foo的原型(对象和对象的关系)
  3. 获取原型 Object.getPrototypeOf(a) === Foo.prototype

原型prototype继承(原型链继承)

    function Animal(name,arr) {
      this.name = name;
      this.arr = arr;
      this.sleep = function () {
        console.log(this.name + '正在睡觉')
      }
    }
    Animal.prototype.eat = function (food) {
      console.log(this.name + '正在吃'+food)
    }
    function Cat() {
      
    }
    // 关键代码
    Cat.prototype = new Animal()
    // 关键代码
    Cat.prototype.constructor = Cat
    Cat.prototype.age= 2
    var cat1 = new Cat()
    var cat2 = new Cat()
    cat1.arr.push(1)
    // 优缺点
    // 子类新增原型属性和方法,必须在new Animal()之后执行,无法实现多继承
    // 创建子类实例时无法向超类传递参数,new Cat
    // 构造函数中引用类型的属性arr,一个实例修改该属性,其他实例都会使用修改后的值(引用类型值的共享问题)
  • 直接继承proptotype
// 关键代码
Cat.prototype = Animal.prototype
// 关键代码
Cat.prototype.constructor = Cat
// 会把Animal的原型对象的constructor改了!
  • 构造函数继承
    function Cat(name, age) {
      // 关键代码
      Animal.call(this, name)
      // 关键代码
      this.age = age
    }
    var car1 = new Cat('小黑', 2)
    // 优缺点
    // 可以在子类构造函数中向超类函数传递参数
    // 子类可以实现多继承,不能继承原型链,方法函数都在构造函数中定义,无法复用
  • 原型链组合构造函数继承
    function Cat(name, age) {
      // 关键代码
      Animal.call(this, name)
      this.age = age
    }
    // 关键代码
    Cat.prototype = new Animal()
    Cat.prototype.constructor = Cat
    var car1 = new Cat('小黑', 2)
    // 调用了两次超类构造函数
    // 可以使用create
    Cat.prototype = Object.create(Animal.prototype);
  • 原型式继承,使用空对象作为中介
    借助原型可以基于已有的对象创建新对象
    es5规范了该方法,即Object.create()
    // o为超类原型
    function obj(o) {
      function F() {}
      F.prototype = o
      let f = new F()
      return f
    }
    或者
    function extend(Child, Parent) {
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;  
    }
  • 实例继承
    function Cat(name, age) {
      var instance = new Animal()
      instance.age = age
      return instance
    }
    var car1 = new Cat('小黑', 2)
    var cat2 = Cat('小黑', 2)
    // 优缺点
    // 不限制调用方式,不能实现多继承
  • 拷贝继承
   function extend2(Child, Parent) {
    var p = Parent.prototype;
    var c = Child.prototype;
    for (var i in p) {
      c[i] = p[i];
    }
    c.uber = p;
  }
  • 寄生式继承
    // o为原型对象
    function createObj(o) {
      let clone = Object.create(o)
      clone.sayHi = function () {
        console.log('hi');
      }
      return clone
    }
    o1 = createObj(o)
    // 添加的方法不能被复用
  • 寄生组合构造函数继承
// 通过create创建sub的prototype对象
    function Super(name) {
      this.name = name
      this.color = ['red', 'blue']
    }
    Super.prototype.sayHi = function () {
      console.log('hi');
    }
    function Sub(name, age) {
      Super.call(name)
      this.age = age
    }

    Sub.prototype = Object.create(Super.prototype)
    Sub.prototype.constructor = sub

    Sub.prototype.eat = function () {
      console.log('eat');
    }
    let o1 = new Sub('jack', 18)
    // 只调用一次超类构造函数,
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容