上回说到《JavaScript 原型继承之基础机制》,这一篇将具体说说构造函数的继承。
从一个简单的示例开始,创建描述人类的 People 构造函数:
function People(){
this.race = '愚蠢的人类';
}
然后,创建描述黄种人的 Yellow 构造函数:
function Yellow(name, skin){
this.name = name;
this.skin = skin;
}
要使得黄种人 Yellow 能继承人类 People 对象,在 JavaScript 中可以通过多种方式模拟实现。
1、对象冒充(Object Masquerading)
对象冒充,简单地说就是把一个定义抽象类的构造函数当作常规函数使用,实现伪继承:
function Yellow(name, skin) {
this._extend = People;
this._extend();
delete this._extend; //删除对 People 的引用
this.name = name;
this.skin = skin;
}
//实例化 yellow1
var yellow1 = new Yellow('小明', '黄皮肤');
console.log(yellow1.name); //小明
console.log(yellow1.race); //愚蠢的人类
在这段代码中,为 Yellow 添加私有方法 _extend,由于函数本身只是以引用的形式存在,执行时会自动调用 People 方法,并传入 Yellow 构造函数的 name 参数。而 Yellow 对象的自身属性和方法,必须在上述过程结束,清空对外部方法的引用后再进行定义。
注:通过对象冒充可以实现多重继承
2、call / apply 方法
通过 call / apply 方法实现继承可能更为简单,不需要任何繁琐的操作:
function Yellow(name, skin) {
People.apply(this, arguments);
this.name = name;
this.skin = skin;
}
//实例化 yellow2
var yellow2 = new Yellow('大卫', '黑皮肤')
console.log(yellow2.name); //大卫
console.log(yellow2.race); //愚蠢的人类
这里为 apply 传入 arguments 数组,也可以使用 new Array 或字面量数组。
3、原型链(Prototype Chaining)
第一种原型继承方法是把对象的原型指向父类的某个实例:
Yellow.prototype = new People();
Yellow.prototype.constructor = Yellow; //初始的 prototype 被完全清空,所以最好将 constructor 重置
var yellow3 = new Yellow('小王', '黄皮肤');
console.log(yellow3.race); //愚蠢的人类
以上代码可以这样反向理解,yellow3 实例本身找不到 race 属性,而它原型上的 race 属性又恰好是 People 对象的实例的 race 属性。
如果对于 People 对象来说,其属性写入了原型中,则无需实例化,只需将 Yellow 的 prototype 属性指向 People 的 prototype 属性:
function People(){};
People.prototype.race = '愚蠢的人类';
Yellow.prototype = People.prototype;
Yellow.prototype.constructor = Yellow;
这样做不进行实例化操作,只是指针的改变,非常环保。但由于引用类型的关系,Yellow 和 People 指向了同一个原型对象,也就是说对 Yellow.prototype.constructor 的修改实际上破坏了 People 的原型对象。
既然如此,可以借助一个空的中继对象,绕过父类的原型:
var F = function(){};
F.prototype = People.prototype;
Yellow.prototype = new F();
Yellow.prototype.constructor = Yellow;
转载自 <a href="http://www.mangguo.org/javascript-prototype-constructor-inheritance/" title="JavaScript 原型继承之构造函数继承" rel="bookmark">JavaScript 原型继承之构造函数继承 | 芒果小站</a>
已经有 12 条群众意见
- JavaScript 原型继承之构造函数继承 | 千里走单骑
#1/2011-08-11 14:49[...] YUI3 封装机制 (8) © 2010 芒果小站 | 固定链接 | 没有评论 | 标签 JavaScript, Prototype View full post on [...] 回应
- 数据恢复培训
#2/2011-08-12 10:31学习路过 回应
- IM路人
#3/2011-08-13 11:23纯技术的不懂,路过~~~~ 回应
- 股票资讯
#4/2011-08-14 13:47十分不错的总结学习了 回应
- 在线代理
#5/2011-08-14 22:10继续关注博主文章~!! 回应
- 帅哥同志
#6/2011-08-15 21:34我也是搜索芒果进来的,居然说是不卖芒果,啊哈 回应
- 芒果 对 说
#7/2011-08-15 23:11当然不卖芒果,这是个技术博客。 回应
- 补水面膜
#8/2011-08-17 00:49反正我最讨厌“学习了”。。 回应
- 百度影音电影网
#9/2011-08-18 11:58似乎在哪里见过 博主ID 回应
- 芒果 对 说
#10/2011-08-18 12:39哈哈,我无处不在,一般用 tinyhill 这个 ID 厮混的…… 回应
- 岁月无痕
#11/2011-08-21 04:18感觉这个网站设计的好出色, 回应
- 女装加盟
#12/2011-10-19 15:24纯技术的不懂 回应
我简单说几句