JavaScript 继承
前言
理解对象和继承是我们学习设计模式，甚至是阅读各种框架源码的第一步。上一篇文章，笔者已经把JavaScript对象进行了梳理，今天我们来一起学习继承。
继承
原型链
基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法，也就是将一个原型对象指向另一个引用类型的实例。
Example:
function Parent() {
this.property = true
}
Parent.prototype.getParentValue = () => this.property
function Child() {
this.childProperty = false
}
Child.prototype = new Parent()
Child.prototype.getChildValue = () => this.childProperty
let instance = new Child()
console.log(instance.getParentValue()) // true
Child 通过创建 Parent 实例，并将实例赋值给 Child.prototype 的方式，继承了 Parent 。本质是利用实例重写了原型对象。这样，Child.prototype 拥有了 Parent 的全部属性和方法，同时其内部指针也指向了 Parent.prototype 。
通过实现原型链，本质上拓展了原型搜索机制。
添加方法（谨慎）：
字类型有时需要重写超类型中的某个方法，或新增超类型中不存在的方法，一定要将给原型添加方法的代码放在被替换原型的语句后面。
Example：
function Parent() {
this.property = true;
}
Parent.prototype.getParentValue = () => this.property
function Child() {
this.childProperty = false;
}
//继承了 SuperType
Child.prototype = new Parent();
//添加新方法
Child.prototype.getChildValue = () => this.childProperty
//重写超类型中的方法
Child.prototype.getParentValue = () => false
let instance = new ChildType();
console.log(instance.getParentValue()); //false
原型链继承存在的问题：
- 创建子类型实例时，不能向父类的构造函数中传递参数
- 父子构造函数的原型对象之间存在共享问题
example：
function Parent(){
this.colors = ["red", "blue", "green"];
}
function Child() {}
Child.prototype = new Parent();
let instanceChild = new Child();
instance1.colors.push("black");
console.log(instanceChild.colors); //"red", "blue", "green","black"
//当我们改变colors的时候, 父构造函数的原型对象的也会变化
let instanceParent = new Parent();
console.log(instanceParent.colors); //"red", "blue", "green","black"
构造函数
基本思想：在子类构造函数的内部，调用父类的构造函数
Example:
function Parent(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
function Child() {
Parent.call(this, "jerry"); // 继承了 Parent
this.age = 22;
}
let instanceChild = new Child();
instanceChild.colors.push("black");
console.log(instanceChild.name); // jerry
console.log(instanceChild.colors); //"red", "blue", "green","black"
let instanceParent = new Parent();
console.log(instanceParent.colors); //"red", "blue", "green"
构造函数问题：
- 方法都在构造函数中定义，因此函数很难复用
- 在父类原型对象中定义的方法，子类无法继承
组合继承
简单的说：原型链+构造函数
基本思想：原型链实现对原型属性和方法的继承，构造函数实现对实例属性的继承
Example：
function Parent(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
Parent.prototype.sayName = () => { console.log(this.name) }
function Child(name, age) {
Parent.call(this, name); // 继承属性
this.age = age;
}
// 继承方法
Child.prototype = new Parent();
Child.prototype.constructor = Child;
Child.prototype.sayAge = () => { console.log(this.age) }
let instanceChild = new Child("jerry", 23);
instanceChild.colors.push("black");
console.log(instanceChild.colors); //"red", "blue", "green","black"
instanceChild.sayName(); // jerry
instanceChild.sayAge(); // 23
存在问题：
- 若再添加一个子类型，给其原型单独添加一个方法，那么其他子类型也同时拥有了这个方法，因为它们都指向同一个父类型的原型
- 无论在什么情况下都会调用两次父类的构造函数，我们不得不在调用子类构造函数时，重写这些属性。
原型式继承
基本思想： 本质是对继承对象执行了一次浅拷贝。
example：
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
// ES5内置了object.create()方法可以以上方法的功能。
let parent = {
name: "jerry",
friends: ["marry", "sandy"]
}
let Child1 = object(parent);
Child1.name = "barbie";
Child1.friends.push("Rob");
let Child2 = object(parent);
Child2.name = "Cos";
Child2.friends.push("Linda");
console.log(parent.friends); //"marry", "sandy","Rob","Linda"
存在问题：
- 与原型链继承一样，父子对象之间存在共享问题
- 无法实现复用
寄生式继承
基本思路：在原型式继承外面套了一层函数，在该函数内部增强对象。
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
// 壳子
function createAnother(original) {
let clone = object(original);
clone.sayHi = () => { console.log("Hi") }
return clone;
}
存在问题：
- 复用率贼低
寄生组合式继承
基本思想： 利用构造函数来继承属性，利用原型链的混成形式来继承方法。
example:
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;
}
function Parent(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
Parent.prototype.sayName = () => { console.log(this.name) }
function Child(name, age) {
Parent.call(this, name); // 继承属性
this.age = age;
}
inheritPrototype(Child, Parent)
Child.prototype.sayAge = () => this.age
目前来说，这是最好的继承方式。
结束
懒癌发作，明明早就写好了，一直把他丢弃在电脑硬盘里。几周之后，我挣扎着打开MWeb，稍做修葺，赶个结束语。算是画上一个句号吧。最后，不得不说，高级3，真是一本不可多得的好书，把对象、继承讲得如此清晰明了。
参考
- 《JavaScript高级程序设计》第3版
网友评论