分类

Javascript面向对象编程(三):非构造函数的继承

作者: 阮一峰

日期: 2010年5月24日

这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承"。

今天是最后一个部分,介绍不使用构造函数实现"继承"。

一、什么是"非构造函数"的继承?

比如,现在有一个对象,叫做"中国人"。

  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库使用的就是这种继承方法。

(完)

留言(64条)

不错,概念解释得很清楚。

Thanks!虽然原理和上一篇大致相同,但还是对我有所启发。尤其最后一个深拷贝方法。

拷贝法很适合用在传递参数
比如
function foo(options){
options=$.extend({
name:'Default Name',
age:22,
man:true
},options);
// options.name ....
}

需要深拷贝给$.extend的第3个参数true
jQuery

很好的专题

学到了好多东西。。

在《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);

这个object()函数,其实只做一件事,就是把子对象的prototype属性,指向父对象,从而使得子对象与父对象连在一起。

这段话好像说的不太对,这个object函数在我看来是临时声明一个构造函数,使这个构造函数的PROTOTYPE属性指向需要继承的对象,然后生成一个实例并返回。

我觉得,深拷贝,是不是还要考虑那种自引用的情况呢?

是的,这种继承方法,存在一个问题,当引用存在回路时,将出现死循环。

这里要考虑方法的继承吧?

深拷贝应该详细的再探讨一下。期待……

deepCopy这个里面需要判断是不是对象的自有属性么?

没怎么看明白,对于Javascript的面向对象操作,感觉自己还没入门。

很不错的专题,受用颇深,初学者易懂

第4部分深拷贝有个小错误
deepCopy函数中应该要传入两个参数才对
var Doctor = deepCopy(Chinese);//原文
var Doctor = deepCopy(Chinese,Doctor);//修改后

引用tcsc的发言:

第4部分深拷贝有个小错误
deepCopy函数中应该要传入两个参数才对
var Doctor = deepCopy(Chinese);//原文
var Doctor = deepCopy(Chinese,Doctor);//修改后

同意楼上的,而且最后的验证效果部分,需要注意调用的顺序。 Chinese.birthPlaces = ['北京','上海','厦门']; var Doctor = deepCopy(Chinese, Doctor); Doctor.birthPlaces.push('厦门');

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);

var Chinese = {country:"中国"};
Chinese.ext = ["大中国", "dd"];
var Doctor = deepCopy(Chinese);
Doctor.name = "中国";
Doctor.ext.push("大");

alert(Doctor.ext);
alert(Chinese.ext);
alert(Doctor.country);

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;
}

引用夏的发言:

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;
}

大神,要是p[i]是一个函数怎么办,即: typeof p[i] == "Function"

昨天去百度面试被问到一个继承的问题,如何不执行构造函数实现继承?要继承被继承对象的原型属性与自有属性。
如:
function A(){
alert(‘执行了’);
this.name = 'longze';
}
A.prototype.age = 29;

要继承A的name属性和age属性,还不执行构造函数(不要alert出任何东西)。

使用:
二、object()方法
Doctor.birthPlaces.push('厦门');
易出现
alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门

看高级程序设计看得还有点晕,被这几篇博客点悟完瞬间清晰了

阮老师您好,我在看这篇文章的时候有一些疑问,理解不了
c[i] = (p[i].constructor === Array) ? [] : {}; 这句话 constructor属性,p[i]假设是数组,一、constructor不得这样访问吗 p[i].prototype.constructor 二、 p[i].prototype.constructor 不是指向P吗?

引用龙则的发言:

昨天去百度面试被问到一个继承的问题,如何不执行构造函数实现继承?要继承被继承对象的原型属性与自有属性。
如:
function A(){
alert(‘执行了’);
this.name = 'longze';
}
A.prototype.age = 29;

要继承A的name属性和age属性,还不执行构造函数(不要alert出任何东西)。

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);
这样可以不?

