原型链的理解--分别用es5、es6 写一个水果类,并且有子类继承

ES5继承：

原型链继承核心: 将父类的实例作为子类的原型。

function Fruit(name) {
    this.name = name
    this.color = ['green','red','blue']; //构造函数中定义的属性，所有实例会共享这个属性。
}
Apple.prototype = new Fruit();
var apple = new Apple('apple');
console.log(apple.name);//apple

构造函数模式核心: 在子类型构造函数的内部调用超类型构造函数。

function Fruit(color,taste){
    this.color = color;
    this.taste = taste;
}
function Apple(color,taste,shape){
//借用构造函数继承父类实例属性
    Person.call(this,name,color,taste);
    this.shape = shape;
}
let apple = new Apple("red","sweet","round");
console.log(apple.color)//red

console.log(apple.taste)//sweet

组合继承实现核心：组合继承结合了上面两种方式的继承模式，使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性。

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);//在创建实例时第二次调用SuperType
    this.age = age;
}

//继承方法
SubType.prototype = new SuperType();//原型链  第一次调用SuperType
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
    console.log(this.age)
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

 

ES6继承：

class Fruit {
    constructor() {
        this.type = 'fruit';
    }
    says(say) {
        console.log(this.type + ' says ' + say);
    }
}

let fruit = new Fruit();
fruit.says('hello'); //fruit says hello

class Apple extends Fruit {
    constructor() {
        super();
        this.type = 'apple';
    }
}

let apple = new Apple();
apple.says('hello'); //apple says hello

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Apple类，该类通过extends关键字，继承了Fruit类的所有属性和方法。

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。