JavaScript继承的方式

JavaScript继承的方式

一共六种方式

原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。

这部分可以看红宝书第四版P238-249

1 原型链继承

  function Animal(){
        this.colors = ["black","while"];
    }
    Animal.prototype.getColor = function(){
            return this.colors;
    }

    function Dog(){};
    Dog.prototype = new Animal;
    let dog1 = new Dog();
    dog1.colors.push('brown');
    console.log(dog1.colors);//["black", "while", "brown"]
    
    let dog2 = new Dog();
    console.log(dog2.getColor());//["black", "while", "brown"]
    
    let animal = new Animal();
    console.log(animal.colors);//["black", "while"]
    

原型链继承存在的问题：

• 问题1：原型中包含的引用类型属性将被所有实例共享；
• 问题2：子类在实例化的时候不能给父类构造函数传参；

2 借用构造函数实现继承

//在子类型构造函数内部调用超类型构造函数；
    //使用apply或call方法将对象的构造函数绑定在子对象上
    function Animal(name){
       //定义引用类型值的属性
       this.colors = ["black", "while"];
       this.name = name;
    this.getColors = function(){
            return this.colors;
        }
    }
    function Dog(name){
        //继承Animal，在这里还可以给超类型构造函数传参
        Animal.call(this,name)
    }
  //通过使用apply或者call方法，我们实际上是在将要创建的Dog实例的环境下调用了Animal的构造函数，
  //这样一来就会在新Dog对象上执行Animal函数中定义的所有对象初始化代码，结果Dog每个实例都会有自己的color属性的副本了
    let dog1 = new Dog();
    dog1.colors.push('brown');
    console.log(dog1.colors);//["black", "while", "brown"]
    
    let dog2 = new Dog();
    console.log(dog2.getColors());//["black", "while"]
    
    let animal = new Animal();
    console.log(animal.colors);//["black", "while"]

通过使用apply或者call方法，我们实际上是在将要创建的Dog实例的环境下调用了Animal的构造函数，
这样一来就会在新Dog对象上执行Animal函数中定义的所有对象初始化代码，结果Dog每个实例都会有自己的color属性的副本了

借用构造函数实现继承解决了原型链继承的 2 个问题：引用类型共享问题以及传参问题。

但是由于方法必须定义在构造函数中，所以会导致每次创建子类实例都会创建一遍方法，函数复用就无法无法实现了。而且，在超类型的原型中定义的方法，对于子类型而言也是不可见的，结果所有类型都只能使用构造函数模式。

3 组合继承（最常用）

组合继承结合了原型链和盗用构造函数，将两者的优点集中了起来。基本的思路是使用原型链继承原型上的属性和方法，而通过盗用构造函数继承实例属性。这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。而且组合继承保留了instanceof操作符和isPrototypeOf()方法识别合成对象的能力

    //将原型链和借用构造函数的技术组合到一块，使用原型链实现对原型属性和方法的继承
    //而通过借用构造函数来实现对实例属性的继承
    //这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有自己的属性。
    function Animal(name){
        this.name = name;
        this.colors = ['black', 'white'];
    }
    Animal.prototype.getName = function(){
        return this.name;
    };
    function Dog(name,age){
        //借助构造函数来实现继承
        Animal.call(this,name);//第二次调用Animal
        this.age = age;
    }
    //原型链的继承方法
    Dog.prototype = new Animal(); //第一次调用Animal
    Dog.prototype.constructor = Dog;
    Dog.prototype.getAge = function(){
        return this.age;
    }
    let dog1 = new Dog("Tom",3);
    dog1.colors.push("brown");
    console.log(dog1.colors);["black", "white", "brown"]
    console.log(dog1.getAge());//3
    console.log(dog1.getName());//Tom

    let dog2 = new Dog("jerry",5);
    console.log(dog2.colors); // ["black", "white"]
    console.log(dog2.getAge());//5
    console.log(dog2.getName());//jerry

缺点：无论在什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，一次是在子类型构造函数内部

4 原型式继承

注意：是原型式继承，不是原型链继承

该方法的原理是创建一个构造函数，构造函数的原型指向对象，然后调用 new 操作符创建实例，并返回这个实例，本质是一个浅拷贝。

伪代码如下：

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

使用场合：没必要构建构造函数，仅仅是想模拟一个对象的时候

缺点：

• 无法向父类构造函数传参
• 如果父类是构造函数，无法继承父类构造函数中的属性，只能继承父类构造函数的原型对象的属性
• 如果父类是普通对象，引入类型属性依然被子实例共享

5 寄生式继承

创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，然后返回这个对象。伪代码如下：

function createPerson(original){
	var clone = Object.creat(original);//通过调用函数来创建一个新的对象
	clone.sayGood = function(){
		alert("hello world");
	};
	return clone;
}

适用于关注对象，而不在乎类型和构造函数的场景，和构造函数模式类似，做不到函数复用。

6 寄生组合式继承

组合继承已经相对完善了，但还是存在问题，它的问题就是调用了 2 次父类构造函数，第一次是在 new Animal()，第二次是在 Animal.call() 这里。

所以解决方案就是不直接调用父类构造函数给子类原型赋值，而是通过创建空函数 F 获取父类原型的副本。

寄生式组合继承写法上和组合继承基本类似，区别是如下这里：

- Dog.prototype =  new Animal()
- Dog.prototype.constructor = Dog

+ function F() {}
+ F.prototype = Animal.prototype
+ let f = new F()
+ f.constructor = Dog
+ Dog.prototype = f

稍微封装下上面添加的代码后：

function object(o) {
    function F() {}
    F.prototype = o
    return new F()
}
function inheritPrototype(child, parent) {
    let prototype = object(parent.prototype) //创建对象
    prototype.constructor = child//增强对象
    child.prototype = prototype//赋值对x
}
inheritPrototype(Dog, Animal)

JavaScript6种继承的方式