对于初学者来说真的是非常好的专题,原来看了书,这一块似懂非懂,如今看了这个专题,条理相较清楚了很多。感谢分享。

引用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);
这样可以不?

我觉得用浅拷贝合适。把属性和函数,依次付给另一个对象。

引用大兵的发言:


同意楼上的,而且最后的验证效果部分,需要注意调用的顺序。
Chinese.birthPlaces = ['北京','上海','厦门'];
var Doctor = deepCopy(Chinese, Doctor);
Doctor.birthPlaces.push('厦门');


同意就完了,var c = c || {},就是干这个的~ 如果c 是个对象,则直接返回c对象,不存在就创建一个空对象~

感谢启发

引用333的发言:


大神,要是p[i]是一个函数怎么办,即:
typeof p[i] == "Function"

不用加typeof p[i] == "Function"判断了,函数的话只须获取父对象中函数的地址。

我觉得如果p[i]=null或undefined的时候会出问题

有点迷糊

拷贝好像不是真正的继承,只是复制了一份数据,两个对象之间没有联系,父对象的属性更改了,子对象不会跟着变化
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"

而object()方法是可以的
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
利用一个中间对象F作为桥接,子对象作为F的实例,而F的原型是父对象,这样子对象和父对象就有了联系

深拷贝有问题。typeof 判断是不是Object本来就有问题。
例如var a = {aa: /a/i};
var b = deepCopy(a); // b : {aa:{}}

JS为何不抛弃这种麻烦的基于对象而是直接采用类似C++那样的面向对象方式实现?有这个可能么

引用龙则的发言:

昨天去百度面试被问到一个继承的问题,如何不执行构造函数实现继承?要继承被继承对象的原型属性与自有属性。
如:
function A(){
alert(‘执行了’);
this.name = 'longze';
}
A.prototype.age = 29;

要继承A的name属性和age属性,还不执行构造函数(不要alert出任何东西)。

alert=function(){}
组合继承也行,拷贝继承也行。。随便用
话说是因为实在想不出,不alert的话就不能实例化,不实例化怎么继承本地属性。

p[i].constructor === Array
可以用Array.isArray(p[i])

@dzyhenry:

我觉得是对的,不过A.prototype.constructor 变成了B

昨天去百度面试被问到一个继承的问题,如何不执行构造函数实现继承?要继承被继承对象的原型属性与自有属性。

第一步 整理 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);

写的很好,赞一个,我这个外行也感觉学到了不少。。

浅显易懂,谢谢大神
(这个博客是我目前唯一一个长期关注的博客~)

感觉似懂非懂一样。

大神的帖子永远是最好理解的

引用Person()的发言:

alert=function(){}
组合继承也行,拷贝继承也行。。随便用
话说是因为实在想不出,不alert的话就不能实例化,不实例化怎么继承本地属性。

神经写法

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)

阮老师,您好,麻烦向问一下,我觉得那个深拷贝里面的条件判断应该是 if (typeof p[i] === 'object'||'function')吧??如果是function的话也属于引用吧?

引用Mario的发言:

阮老师,您好,麻烦向问一下,我觉得那个深拷贝里面的条件判断应该是 if (typeof p[i] === 'object'||'function')吧??如果是function的话也属于引用吧?

实测深拷贝中typeof p[i] === "object"就足够了,function类型的拷贝,修改子对象之后不会对父对象产生影响

if (typeof p[i] === 'object') {
 c[i] = (p[i].constructor === Array) ? [] : {};
 deepCopy(p[i], c[i]);
}
深度拷贝,这里 蜀国p[i]是数组,但p[i].constructor 可能被修改为一个其他不是'Array'的函数了呢?
那代码不是会出现错误?

深拷贝不对啊,里面存在顺序问题吧,这么直接写上就是一个错误的,控制台都报错了

