javascript中的继承

方式一： 原型链继承

function SupType(){
    this.name = 'Tom'
    this.colors = ['red', 'blue', 'pink']
    this.sayName = function(){
        console.log(this.name)
    }
}

function SubType(){
    this.name = 'Jerry'
}

SubType.prototype = new SupType()
let sub = new SubType()
let sub1 = new SubType()
sub.colors.push('yellow')
sub.sayName() // Jerry
console.log(sub.colors)  //  ["red", "blue", "pink", "yellow"]
console.log(sub1.colors)  //  ["red", "blue", "pink", "yellow"]

缺点：原型中包含的引用值会在所有实例间共享

---

方式二：经典继承（盗用构造函数）

function SupType(name) {
    this.name = name
    this.age = 18
    this.colors = ['red', 'blue', 'pink']
    this.sayName = function () {
      console.log(this.name)
    }
  }
  SupType.prototype.sayAge = function () {
    console.log(this.age)
  }
  function SubType(name, age) {
    SupType.call(this, name)
    this.age = age
  }
  let sub = new SubType()
  let sub1 = new SubType()
  sub.colors.push('yellow')
  console.log(sub.colors) // ["red", "blue", "pink", "yellow"]
  console.log(sub1.colors) // ["red", "blue", "pink"]
  sub.sayName() // undefined
  sub.sayAge() // Uncaught TypeError: sub.sayAge is not a function

缺点：①不能重用 ② 子类无法访问父类原型的方法

第三种：组合继承

function SuperType(name){
  this.name = name
  this.money = 2000
  this.colors = ['red','blue','pink']
  this.sayMoney = function(){
    console.log(this.money);
  }
}
SuperType.prototype.sayName = function(){
  console.log(this.name);
}
function SubType (name,money){
  SuperType.call(this, name) // 第二次调用
  this.money = money
}
SubType.prototype = new SuperType() // 第一次调用
let sub = new SubType('Jerry',3000)
let sub1 = new SubType('Rose',5000)
sub.colors.push('yellow')
console.log(sub.colors); // ["red", "blue", "pink", "yellow"]
console.log(sub.name); // Jerry
console.log(sub.money); // 3000
sub.sayName() // Jerry
sub.sayMoney() // 3000
console.log(sub1.colors); // ["red", "blue", "pink"]

缺点：父类的重复调用导致的效率问题

---

第四种：原型式继承

  let wealth = {
    money:2000,
    color:['red','blue']
  }
  let person = Object.create(wealth)
  person.color.push('yellow')
  console.log(person.money); // 2000
  console.log(person.color); //  ["red", "blue", "yellow"]
  let person1 = Object.create(wealth)
  console.log(person1.color); //  ["red", "blue", "yellow"]

缺点：各个实例共享原型中的引用类型

---

第五种：寄生式继承

  function object(o) {
    function F() {}
    F.prototype = o
    return new F()
  }
  function createAnother(original) {
    let clone = object(original) // 通过调用函数创建一个新对象
    clone.sayHi = function () {
      // 以某种方式增强这个对象
      console.log('hi')
    }
    return clone // 返回这个对象
  }
  let person = {
    name: 'Nicholas',
    friends: ['Shelby', 'Court', 'Van'],
  }
  let anotherPerson = createAnother(person)
  let yetAnotherPerson = Object.create(person)
  anotherPerson.friends.push('Rob')
  yetAnotherPerson.name = 'Linda'
  yetAnotherPerson.friends.push('Barbie')
  anotherPerson.sayHi() // "hi"
  console.log(anotherPerson.friends) // ["Shelby", "Court", "Van", "Rob"]
  console.log(yetAnotherPerson.name); // Linda
  console.log(yetAnotherPerson.friends); // ["Shelby", "Court", "Van", "Rob", "Barbie"]

缺点：无法重用

---

第六种：寄生式组合继承

  function object(o){
    function F (){}
    F.prototype = o
    return new F()
  }
  function inheritPrototype(subType, superType) {
    let prototype = object(superType.prototype); // 创建对象
    prototype.constructor = subType; // 增强对象
    subType.prototype = prototype; // 赋值对象
   }
  function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
   }
   SuperType.prototype.sayName = function() {
    console.log(this.name);
   };
   function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
   }
  inheritPrototype(SubType, SuperType);
  SubType.prototype.sayAge = function() {
    console.log(this.age);
  };
  let sub = new SubType('Jerry',17)
  let sub2 = new SubType('Tom',18)
  sub.colors.push('yellow')
  console.log(sub.colors); // ["red", "blue", "green", "yellow"]
  console.log(sub2.colors); // ["red", "blue", "green"]

最佳模式