Javascript面向对象编程（三）：非构造函数的继承
- 上一篇：Javascript面
- 下一篇：上海的酸雨
分类：
Javascript面向对象编程（三）：非构造函数的继承
这个系列的第一部分介绍了"封装"，第二部分介绍了使用构造函数实现"继承"。
今天是最后一个部分，介绍不使用构造函数实现"继承"。
一、什么是"非构造函数"的继承？
比如，现在有一个对象，叫做"中国人"。
var Chinese = {
nation:'中国'
};
还有一个对象，叫做"医生"。
var Doctor ={
career:'医生'
}
请问怎样才能让"医生"去继承"中国人"，也就是说，我怎样才能生成一个"中国医生"的对象？
这里要注意，这两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现"继承"。
二、object()方法
json格式的发明人Douglas Crockford，提出了一个object()函数，可以做到这一点。
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
这个object()函数，其实只做一件事，就是把子对象的prototype属性，指向父对象，从而使得子对象与父对象连在一起。
使用的时候，第一步先在父对象的基础上，生成子对象：
var Doctor = object(Chinese);
然后，再加上子对象本身的属性：
Doctor.career = '医生';
这时，子对象已经继承了父对象的属性了。
alert(Doctor.nation); //中国
三、浅拷贝
除了使用"prototype链"以外，还有另一种思路：把父对象的属性，全部拷贝给子对象，也能实现继承。
下面这个函数，就是在做拷贝：
function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}c.uber = p;
return c;
}
使用的时候，这样写：
var Doctor = extendCopy(Chinese);
Doctor.career = '医生';
alert(Doctor.nation); // 中国
但是，这样的拷贝有一个问题。那就是，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，而不是真正拷贝，因此存在父对象被篡改的可能。
请看，现在给Chinese添加一个"出生地"属性，它的值是一个数组。
Chinese.birthPlaces = ['北京','上海','香港'];
通过extendCopy()函数，Doctor继承了Chinese。
var Doctor = extendCopy(Chinese);
然后，我们为Doctor的"出生地"添加一个城市：
Doctor.birthPlaces.push('厦门');
发生了什么事？Chinese的"出生地"也被改掉了！
alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门
所以，extendCopy()只是拷贝基本类型的数据，我们把这种拷贝叫做"浅拷贝"。这是早期jQuery实现继承的方式。
四、深拷贝
所谓"深拷贝"，就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难，只要递归调用"浅拷贝"就行了。
function deepCopy(p, c) {
var c = c || {};
for (var i in p) {
if (typeof p[i] === 'object') {
c[i] = (p[i].constructor === Array) ? [] : {};
deepCopy(p[i], c[i]);
} else {
c[i] = p[i];
}
}return c;
}
使用的时候这样写：
var Doctor = deepCopy(Chinese);
现在，给父对象加一个属性，值为数组。然后，在子对象上修改这个属性：
Chinese.birthPlaces = ['北京','上海','香港'];
Doctor.birthPlaces.push('厦门');
这时，父对象就不会受到影响了。
alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港
目前，jQuery库使用的就是这种继承方法。
（完）
文档信息
- 版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
- 发表日期： 2010年5月24日
- 更多内容： 档案 » JavaScript
- 购买文集：
《如何变得有思想》 - 社交媒体：
twitter，
weibo - Feed订阅：
广告（购买广告位）
留言（45条）
我要发表看法
联系方式 | ruanyifeng.com 2003 - 2016
jlake 说：
不错，概念解释得很清楚。
2010年5月25日 08:15 | # | 引用
Micky 说：
Thanks！虽然原理和上一篇大致相同，但还是对我有所启发。尤其最后一个深拷贝方法。
2010年5月25日 09:07 | # | 引用
netwjx 说：
拷贝法很适合用在传递参数
比如
function foo(options){
options=$.extend({
name:'Default Name',
age:22,
man:true
},options);
// options.name ....
}
需要深拷贝给$.extend的第3个参数true
jQuery
2010年5月25日 22:39 | # | 引用
谦 说：
很好的专题
2010年5月29日 10:07 | # | 引用
xniupp 说：
学到了好多东西。。
2010年6月 7日 18:27 | # | 引用
simaopig 说：
在《JavaScript 设计模式》一书中有介绍，只不过方法叫clone
同时，对于这种引用型数据的继承，书中介绍的是采用构造函数的方法返回
例如：
function clone(obj){
function F(){};
F.prototype = obj;
return new F;
}
var Chinese = {
nation:'中国',
createBirthPlaces : function(){
return ['北京','上海','香港'];
}
};
var Doctor = clone(Chinese);
Doctor.career = '医生';
Doctor.birthPlaces = Chinese.createBirthPlaces();
//3
alert(Doctor.birthPlaces.length);
Doctor.birthPlaces.push('大连');
//4
alert(Doctor.birthPlaces.length);
//3
alert(Chinese.createBirthPlaces().length);
2010年7月22日 10:32 | # | 引用
呵呵 说：
这段话好像说的不太对，这个object函数在我看来是临时声明一个构造函数，使这个构造函数的PROTOTYPE属性指向需要继承的对象，然后生成一个实例并返回。
2010年9月25日 15:41 | # | 引用
无名新人 说：
我觉得，深拷贝，是不是还要考虑那种自引用的情况呢？
2012年1月31日 14:49 | # | 引用
wamdy 说：
是的，这种继承方法，存在一个问题，当引用存在回路时，将出现死循环。
2012年7月29日 08:51 | # | 引用
qq663550185 说：
这里要考虑方法的继承吧？
2012年11月26日 08:57 | # | 引用
zhangyq 说：
深拷贝应该详细的再探讨一下。期待……
2013年3月 6日 13:23 | # | 引用
令狐葱 说：
deepCopy这个里面需要判断是不是对象的自有属性么？
2013年4月10日 16:40 | # | 引用
phplaber 说：
没怎么看明白，对于Javascript的面向对象操作，感觉自己还没入门。
2013年7月 5日 20:58 | # | 引用
kk 说：
很不错的专题，受用颇深，初学者易懂
2013年7月12日 13:31 | # | 引用
tcsc 说：
第4部分深拷贝有个小错误
deepCopy函数中应该要传入两个参数才对
var Doctor = deepCopy(Chinese);//原文
var Doctor = deepCopy(Chinese,Doctor);//修改后
2013年9月10日 02:09 | # | 引用
大兵 说：
2013年9月19日 14:20 | # | 引用
夏 说：
function deepCopy(p){
var F = (p.constructor === Array) ? [] : {};
for(var i in p){
if((typeof p[i]).toString().toLowerCase() == "object"){
F[i] = extendCopy2(p[i]);
}else{
F[i] = p[i];
}
}
return F;
}
var Chinese = {country:"中国"};
Chinese.ext = ["大中国", "dd"];
var Doctor = extendCopy2(Chinese);
Doctor.name = "中国";
Doctor.ext.push("大");
alert(Doctor.ext);
alert(Chinese.ext);
alert(Doctor.country);
2013年9月26日 16:39 | # | 引用
夏 说：
var Chinese = {country:"中国"};
Chinese.ext = ["大中国", "dd"];
var Doctor = deepCopy(Chinese);
Doctor.name = "中国";
Doctor.ext.push("大");
alert(Doctor.ext);
alert(Chinese.ext);
alert(Doctor.country);
2013年9月26日 16:40 | # | 引用
夏 说：
function deepCopy(p){
var F = (p.constructor === Array) ? [] : {};
for(var i in p){
if((typeof p[i]).toString().toLowerCase() == "object"){
F[i] = deepCopy(p[i]);
}else{
F[i] = p[i];
}
}
return F;
}
2013年9月26日 16:41 | # | 引用
333 说：
2014年1月27日 17:22 | # | 引用
龙则 说：
昨天去百度面试被问到一个继承的问题，如何不执行构造函数实现继承？要继承被继承对象的原型属性与自有属性。
如：
function A(){
alert(‘执行了’);
this.name = 'longze';
}
A.prototype.age = 29;
要继承A的name属性和age属性，还不执行构造函数（不要alert出任何东西）。
2014年2月21日 10:13 | # | 引用
子任 说：
使用：
二、object()方法
Doctor.birthPlaces.push('厦门');
易出现
alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门
2014年3月 5日 14:27 | # | 引用
欧子 说：
看高级程序设计看得还有点晕，被这几篇博客点悟完瞬间清晰了
2014年4月26日 11:15 | # | 引用
欢乐小金鱼 说：
阮老师您好，我在看这篇文章的时候有一些疑问，理解不了
c[i] = (p[i].constructor === Array) ? [] : {}; 这句话 constructor属性，p[i]假设是数组，一、constructor不得这样访问吗 p[i].prototype.constructor 二、 p[i].prototype.constructor 不是指向P吗？
2014年7月 3日 13:53 | # | 引用
dzyhenry 说：
function A () {
alert("abc");
}
A.prototype.name = "longze";
A.prototype.age = 29;
function B () {
}
B.prototype = A.prototype;
B.prototype.constructor = B;
var b1 = new B();
alert(b1.name + " " +b1.age);
这样可以不？
2014年7月29日 21:32 | # | 引用
Christine Wang 说：
对于初学者来说真的是非常好的专题，原来看了书，这一块似懂非懂，如今看了这个专题，条理相较清楚了很多。感谢分享。
2014年9月 4日 15:01 | # | 引用
sunrise 说：
我觉得用浅拷贝合适。把属性和函数，依次付给另一个对象。
2014年9月 4日 17:55 | # | 引用
sranty 说：
同意就完了，var c = c || {},就是干这个的~ 如果c 是个对象，则直接返回c对象，不存在就创建一个空对象~
2014年12月 5日 17:39 | # | 引用
龙剑 说：
感谢启发
2014年12月 8日 16:49 | # | 引用
Nice 说：
不用加typeof p[i] == "Function"判断了，函数的话只须获取父对象中函数的地址。
2015年2月 4日 22:15 | # | 引用
jl 说：
我觉得如果p[i]=null或undefined的时候会出问题
2015年3月 5日 01:14 | # | 引用
louis 说：
有点迷糊
2015年4月10日 14:59 | # | 引用
youharutou 说：
拷贝好像不是真正的继承，只是复制了一份数据，两个对象之间没有联系，父对象的属性更改了，子对象不会跟着变化
function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
return c;
}
var obj = {el: "hello", psy: "world"};
var pps = extendCopy(obj);
obj.el = "cd";
c(obj); //Object {el: "cd", psy: "world"} el改成cd了
c(pps); //Object {el: "hello", psy: "world", uber: Object} el没有变化，还是"hello"
2015年4月20日 10:34 | # | 引用
youharutou 说：
而object()方法是可以的
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
利用一个中间对象F作为桥接，子对象作为F的实例，而F的原型是父对象，这样子对象和父对象就有了联系
2015年4月20日 10:45 | # | 引用
gethin 说：
深拷贝有问题。typeof 判断是不是Object本来就有问题。
例如var a = {aa: /a/i};
var b = deepCopy(a); // b : {aa:{}}
2015年8月26日 16:11 | # | 引用
志远 说：
JS为何不抛弃这种麻烦的基于对象而是直接采用类似C++那样的面向对象方式实现？有这个可能么
2015年9月 7日 15:01 | # | 引用
Person() 说：
alert=function(){}
组合继承也行，拷贝继承也行。。随便用
话说是因为实在想不出，不alert的话就不能实例化，不实例化怎么继承本地属性。
2015年10月26日 22:46 | # | 引用
jaychang 说：
p[i].constructor === Array
可以用Array.isArray(p[i])
2016年1月 6日 15:11 | # | 引用
瑞瑞爸爸 说：
@dzyhenry：
我觉得是对的，不过A.prototype.constructor 变成了B
2016年1月 7日 16:40 | # | 引用
ABCD 说：
昨天去百度面试被问到一个继承的问题，如何不执行构造函数实现继承？要继承被继承对象的原型属性与自有属性。
第一步 整理 function A(){ alert('运行了');}
A.prototype={ name:"lengz",age:29
}
第二步 function B(){}
function Kong(){}
Kong.prototype=A.prototype;
B.prototype=new Kong();
B.prototype.constructor=B;
B.uber=A.prototype;
var bbb=new B();
alert(bbb.name);
alert(bbb.age);
2016年1月17日 01:37 | # | 引用
大名 说：
写的很好，赞一个，我这个外行也感觉学到了不少。。
2016年2月15日 13:45 | # | 引用
朽木 说：
浅显易懂，谢谢大神
（这个博客是我目前唯一一个长期关注的博客~）
2016年3月 1日 08:50 | # | 引用
Hippo 说：
感觉似懂非懂一样。
2016年6月22日 14:13 | # | 引用
卡卡罗特 说：
大神的帖子永远是最好理解的
2016年7月23日 09:46 | # | 引用
TJ 说：
神经写法
var Alert=window.alert;
alert=function(a){
if(alert.caller==A){
return function(){};
}else{
return Alert(a);
}
};
var B=function(){};
B.prototype=new A();
B.prototype.constructor=B;
var b=new B()
alert(b.name)
2016年8月22日 17:43 | # | 引用