继承是对类进行操作,而无论深浅拷贝,涉及拷贝,都是对对象进行操作,把对对象的拷贝“伪造”出来的“继承”。。。从代码的执行效果上看,构造继承,与对象拷贝伪造继承,没区别,仅写法不同,一个用 new 由类构造产生对象,另一个用deepcopy函数拷贝返回产生一个对象。不过容易把对js了解不深的读者带入误区,混淆了类,和对象的概念

再多说一句,使用这种对象deepcopy源对象来伪造一个继承对象的方法,相对于构造函数new一个对象的方法,有个致命缺陷,deepcopy伪造继承,一般都使用json对象作为源对象,那么在编程过程中,很容易遇到对自身对象(被return的新生的复制体)的属性方法调用的问题,简单说就是 this 的使用上,会出现问题。。。。。

浅显易懂,谢谢阮老师

为什么我的方法一就实现不来,感觉直接被覆盖掉了,我现在用的方法是,(只是一个简写)
var obj1 = {name1:111};
var obj2 = {name2:222};
function ob(n,o){
function F() {
for(var i in n){
this[i] = n[i];
}
}
F.prototype = o;

return new F();
}
var ob2 = ob(obj1,obj2);
console.log(ob2);

你好,阮老师
function extendDeepCopy (p, c) {
// console.log('in');
var c = c || {};
for (var i in p) {
if( typeof p[i] === 'object' ) {
// c[i] = (p[i].constructor === 'Array') ? []: {} ;
c[i] = (p[i] instanceof Array) ? [] : {};
extendDeepCopy(p[i], c[i]);
} else {
c[i] = p[i];
}
}
return c;
}

var A = {a:1,b:[1,2],c:2},
B = extendDeepCopy(A);
B.b[0] = 'dsd';
LG(B);
LG(A);

注释的那行代码,现在似乎不对了,p[i].constructor 这个会是 function Array() { [native code] },这是什么原因?

阮老师,我在JavaScript权威指南一书中看到了创建对象的一种方法叫做Object.create();

在书中说到create()方法中是传入任意类型的对象原型,但是我在方法中传入一个对象;

发现创建的对象继承了传入对象的属性,这是什么原因呢?

引用333的发言:


大神,要是p[i]是一个函数怎么办,即:
typeof p[i] == "Function"

函数还不是照样把引用拷贝过去,而且这样的优点是函数父子共享,节约内存。

引用tcsc的发言:

第4部分深拷贝有个小错误
deepCopy函数中应该要传入两个参数才对
var Doctor = deepCopy(Chinese);//原文
var Doctor = deepCopy(Chinese,Doctor);//修改后

不需要,没有指定第二个参数就是undefined,为false,产生一个{}对象

很不错的文档,清晰

引用老宋的发言:

深拷贝不对啊,里面存在顺序问题吧,这么直接写上就是一个错误的,控制台都报错了

因为 p[i].contructor ===Array 的值为 false,所以创建出来的是个对象,对象没有 push()方法,当然报错了……

好想问一个问题,用JSON.stringify()和JSON.parse()拷贝,可以么?

《你不知道的JavaScript》里只推荐用Object.create的方式创建对象关联
https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md

您好,阮老师,两个对象继承可以像下面这样,直接A对象.__proto__ = B对象吗?

var Chinese = {
nation : "中国人"
}

var Doctor = {
career : "医生"
}

Doctor.__proto__ = Chinese;

console.log(Doctor.nation);

Cat.prototype.constructor = Cat;
第二部分 更改prototype的时候需要修正constructor。
但是这个object函数也没看到调整这个逻辑
没看懂

引用宝龙的发言:

Cat.prototype.constructor = Cat;
第二部分 更改prototype的时候需要修正constructor。
但是这个object函数也没看到调整这个逻辑
没看懂

可能是因为object传入的对象o是通过字面量创建的,而不是通过构造函数创建的,此时o的constructor指向Object。

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接