继承
- 类式继承
function SuperClass() {
this.spValue = true;
}
SuperClass.prototype.getSuperValue = function () {
return this.spValue;
}
function SubClass() {
this.subValue = false;
}
SubClass.prototype = new SuperClass();
SubClass.prototype.getSubValue = function () {
return this.subValue;
}
类式继承的简单原理就是，子类的原型是父类的一个实例对象。但是这中方式有个问题，对于父类中的引用类型的属性，就有问题了。看下面代码：
function SuperClass() {
this.spValue = true;
this.myThings = ['css', 'js', 'html'];
}
SuperClass.prototype.getSuperValue = function () {
return this.spValue;
}
function SubClass() {
this.subValue = false;
}
SubClass.prototype = new SuperClass();
SubClass.prototype.getSubValue = function () {
return this.subValue;
}
let instance1 = new SubClass();
let instance2 = new SubClass();
console.log(instance1.myThings); //['css', 'js', 'html']
console.log(instance2.myThings); //['css', 'js', 'html']
instance1.myThings.push('acss');
console.log(instance2.myThings); //['css', 'js', 'html','acss']
对于父类的共有属性(meThings)子类的一个对象修改会导致其他对象全跟着修改。所以有了构造函数继承
- 构造函数继承
//声明一个父类
function SuperClass(id) {
this.books = ['html', 'css'];
this.id = id;
}
SuperClass.prototype.showBooks = function () {
console.log(this.books);
}
//声明子类
function SubClass(id) {
SuperClass.call(this, id);
}
let instance1 = new SubClass(1);
let instance2 = new SubClass(2);
instance1.books.push('javaScript');
console.log(instance1);//{books:["html", "css", "javaScript"],id:1}
console.log(instance2);//{books:["html", "css"],id:1}
instance1.showBooks(); //error
构造函数继承就是把子类的变量利用父类的构造函数复制一遍，由于子类没有涉及父类的prototype，所以最后一句输出出错。如果想要继承父类的原型方法的话，把原型赋值放到构造函数里即可
- 组合继承
由于结构函数继承存在执行两次
//声明一个父类
function SuperClass(id) {
this.books = ['html', 'css'];
this.id = id;
}
SuperClass.prototype.showBooks = function () {
console.log(this.books);
}
//声明子类
function SubClass(id, time) {
SuperClass.call(this, id);
this.time = time;
}
SubClass.prototype = new SuperClass();
SubClass.prototype.getTime = function () {
console.log(this.time);
}
组合继承融合了类式继承和构造函数继承，但是有个缺点就是父类的构造函数执行了两遍，分别在子类使用父类的构造函数和子类的原型类式继承父类的时候。
- 原型式继承
2006年道格拉斯•克罗克福德发表一篇《JavaScript中原型式继承》的文章，其中提到，借助原型prototype可以根据已有的对象创建一个新的对象，看代码
function inheritObejct(o) {
function F() {}
F.prototype = o;
return new F();
}
//这个很像类式继承，而且也会影响共有属性看个例子
var house = {
furniture: ['desk', 'sofa'],
name: 'B211'
}
let newHouse = inheritObejct(house);
let anotherHouse = inheritObejct(house);
newHouse.furniture.push('chair');
newHouse.name = 'newB211';
anotherHouse.furniture.push('bed');
anotherHouse.name = 'anotherB211';
console.log(newHouse.furniture); //["desk", "sofa", "chair", "bed"]
console.log(anotherHouse.furniture);//["desk", "sofa", "chair", "bed"]
- 寄生式继承
function createObject(obj) {
let o = new inheritObejct(obj);
o.getName = function () {
console.log(this.name);
}
return o;
}
但是其依然摆脱不了共有属性被公用篡改的缺点，所以有了以下寄生组合继承
- 寄生组合继承
function inheritPrototype(subClass, superClass) {
var p = inheritObejct(superClass.prototype);
p.construct = subClass;
subClass.prototype = p;
}
看起来很复杂是不，先看个例子加深理解：
function inheritObejct(o) {
function F() {}
F.prototype = o;
return new F();
}
/**
* 寄生式继承方法继承原型
* @param subClass
* @param superClass
*/
function inheritPrototype(subClass, superClass) {
var p = inheritObejct(superClass.prototype);
p.construct = subClass;
subClass.prototype = p;
}
//声明一个父类
function SuperClass(id) {
this.books = ['html', 'css'];
this.id = id;
}
SuperClass.prototype.showBooks = function () {
console.log(this.books);
}
//声明子类
function SubClass(id, time) {
SuperClass.call(this, id);
this.time = time;
}
inheritPrototype(SubClass, SuperClass);
SubClass.prototype.getTime = function () {
console.log(this.time);
}
var instance1 = new SubClass('js', 2017);
var instance2 = new SubClass('python', 2016);
instance1.books.push('设计模式');
console.log(instance1.books);//["html", "css", "设计模式"]
console.log(instance2.books);//["html", "css"]
see,you must know why.
