1、原型链
如何实现
function SuperType() {
this.color = 'green';
}
SuperType.prototype.getSuperColor = function () {
return this.color;
}
function SubType() {
this.SubColor = 'red'
}
SubType.prototype = new SuperType();
SubType.prototype.getSubColor = function () {
return this.SubColor;
}
var instance = new SubType();
alert(instance.getSuperColor()); // 'green'
存在的问题
最主要的问题就是包含引用类型值的原型。
function Super() {
this.colors = ['red', 'green'];
}
function Sub() {
}
Sub.prototype = new Super();
var instance1 = new Sub();
var instance2 = new Sub();
instance1.colors.push('blue');
console.log(instance1.colors); // ["red", "green", "blue"]
console.log(instance2.colors); // ["red", "green", "blue"]
总结
很少单独使用原型链来实现继承。
2、借用构造函数（伪造对象、经典继承）
如何实现
# 基本实现继承
function Super() {
this.colors = ['red', 'green'];
}
function Sub() {
Super.call(this);
}
var instance1 = new Sub();
var instance2 = new Sub();
instance1.colors.push('blue');
console.log(instance1.colors); // ["red", "green", "blue"]
console.log(instance2.colors); // ["red", "green"]
# 子类型构造函数中向超类型构造函数中传递参数
function Super(name) {
this.name = name;
}
function Sub() {
Super.call(this, 'tom');
this.age = 24;
}
var instance = new Sub();
console.log(instance.name); // tom
console.log(instance.age); // 24
存在的问题
方法也必须在超类型构造函数中定义，在超类型的原型上定义的方法不能成功继承给子类型的实例。
function Super() {
this.fruit = 'orange';
}
Super.prototype.getSuperFruit = function () {
return this.fruit;
}
function Sub() {
Super.call(this);
}
var instance = new Sub();
alert(instance.getSuperFruit()); // instance.getSuperFruit is not a function
总结
很少单独使用借用构造函数实现继承。
3、组合继承 (伪经典继承)
如何实现
function Super(name) {
this.name = name;
this.colors = ['red', 'green'];
}
Super.prototype.getSuperName = function () {
return this.name;
}
function Sub(name) {
Super.call(this, name);
this.age = 24;
}
Sub.prototype = new Super();
Sub.prototype.constructor = Sub;
var instance = new Sub('tom');
console.log(instance.name); // tom
console.log(instance.getSuperName()); // tom
存在的问题
最大的问题就是无论在什么样的情况下，都会调用俩次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数的内部。虽然子类型最终会包含超类型对象的全部实例属性，但我们不得不在调用子类型构造函数时重写这些属性。
总结
组合继承是javascript中最常用的继承模式。
4 、原型式继承。
如何实现
# 基本的实现方式
function object(o) {
function F() {
}
F.prototype = o;
return new F();
}
var person = {
name: 'tom',
fruit: ['orange', 'banana']
};
var anotherPerson = object(person);
anotherPerson.name = 'jack';
anotherPerson.fruit.push('apple');
var yetAnotherPerson = object(person);
yetAnotherPerson.name = 'alice';
yetAnotherPerson.fruit.push('grape');
console.log(yetAnotherPerson.fruit); // ["orange", "banana", "apple", "grape"]
# ECMAScript 5 封装的 Object.create()方法
var person = {
name: 'tom',
fruit: ['orange', 'banana']
};
var anotherPerson = Object.create(person);
anotherPerson.name = 'jack';
anotherPerson.fruit.push('apple');
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = 'alice';
yetAnotherPerson.fruit.push('grape');
console.log(yetAnotherPerson.fruit); // ["orange", "banana", "apple", "grape"]
存在的问题
包含引用类型值得属性始终都会共享相应的值。
总结
在没有必要兴师动众地创建构造函数，而只想让一个对象与另一个对象保持类似的情况下，原型式继承是完全可以胜任的。
5、寄生式继承
如何实现
function object(o){
function F() {
}
F.prototype = o;
return new F();
}
function createAnother(o) {
var clone = object(o);
clone.sayHi = function () {
alert('hi~');
}
return clone;
}
var person = {
name: 'tom',
colors: ['red', 'green', 'blue']
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); // 'hi~'
总结
在主要考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式。
6、寄生组合式继承
如何实现
function SuperType(name) {
this.name = name;
this.colors = ['red', 'green', 'blue'];
}
SuperType.prototype.sayHi = function () {
alert('hi~' + this.name);
};
function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
}
function inheritPrototype(subType, superType) {
var prototype = Object.create(superType.prototype);
prototype.constructor = subType;
subType.prototype = prototype;
}
inheritPrototype(SubType, SuperType);
var another = new SubType('jack', 24);
another.sayHi(); // 'hi jack'
console.log(another);
总结
寄生组合式继承是引用类型最理想的继承范式。
网友评论