js 继承由浅入深

JS 继承这里讨论几种常见的方式，循序渐进

1.原型链继承 2.构造函数继承 3.组合继承 4.寄生组合继承

一、原型链继承

实现

function Parent() {
 this.name = "parentName";
}
Parent.prototype.getName = function () {
 console.log(this.name);
};
function Child() {}
// Parent的实例同时包含实例属性⽅法和原型属性⽅法，所以把new Parent()赋值给Child.prototype。
// 如果仅仅Child.prototype = Parent.prototype，那么Child只能调⽤getName，⽆法调⽤.name
// 当Child.prototype = new Parent()后， 如果new Child()得到⼀个实例对象child，那么
// child.__proto__ === Child.prototype;
// Child.prototype.__proto__ === Parent.prototype
// 也就意味着在访问child对象的属性时，如果在child上找不到，就会去Child.prototype去找，
//如果还找不到，就会去Parent.prototype中去找，从⽽实现了继承。
Child.prototype = new Parent();
// 因为constructor属性是包含在prototype⾥的，上⾯重新赋值了prototype，所以会导致Child
//的constructor指向[Function: Parent]，有的时候使⽤child1.constructor判断类型的时候就会出问题
// 为了保证类型正确，我们需要将Child.prototype.constructor 指向他原本的构造函数Child
Child.prototype.constructor = Child;
var child1 = new Child();
child1.getName(); // parentName

隐含的问题：

1、如果有属性是引用类型的，引用类型挂在在原型上，一旦某个实例修改了这个属性，所有的实例都会受到影响

---

function Parent() {
 this.actions = ["eat", "run"];
}
function Child() {}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
const child1 = new Child();
const child2 = new Child();
child1.actions.pop();
console.log(child1.actions); // ['eat']
console.log(child2.actions); // ['eat']

2、创建 Child 实例的时候不能传参

3、会把父类构造函数里面的私有属性也全挂载到子类的原型链上，造成冗余和上面1的问题

二、构造函数继承

解决上面问题：可以使用 call 或者 apply 复制一遍 parent 上面的操作，把参数传递进去

实现

function Parent(name, actions) {
 this.actions = actions;
 this.name = name;
}
function Child(id, name, actions) {
 Parent.call(this, name);
 // 如果想直接传多个参数, 可以Parent.apply(this, Array.from(arguments).slice(1));
 this.id = id;
}
const child1 = new Child(1, "c1", ["eat"]);
const child2 = new Child(2, "c2", ["sing", "jump", "rap"]);
console.log(child1.name); // { actions: [ 'eat' ], name: 'c1', id: 1 }
console.log(child2.name); // { actions: [ 'sing', 'jump', 'rap' ], name: 'c2', 
id: 2 }

隐含的问题：

1.属性或方法想被继承的话，只能在构造函数中定义。而如果方法在构造函数内定义了，那么每次创建实例的时候都会创建一遍方法，多占一份内存。

2.如果父类的 prototype 上面定义了方法，子类并没有继承该方法

三、组合继承

通过原型链继承我们实现了基本的继承，⽅法存在 prototype 上，⼦类可以直接调⽤。但是引 ⽤类型的属性会被所有实例共享，并且不能传参。 通过构造函数继承，我们解决了上⾯的两个问题：使⽤ call 在⼦构造函数内重复⼀遍属性和⽅ 法创建的操作，并且可以传参了。 但是构造函数同样带来了⼀个问题，就是构造函数内重复创建⽅法，导致内存占⽤过多。 是不是突然发现原型链继承是可以解决⽅法重复创建的问题？ 所以我们将这两种⽅式结合起 来，这就叫做组合继承

实现

function Parent(name, actions) {
 this.name = name;
 this.actions = actions;
}
Parent.prototype.eat = function () {
 console.log(`${this.name} - eat`);
};
function Child(id) {
 Parent.apply(this, Array.from(arguments).slice(1));
 this.id = id;
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
const child1 = new Child(1, "c1", ["hahahahahhah"]);
const child2 = new Child(2, "c2", ["xixixixixixx"]);
child1.eat(); // c1 - eat
child2.eat(); // c2 - eat
console.log(child1.eat === child2.eat); // true

隐含的问题：

调⽤了两次构造函数，做了重复的操作

1. Parent.apply(this, Array.from(arguments).slice(1));

2. Child.prototype = new Parent();

 四、寄生组合继承

我们可以考虑让 Child.prototype 间接访问到 Parent.prototype

实现

function Parent(name, actions) {
 this.name = name;
 this.actions = actions;
}
Parent.prototype.eat = function () {
 console.log(`${this.name} - eat`);
};
function Child(id) {
 Parent.apply(this, Array.from(arguments).slice(1));
 this.id = id;
}
// 模拟Object.create的效果
// 如果直接使⽤Object.create的话，可以写成Child.prototype = Object.create(Parent.prototype);
let TempFunction = function () {};
TempFunction.prototype = Parent.prototype;
Child.prototype = new TempFunction();
Child.prototype.constructor = Child;
const child1 = new Child(1, "c1", ["hahahahahhah"]);
const child2 = new Child(2, "c2", ["xixixixixixx"]);