js继承方式

七种继承方式

• 原型链继承、构造函数继承、组合函数继承
• 原型式继承、寄生式继承、寄生组合式继承
• ES6类继承

原型链继承

function parent(name) {
    this.name = name
    this.arr = [1,2]
}
parent.prototype.getName = function(){	
    return this.name
}
function child(name) {
    this.name = name
}
child.prototype = new parent()
let case1 = new child('app')
console.log(case1.getName())

let case2 = new child('test')
case1.arr.push(3)
console.log(case1.arr)
console.log(case2.arr) //case1改变arr对象，case2也被改变

缺点：原型链继承当原型中存在引用类型值时，实例可以修改其值。多个实例对引用类型的操作会被篡改。

构造函数继承

function parent(name) {
    this.age = '22'
    this.name = name
	console.log(this.name)
}

function child(name) {
    parent.call(this,name)
}

let case1 = new child('app')
console.log(case1.name)
console.log(case1.age)

缺点：

• 只能继承父类的实例属性和方法，不能继承父类原型属性/方法
• 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

组合函数继承（原型链继承+构造函数继承）

用原型链实现对原型属性和方法的继承，用借用构造函数技术来实现实例属性的继承。

function parent(name) {
    this.age = '22'
    this.name = name
	console.log(this.name+'0')
}

function child(name) {
    parent.call(this,name)//继承实例属性，第二次调用 parent()
}
child.prototype = new parent('pa')//继承原型上的属性和方法，第一次调用 parent()
let case1 = new child('app')
console.log(case1.name)

优点：
可以复用原型上定义的方法
可以保证每个函数有自己的属性，可以解决原型中引用类型值被修改的问题

缺点：
父类构造器始终会被调用两次，有两组相同的属性：一组在child的原型上，一组在child实例上

原型式继承

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

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

var person = {
    name: '小红',
    foods: ["苹果", "芒果", "西瓜"]
}

var person1 = object(person);
person1.name = '小蓝';
person1.foods.push('橙子');

var person2 = object(person);
person2.name = '小黑';
person2.foods.push('香蕉');

console.log(person1.name); // 小蓝
console.log(person1.foods); // ["苹果", "芒果", "西瓜", "橙子", "香蕉"]
console.log(person2.name); // 小黑
console.log(person2.foods); // ["苹果", "芒果", "西瓜", "橙子", "香蕉"]

原型式继承非常适合不需要单独创建构造函数，但仍然需要在对象间共享信息的场合。
缺点：
原型式继承多个实例的引用类型属性指向相同，存在篡改的可能。与原型链模式类似。

另外，ES5存在Object.create()方法，可以代替上面的object方法。

寄生式继承

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

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

function crateAnother(original) {
    var clone = object(original); // 通过调用 object() 函数创建一个新对象
    clone.sayHi = function() {  // 以某种方式来增强对象
        console.log("hi");
    };
    return clone; // 返回这个对象
}

var person = {
    name: '小红',
    foods: ["苹果", "芒果", "西瓜"]
}

var person1 = crateAnother(person);
person1.name = '小蓝';
person1.foods.push('橙子');

var person2 = crateAnother(person);
person2.name = '小黑';
person2.foods.push('香蕉');

console.log(person1.name); // 小蓝
console.log(person1.foods); // ["苹果", "芒果", "西瓜", "橙子", "香蕉"]
person1.sayHi(); // hi

console.log(person2.name); // 小黑
console.log(person2.foods); // ["苹果", "芒果", "西瓜", "橙子", "香蕉"]
person2.sayHi(); // hi
console.log(person1.sayHi === person2.sayHi); // false

寄生式同样适合主要关注对象，而不在乎类型和构造函数的场景。
缺点：
原型链继承多个实例的引用类型属性指向相同，存在篡改的可能。
无法实现复用函数，与构造函数模式类似。

寄生组合式继承

组合继承是 JavaScript 最常用的继承模式; 它最大的问题就是无论什么情况下,都会调用两次父类构造函数: 一次是在创建子类型原型的时候, 另一次是在子类型构造函数内部. 寄生组合式继承就是为了降低调用父类构造函数的开销而出现的 .

基本思路：不通过调用父类构造函数给子类原型赋值，而是取得父类原型的一个副本。

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

function inheritPrototype(subType, superType) {
    let prototype = object(superType.prototype); // 创建对象，创建父类原型的一个副本
    prototype.constructor = subType; // 增强对象，弥补因重写原型而丢失的默认的constructor
    subType.prototype = prototype; // 复制对象，将新创建的对象赋值给子类的原型
}

function Person(name) {
    this.foods = ['苹果', '芒果', '西瓜'];
    this.name = name;
}

Person.prototype.getName = function() {
    console.log(this.name);
}

// 借用构造函数传递增强子类实例属性
function Student(name, school) {
    // 继承实例属性
    Person.call(this, name); 
    this.school = school;
}

// 将父类原型指向子类
inheritPrototype(Student, Person);

Student.prototype.getSchool = function() {
    console.log(this.school);
}

var stu1 = new Student('小红', '幼儿园');
var stu2 = new Student('小蓝', '高中');
console.log(stu1);
console.log(stu1.name, stu1.school); // 小红 幼儿园
console.log(stu2.name, stu2.school); // 小蓝 高中

stu1.foods.push('橙子');
stu2.foods.push('香蕉');
console.log(stu1.foods); // ["苹果", "芒果", "西瓜", "橙子"]
console.log(stu2.foods); // ["苹果", "芒果", "西瓜", "香蕉"]

只调用了一次Person和构造函数，避免了Student.prototype上不必要也用不到的属性，效率更高。

寄生组合式继承集寄生式继承和组合继承的优点于一身，是实现引用类型继承的最佳模式。

ES6类继承 extends

class Person {
    constructor(name) {
        this.name = name;
        this.foods = ['苹果', '芒果', '西瓜'];
    }

    getName() {
        console.log(this.name);
    }
}

class Student extends Person {
    constructor(name, school) {
        super(name);
        this.school = school;
    }

    getSchool() {
        console.log(this.school);
    }

}

var stu1 = new Student('小红', '幼儿园');
var stu2 = new Student('小蓝', '高中');
stu1.getName();
stu1.getSchool();
stu2.getName();
stu2.getSchool();

stu1.foods.push('橙子');
stu2.foods.push('香蕉');
console.log(stu1.foods); // ["苹果", "芒果", "西瓜", "橙子"]
console.log(stu2.foods); // ["苹果", "芒果", "西瓜", "香蕉"]