标注:(转载自:http://www.jb51.net/article/28128.htm)

今天要介绍的是,如何生成一个"继承"多个对象的实例。 
比如,现在有一个"动物"对象的构造函数,

复制代码代码如下:

  function Animal(){ 
    this.species = "动物"; 
  } 

还有一个"猫"对象的构造函数,

复制代码代码如下:

  function Cat(name,color){ 
    this.name = name; 
    this.color = color; 
  } 

怎样才能使"猫"继承"动物"呢? 
1. 构造函数绑定 
最简单的方法,大概就是使用call或apply方法,将父对象的构造函数绑定在子对象上,也就是在子对象构造函数中加一行:

复制代码代码如下:

  function Cat(name,color){ 
    Animal.apply(this, arguments); 
    this.name = name; 
    this.color = color; 
  } 
  var cat1 = new Cat("大毛","黄色"); 
  alert(cat1.species); // 动物 

2. prototype模式 
更常见的做法,则是使用prototype属性。 
如果"猫"的prototype对象,指向一个Animal的实例,那么所有"猫"的实例,就能继承Animal了。

复制代码代码如下:

  Cat.prototype = new Animal(); 
  Cat.prototype.constructor = Cat; 
  var cat1 = new Cat("大毛","黄色"); 
  alert(cat1.species); // 动物 

代码的第一行,我们将Cat的prototype对象指向一个Animal的实例。 
  Cat.prototype = new Animal(); 
它相当于完全删除了prototype 对象原先的值,然后赋予一个新值。但是,第二行又是什么意思呢? 
  Cat.prototype.constructor = Cat; 
原来,任何一个prototype对象都有一个constructor属性,指向它的构造函数。也就是说,Cat.prototype 这个对象的constructor属性,是指向Cat的。 
我们在前一步已经删除了这个prototype对象原来的值,所以新的prototype对象没有constructor属性,所以我们必须手动加上去,否则后面的"继承链"会出问题。这就是第二行的意思。 
总之,这是很重要的一点,编程时务必要遵守。下文都遵循这一点,即如果替换了prototype对象, 
  o.prototype = {}; 
那么,下一步必然是为新的prototype对象加上constructor属性,并将这个属性指回原来的构造函数。 
  o.prototype.constructor = o; 
3. 直接继承prototype 
由于Animal对象中,不变的属性都可以直接写入Animal.prototype。所以,我们也可以让Cat()跳过 Animal(),直接继承Animal.prototype。 
现在,我们先将Animal对象改写:

复制代码代码如下:

  function Animal(){ } 
  Animal.prototype.species = "动物"; 

然后,将Cat的prototype对象,然后指向Animal的prototype对象,这样就完成了继承。

复制代码代码如下:

  Cat.prototype = Animal.prototype; 
  Cat.prototype.constructor = Cat; 
  var cat1 = new Cat("大毛","黄色"); 
  alert(cat1.species); // 动物 

与前一种方法相比,这样做的优点是效率比较高(不用执行和建立Animal的实例了),比较省内存。缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。 
所以,上面这一段代码其实是有问题的。请看第二行 
  Cat.prototype.constructor = Cat; 
这一句实际上把Animal.prototype对象的constructor属性也改掉了! 
  alert(Animal.prototype.constructor); // Cat 
4. 利用空对象作为中介 
由于"直接继承prototype"存在上述的缺点,所以可以利用一个空对象作为中介。

复制代码代码如下:

  var F = function(){}; 
  F.prototype = Animal.prototype; 
  Cat.prototype = new F(); 
  Cat.prototype.constructor = Cat; 

F是空对象,所以几乎不占内存。这时,修改Cat的prototype对象,就不会影响到Animal的prototype对象。 
  alert(Animal.prototype.constructor); // Animal 
5. prototype模式的封装函数 
我们将上面的方法,封装成一个函数,便于使用。

复制代码代码如下:

  function extend(Child, Parent) { 
    var F = function(){}; 
    F.prototype = Parent.prototype; 
    Child.prototype = new F(); 
    Child.prototype.constructor = Child; 
    Child.uber = Parent.prototype; 
  } 

使用的时候,方法如下

复制代码代码如下:

  extend(Cat,Animal); 
  var cat1 = new Cat("大毛","黄色"); 
  alert(cat1.species); // 动物 

这个extend函数,就是YUI库如何实现继承的方法。 
另外,说明一点。函数体最后一行 
  Child.uber = Parent.prototype; 
意思是为子对象设一个uber属性,这个属性直接指向父对象的prototype属性。这等于是在子对象上打开一条通道,可以直接调用父对象的方法。这一行放在这里,只是为了实现继承的完备性,纯属备用性质。 
6. 拷贝继承 
上面是采用prototype对象,实现继承。我们也可以换一种思路,纯粹采用"拷贝"方法实现继承。简单说,如果把父对象的所有属性和方法,拷贝进子对象,不也能够实现继承吗? 
首先,还是把Animal的所有不变属性,都放到它的prototype对象上。

复制代码代码如下:

  function Animal(){} 
  Animal.prototype.species = "动物"; 

然后,再写一个函数,实现属性拷贝的目的。

复制代码代码如下:

  function extend2(Child, Parent) { 
    var p = Parent.prototype; 
    var c = Child.prototype; 
    for (var i in p) { 
      c[i] = p[i]; 
      } 
    c.uber = p; 
  } 

这个函数的作用,就是将父对象的prototype对象中的属性,一一拷贝给Child对象的prototype对象。 
使用的时候,这样写:

复制代码代码如下:

  extend2(Cat, Animal); 
  var cat1 = new Cat("大毛","黄色"); 
  alert(cat1.species); // 动物 

未完,请继续阅读第三部分《非构造函数的继承》。 
(完)

转载于:https://www.cnblogs.com/l-woniu/p/3492618.html

Javascript面向对象编程(二) 构造函数的继承相关推荐

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

    Javascript面向对象编程:构造函数的继承 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承&q ...

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

    今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = & ...

  3. JavaScript面向对象编程深入分析

    JavaScript面向对象编程深入分析 一. Javascript 面向对象编程:封装 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又 ...

  4. JavaScript 面向对象编程(二) —— 构造函数 / 原型 / 继承 / ES5 新增方法

    本篇为 JavaScript 进阶 ES6 系列笔记第二篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 : Javascript 继承机制的 ...

  5. javascript 面向对象编程(封装、继承)

    在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法. Javascript语言不支持"类",但是可 ...

  6. javascript 面向对象编程(工厂模式、构造函数模式、原型模式)

    javascript 面向对象编程(工厂模式.构造函数模式.原型模式) CreateTime--2018年3月29日17:09:38 Author:Marydon 一.工厂模式 /*** 工厂模式*/ ...

  7. 在JavaScript面向对象编程中使用继承(5)

    明天就要回老家去过年了,关于这个"在JavaScript面向对象编程中使用继承"的话题居然还没有说完.如果不完成,留下来一拖就拖到明年去了.所以还是抽空把它写完,今年的事情今年做, ...

  8. javascript面向对象编程实现[定义(静态)属性方法--继承]

    javascript面向对象编程实现:             1.类的声明:                 function test1(){                     this.p ...

  9. 《javascript面向对象编程指南》读书笔记

    <javascript面向对象编程指南>读书笔记 <javascript面向对象编程指南>读书笔记 第一章 面向对象的JavaScript 第二章 基本数据类型与流程控制 变量 ...

  10. (转)Javascript 面向对象编程(一):封装

    它们都是非常优秀的Javascript读物,推荐阅读. 笔记分成三部分.今天的第一部分是讨论"封装"(Encapsulation),后面的第二部分和第三部分讨论"继承&q ...

最新文章

  1. 从 no-code 到 low-code 再到 pro-code
  2. Windows Pe 第三章 PE头文件-EX-相关编程-2(RVA_FOA转换)
  3. Docker导入、导出、删除容器
  4. Python | 使用matplotlib.pyplot创建线图
  5. virtualbox主机网络管理 未能创建_如何在 VirtualBox 中增加现有虚拟机的磁盘大小 | Linux 中国...
  6. Java字符串基本认识
  7. React 入门与实战-课时7 虚拟DOM的本质和目的
  8. 前端ES6+基础总结
  9. 制作网页版Excel表
  10. VS2015卸载。非常干净-亲测有用
  11. 【数字信号调制】基于BPSK实现信号调制和解调含Matlab源码
  12. nutch2.3 mysql教程_Nutch2.2.1+MySQL+Solr4.10.3安装部署
  13. 使用Selenium实现直播平台的自动刷屏
  14. android 计步器acc,利用腾讯云云函数执行部署修改小米运动步数代码_每天自动修改步数...
  15. 美食杰(个人主页) 上
  16. 青龙脚本-趣闲赚(更新)
  17. Java核心编程随笔
  18. 计算机语言中a 什么意思,"i=!a"在c语言中什么意思
  19. 分析便宜云主机价格低的因素
  20. MSCRM 2011 可视化Ribbon编辑工具,超级强大!

热门文章

  1. 《Microsoft Sql server 2008 Internals》读书笔记--第十一章DBCC Internals(11)
  2. ActiveMQ_使用经验
  3. J2SE核心开发实战(一)——认识J2SE
  4. linux centos删除安装的包,CentOS yum认为已删除的软件包仍在安装中
  5. mysql 指定目录_mysql 更改默认数据目录
  6. 动态规划生产存储matlab,基于Matlab的动态规划算法的实现及应用
  7. Gateway网关-过滤器链执行顺序
  8. JMM如何解决顺序一致性问题-JMM层面的内存屏障
  9. 消息发送到topic多个MessageQueue
  10. spring中事务控制的一组API