JavaScript面向对象之寄生组合式继承

今天来介绍一下JavaScript面向对象中的寄生组合式继承,话不多说,直接上示例代码和图解(没有JavaScript面向对象基础的童鞋建议自行脑补基础知识,推荐书籍《JavaScript高级程序设计(第三版)》)

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function SuperType(name){
this.name = name;
}
SuperType.prototype = {
constructor: SuperType,
colors: ['red', 'blue', 'green'],
sayName: function(){
console.log(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);
SubType.prototype.sayAge = function(){
console.log(this.age);
};
var instance1 = new SubType('jack', 29);
var instance2 = new SubType('tom', 27);
instance1.colors.push('black');
console.log(instance1.colors); // 'red', 'blue', 'green', 'black'
console.log(instance2.colors); // 'red', 'blue', 'green', 'black'
instance1.sayName(); // jack
instance1.sayAge(); // 29
instance2.sayName(); // tom
instance2.sayAge(); // 27

图解

mahua

说明

代码“SuperType.call(this, name)”相当于借用构造函数的形式,继承了父类的构造函数

而实现原型继承最主要就是inheritPrototype函数,其分为三步(不需要把大象装冰箱…):

第一步,创建一个新对象,其原型指向父类SubType的原型
第二步,将上一步的对象的constructor属性指向子类构造函数
第三步,将子类的原型定义为上面新创建的对象

第一步代码中“Object.create”方法在只传入一个参数的情况下可以理解为下面的方法
Object.create = function(o){
function F(){}
F.prototype = o;
return new F();
}
相当于实现了“创建一个对象,其原型为传入的参数”
注意:Object.create方法在ES5中引入,所以只有支持ES5的浏览器才可以使用此方法(IE9+,FireFox4+,Safari5+,Opera12+,Chrome)

对照图解,可以看出,“寄生组合式继承”轻松形成了原型链

坚持原创技术分享,您的支持将鼓励我继续创作!

热评文章