Javascript中的继承方式

超、凢脫俗 2022-11-10 04:59 174阅读 0赞

# 一、原型链 #

ECMAScript中的继承方式主要通过原型链实现。  
**原型链的基本构想**：每个构造函数都有一个原型对象，原型有一个属性指回构造函数本身，实例有一个内部指针指向原型。如果这个原型是另一个类型的实例，那么这个原型本身就有一个内部指针指向另一个原型，相应地这另一个原型也有一个指针指向另一个构造函数。这样在实例和原型之间构建了一条原型链。  
实现原型链的代码模式：

function SuperType () { 
      this.property = true
    }
    SuperType.prototype.getSuperValue = function () { 
      return this.property
    }
    function SubType () { 
      this.subproperty = false
    }
    // 继承SuperType
    SubType.prototype = new SuperType()
    SubType.prototype.getSubValue = function () { 
      return this.subproperty
    }
    let instance = new SubType()
    console.log(instance.getSuperValue()) // true，继承到父类的方法

原型链的问题1：原型中的引用值会在所有实例间共享。例如：

function SuperType () { 
      this.fruits = ['apple','banana','orange']
    }
    function SubType () { }
    SubType.prototype = new SuperType()
    let sub1 = new SubType()
    sub1.fruits.push('grape')
    console.log(sub1.fruits) // [ 'apple', 'banana', 'orange', 'grape' ]
    let sub2 = new SubType()
    console.log(sub2.fruits) // [ 'apple', 'banana', 'orange', 'grape' ]

原型链的问题2：子类型在实例化时不能给父类型的构造函数传参。

# 二、盗用构造函数 #

盗用构造函数可以解决原型中包含引用值导致的继承问题。基本思路是：在子类构造函数中调用父类构造函数。**函数是特定上下文中执行代码的简单对象**，所以可以使用`apply()`和`call()`方法以新创建的对象为上下文执行构造函数。

function SuperType () { 
      this.fruits = ['apple','banana','orange']
    }
    function SubType () { 
      SuperType.call(this)
    }
    SubType.prototype = new SuperType()
    let sub1 = new SubType()
    sub1.fruits.push('grape')
    console.log(sub1.fruits)// [ 'apple', 'banana', 'orange', 'grape' ]
    let sub2 = new SubType()
    console.log(sub2.fruits) // [ 'apple', 'banana', 'orange' ]

盗用构造函数还可以在子类构造函数中向父类构造函数传参。

function SuperType (name) { 
      this.name = name
    }
    function SubType () { 
      SuperType.call(this, 'Mike')
      this.age = 23
    }
    let sub1 = new SubType()
    console.log(sub1.name) // 'Mike'

盗用构造函数问题：必须在构造函数中定义方法且函数不能重用；子类不能访问父类原型上的方法。

# 三、组合继承 #

组合继承综合了原型链和盗用构造函数。基本思路是：使用原型链继承原型上的属性和方法，通过盗用构造函数继承实例属性。这样既能够重用原型上的方法，又能让每个实例拥有自己的属性。

function SuperType(name) { 
      this.name = name
      this.fruits = ['apple','banana','orange']
    }
    SuperType.prototype.getName = function() { 
      return this.name
    }
    function SubType(name, age) { 
      SuperType.call(this, name)
      this.age = age
    }
    SubType.prototype = new SuperType()
    let sub1 = new SubType('Mike')
    let sub2 = new SubType('Lily')
    sub1.fruits.push('grape')
    console.log(sub1.fruits) // [ 'apple', 'banana', 'orange', 'grape' ]
    console.log(sub2.fruits) // [ 'apple', 'banana', 'orange' ]
    
    console.log(sub1.getName()) // Mike
    console.log(sub2.getName()) // Lily

# 四、原型式继承 #

function object(obj){ 
      function F() { }
      F.prototype = obj
      return new F()
    }

上面的object函数会创建一个临时构造函数，将传入的对象赋值给这个临时函数的原型，然后返回函数的实例。本质上，object()对传入的对象执行了浅赋值。

let person = { 
      name: 'Mike',
      fruits: ['apple','banana']
    }
    let per1 = object(person)
    per1.fruits.push('grape')
    let per2 = object(person)
    console.log(per2.fruits) // [ 'apple', 'banana', 'grape' ]

ES5中的`Object.create()`方法将原型式继承规范化，以下代码和上面的相同：

let person = { 
      name: 'Mike',
      fruits: ['apple','banana']
    }
    let per1 = Object.create(person)
    per1.fruits.push('grape')
    let per2 = Object.create(person)
    console.log(per2.fruits) // [ 'apple', 'banana', 'grape' ]

# 五、寄生式继承 #

寄生式继承与原型式继承接近，背后的思路类似于寄生构造函数和工厂模式：创建一个实现继承的函数，以某种方式增强对象，然后返回这个对象：

function createAnother(original) { 
      let clone = object(original)
      clone.sayHi = function () { 
        console.log('Hello')
      }
      return clone // 返回对象既有original的属性和方法，也有自己的sayHi()方法
    }

通过寄生式继承给对象添加函数会导致函数难以重用，与构造函数模式类似。

# 六、寄生式组合继承 #

组合继承主要存在效率问题：父类构造函数始终会被调用两次：一次是在创建子类原型时调用，另一次是在子类构造函数中调用。寄生式组合继承通过盗用构造函数继承属性，使用混合式原型链继承方法。基本思路是不通过调用父类构造函数给子类原型赋值，而是取得父类原型的一个副本。其核心逻辑代码如下：

function inheritPrototype(subType, superType){ 
      let prototype = object(superType.prototype)  
      prototype.constructor = subType
      subType.prototype = prototype
    }