仅供学习参考,原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html

今天要介绍的是,对象之间的"继承"的五种方法。

比如,现在有一个"动物"对象的构造函数。

  function Animal(){

    this.species = "动物";

  }

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

  function Cat(name,color){

    this.name = name;

    this.color = color;

  }

怎样才能使"猫"继承"动物"呢?

一、 构造函数绑定

第一种方法也是最简单的方法,使用call或apply方法,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行:

  function Cat(name,color){

    Animal.apply(this, arguments);

    this.name = name;

    this.color = color;

  }

  var cat1 = new Cat("大毛","黄色");

  alert(cat1.species); // 动物

二、 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 = new Animal();"这一行,Cat.prototype.constructor是指向Cat的;加了这一行以后,Cat.prototype.constructor指向Animal。

  alert(Cat.prototype.constructor == Animal); //true

更重要的是,每一个实例也有一个constructor属性,默认调用prototype对象的constructor属性。

  alert(cat1.constructor == Cat.prototype.constructor); // true

因此,在运行"Cat.prototype = new Animal();"这一行之后,cat1.constructor也指向Animal!

  alert(cat1.constructor == Animal); // true

这显然会导致继承链的紊乱(cat1明明是用构造函数Cat生成的),因此我们必须手动纠正,将Cat.prototype对象的constructor值改为Cat。这就是第二行的意思。

这是很重要的一点,编程时务必要遵守。下文都遵循这一点,即如果替换了prototype对象,

  o.prototype = {};

那么,下一步必然是为新的prototype对象加上constructor属性,并将这个属性指回原来的构造函数。

  o.prototype.constructor = o;

三、 直接继承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

四、 利用空对象作为中介

由于"直接继承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

我们将上面的方法,封装成一个函数,便于使用。

  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属性。(uber是一个德语词,意思是"向上"、"上一层"。)这等于在子对象上打开一条通道,可以直接调用父对象的方法。这一行放在这里,只是为了实现继承的完备性,纯属备用性质。

五、 拷贝继承

上面是采用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/zhangym118/p/6419277.html

Javascript构造函数的继承相关推荐

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

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

  2. 【Infragistics教程】在javascript构造函数中创建基本继承

    2019独角兽企业重金招聘Python工程师标准>>> [下载Infragistics Ultimate最新版本] 用javascript创建对象有四种方法.具体如下: 对象作为文本 ...

  3. JavaScript [ 转 ] —— 面向对象编程(三):非构造函数的继承

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

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

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

  5. Javascript非构造函数的继承

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

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

    标注:(转载自:http://www.jb51.net/article/28128.htm) 今天要介绍的是,如何生成一个"继承"多个对象的实例.  比如,现在有一个"动 ...

  7. JavaScript学习总结(二十)——Javascript非构造函数的继承

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

  8. JavaScript中的继承入门

    正统的面相对象的语言都会提供extend之类的方法用于出来类的继承,但Javascript并不提供extend方法,在Javascript中使用继承需要用点技巧. Javascript中的实例的属性和 ...

  9. JavaScript之各种继承方式和优缺点

    2019独角兽企业重金招聘Python工程师标准>>> JavaScript之各种继承方式和优缺点 原型链继承 function Parson(){this.name = 'hy' ...

最新文章

  1. 1402 后缀数组 (hash+二分)
  2. 《系统集成项目管理工程师》必背100个知识点-66工作说明书
  3. python 字典 内存_Python 字典(联合内存、联合数组)
  4. ssl1197-质数和分解【dp练习】
  5. django 模板继承与重写
  6. 使用CLion在Gtkmm中加载glade文件时的相对路径问题
  7. 深入理解ARM体系架构(S3C6410)---PWM实例
  8. php缓存静态化设计,PHP使用OB缓存实现静态化功能示例
  9. 磁测仪高斯计与特斯拉计、磁通计的区别
  10. 达梦数据库可视化工具的使用
  11. treeTable的简单用法
  12. wordpress插件_适用于作家和写作的最佳WordPress插件
  13. 微信小程序开通广告要求累计独立访客(UV)不低于 1000是什么意思?怎么查看UV数量?
  14. Hyperledger Fabric定制联盟链网络工程实践
  15. 求曲线面积的原理(微积分入门)
  16. 卢松松博客模板php版,[Emlog模板]卢松松博客主题
  17. BMS-Pro电池巡检综合监控系统
  18. LaTeX pdf转eps格式
  19. 南航数据分析与挖掘课设1(下)——基于多元线性回归模型,ARIMA序列的中国GDP增长影响因素研究及预测(R语言代码附录)
  20. 【基于python+Django的博客系统-哔哩哔哩】 https://b23.tv/bmRfAMu

热门文章

  1. mongodb连接失败_mongodb 数据库及数据分页
  2. 第七届山东省Acm程序设计竞赛赛后总结
  3. C++ 对引用的理解4
  4. electron 主进程与渲染进程 渲染进程与渲染进程 之间的通信
  5. [Linux]线程安全和可重入函数
  6. html类名定义规则_HTML入门笔记1
  7. Linux系统编程---14(回收子线程,回收多个子线程,线程分离,杀死线程)
  8. 数据库原理及应用【六】数据库设计
  9. 基于单链表的生产者消费者问题
  10. 线程控制原语之pthread_self和pthread_create函数