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

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

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

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

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

javascript之非构造函数的继承的更多相关文章

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

    Javascript面向对象编程:非构造函数的继承   这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使 ...

  2. Javascript面向对象编程(三):非构造函数的继承(对象的深拷贝与浅拷贝)

    Javascript面向对象编程(三):非构造函数的继承   作者: 阮一峰 日期: 2010年5月24日 这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现&quo ...

  3. javascript面向对象(三):非构造函数的继承

    本文来自阮一峰 这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使用构造函数实现"继承" ...

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

    一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' }; 还有一个对象,叫做&qu ...

  5. 转载:javascript面向对象编程:非构造函数的继承

    一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' }; 还有一个对象,叫做&qu ...

  6. Javascript面向对象编程(三):非构造函数的继承 by 阮一峰

    今天是最后一个部分,介绍不使用构造函数实现"继承". 一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Ch ...

  7. (转)Javascript面向对象编程(三):非构造函数的继承(作者:阮一峰)

    不使用构造函数实现"继承". 一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { na ...

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

    转载自:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html 一.什 ...

  9. Javascript面向对象编程:非构造函数的继承

    今天是最后一个部分,介绍不使用构造函数实现"继承". 一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Ch ...

随机推荐

  1. 好消息啊,有些c似乎不用加厂商前缀了

    今天写程序,一个不小心,没写厂商前缀,然而,,,,,,, 可以运行了(我居然不知道这个消息!!!!) 赶紧写几个字纪念一下. (把鼠标移动到红色的字上边~~~) don' you think that ...

  2. cocos2dx-环境搭建和创建项目(mac用)

    学习一门语言最快的方法就是制作一个简单的项目. 而要制作一个项目必须先搭好环境,即使花上2小时去熟悉环境创建也不算浪费.由于之后的项目会用到cocos2d-x 3.0,这里以3.0为例子(不同的版本写 ...

  3. C++ 简明教程

    C++是一种系统编程语言.用它的发明者, Bjarne Stroustrup的话来说,C++的设计目标是: 成为“更好的C语言” 支持数据的抽象与封装 支持面向对象编程 支持泛型编程 C++提供了对硬 ...

  4. Java EE业务处理流程与XML的引入

    Java EE基于MVC架构的业务处理流程 MVC架构业务处理流程 XML定义 XML是可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言.XML被设计用于数据的存 ...

  5. 谷歌发布"自动机器学习"技术 AI可自我创造

    谷歌发布"自动机器学习"技术 AI可自我创造 据Inverse报道,今年5月份,谷歌宣布其人工智能(AI)研究取得重大进展,似乎帮助科幻小说中最耸人听闻的末日预言成为现实.谷歌推出 ...

  6. python3.4学习笔记(四) 3.x和2.x的区别,持续更新

    python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...

  7. IP分片丢失重传

    尽管IP分片看起来是是透明的,但有一点让人不想使用它:即使只丢失一片数据也要重传整个数据报.为什么会发生这种情况呢?     因为IP层本身没有超时重传的机制——由更高层来负责超时和重传(TCP有超时 ...

  8. MySQL Crash Course #02# Chapter 3. 4 通配符. 分页

    索引 查看表.文档操作 检索必须知道的两件事 数据演示由谁负责 通配符.非必要不用 检索不同的行 限制结果集.分页查找 运用数据库.表全名 命令后加分号对于很多 DBMS 都不是必要的,但是加了也没有 ...

  9. 根据wsdl文件,Java工程自动生成webservice客户端调用

    根据wsdl文件,Java工程自动生成webservice客户端调用 1,工具:带有webservice插件的myeclips 2,步骤: (1),新建一个Java工程:relationship (2 ...

  10. linux查看是否能访问外网及拥有的公网IP

    linux查看是否能访问外网及拥有的公网IP linux查看是否能访问外网及拥有的公网IP: 1,测访问外网能力:curl -l http://www.baidu.com 2,测访问外网能力:wget ...