Javascript构造函数的继承

仅供学习参考,原文链接: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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/396712.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python输入字符串str_python字符串(str)

#value "raitOrEi"#v value.capitalize()#首字母大写#print(v)#v1 v.casefold()#全部变小写,不只是英文的,其他语言特殊的大小写也变换#print(v1)#v2 v.lower()#只是英文变小写#print(v2)#设置宽度,并将内容居中#20 代指总长度…

html5 audio api 录音,如何使用HTML5 Web Audio API录制我的声音

在webkit浏览器上,您可以将get user media api与webkitGetUserMedia一起使用 – 如html5rocks所示.如果你想用你的声音来创建javascript事件(例如控制屏幕上的对象)你必须分析传入的声音(例如事件1的高频率 – 事件2的低频率,语音分析要复杂得多,见下文)另外,还有chrome的’x-w…

修改密码

在updateservlet.java中写了方法&#xff0c;修改用户密码&#xff0c;代码不成功求大神指教&#xff0c;代码如下&#xff1a; updateadminpw.jsp <% page contentType"text/html;charsetgb2312" pageEncoding"gb2312" %><% taglib uri"ht…

MlLib--逻辑回归笔记

批量梯度下降的逻辑回归可以参考这篇文章&#xff1a;http://blog.csdn.net/pakko/article/details/37878837 看了一些Scala语法后&#xff0c;打算看看MlLib的机器学习算法的并行化&#xff0c;那就是逻辑回归&#xff0c;找到package org.apache.spark.mllib.classification下…

mysql相关命令操作

2019独角兽企业重金招聘Python工程师标准>>> 远程连接容器中的mysql&#xff1a;mysql -h 192.168.5.116 -P 3306 -u root -p123456 启动mysql容器&#xff1a; $ sudo docker pull mysql:5.6.35 $ sudo docker run --name mysql -p 12345:3306 -e MYSQL_ROOT_PASSW…

html实体注册商标,html 注册商标,html 注册商标代码

html中注册的页面用什么标签写好对于html中的注册页面&#xff0c;策朋专业办理商标注册、专利申请、版权登记保护&#xff0c;需要一个表格。使用标签&#xff0c;输入和按钮标签来组合成就。使用html作为注册页面。实际上&#xff0c;只要您能达到期望的效果&#xff0c;它的…

java已知一个二叉树_#二叉树复习#

#二叉树复习#目录满二叉树完全二叉树平衡二叉树二叉树的主要性质--二叉树的度--二叉树的深度计算二叉树的遍历其他符号变量结点总数深度度为0的结点数/叶子结点数度为1的结点数度为2的结点数什么是满二叉树&#xff1f;二叉树每层的结点数为。满二叉树总结点数&#xff1a;。图…

hashtable - hashmap

http://www.importnew.com/24822.html转载于:https://www.cnblogs.com/qinqiu/p/9711147.html

java 反射机制_基础篇:深入解析JAVA反射机制

反射的概念java 的放射机制&#xff1a;在程序运行时&#xff0c;程序有能力获取一个类的所有方法和属性&#xff1b;并且对于任意一个对象&#xff0c;可以调用它的任意方法或者获取其属性通俗解析&#xff1a;java 文件需要编译成. class 文件才能被 jvm 加载使用, 对象的. c…

构建之法阅读笔记01

本学期阅读计划有两个&#xff0c;一个是《构建之法》&#xff0c;另一个是《大道至简》。 在快速阅读构建之法后&#xff0c;我想提一下几个问题&#xff1a; 1、软件程序软件工程&#xff0c;那么只会软件工程是怎样具体详细的将程序变成合格的软件的&#xff1f; 2、效能分析…

html div float center,跨浏览器实现float:center

跨浏览器实现float:center互联网 发布时间&#xff1a;2008-10-17 19:26:11 作者&#xff1a;佚名 我要评论原文&#xff1a;http://www.macji.com/blog/article/to-achieve-cross-browser-css-float-center/to-achieve-cross-browser-css-float-center/我们都知道float…

博弈论中:纳什均衡、纯策略纳什均衡、混合策略纳什均衡、占优策略

纳什均衡 纳什均衡是由约翰福布斯纳什&#xff08;John Forbes Nash&#xff09;在20世纪50年代提出的博弈论概念&#xff0c;用于描述博弈中的一种稳定状态。在纳什均衡状态下&#xff0c;每个参与者都假定其他参与者的策略是已知的&#xff0c;他们选择的策略是最优的&#…

工具_HBuilder使用快捷方式

HBuilder常用快捷键大概共9类&#xff08;【4 13 3】文件、编辑、插入&#xff1b;【4 9 8】选择、跳转、查找&#xff1b;【1 1 6】运行、工具、视图&#xff09; 1.文件(4) 新建 Ctrl N 关闭 Ctrl F4 全部关闭 Ctrl Shift F4 属性 Alt Enter 2.编辑(13) 激活代码助…

oracle左连接没用_一周零基础学完Oracle数据库第三天02

四、 多表查询1 什么是多表查询多表查询&#xff1a;当查询的数据并不是来源一个表时&#xff0c;需要使用多表链接操作完成查询。根据 不同表中的数据之间的关系查询相关联的数据。多表链接方式&#xff1a; 内连接&#xff1a;连接两个表&#xff0c;通过相等或不等判断链接列…

weblogic启动项目报错找不到类_启动类报错是经常出现的事但是单一的从一个地方找原因会越找越错...

Error starting ApplicationContext. To display the conditions report rerun your application with debug enabled.当我们看到这个报错的时候有的说是jar包重复&#xff0c;有的说是Controller包和Application包处于平行位置&#xff0c;还有的觉得是RequestMapping的valu…

fis

fis3实时刷新 npm install -g fis3 进入相关目录 发布&#xff1a; fis3 release 启动&#xff1a; fis3 server start // 服务启动后&#xff0c;会一直存在&#xff0c;重启或者fis3 server stop 才会关闭服务 自动刷新 fis3 release -wL关闭服务 fis3 server stop …

深入理解javascript原型和闭包(7)——原型的灵活性

在Java和C#中&#xff0c;你可以简单的理解class是一个模子&#xff0c;对象就是被这个模子压出来的一批一批月饼&#xff08;中秋节刚过完&#xff09;。压个啥样&#xff0c;就得是个啥样&#xff0c;不能随便动&#xff0c;动一动就坏了。 而在javascript中&#xff0c;就没…

微型计算机一般不采用的控制方式,微型计算机控制作业.doc

作业一PID控制器引言在实际的过程控制与运动控制系统中&#xff0c;PID家族占据有相当的地位&#xff0c;据统计&#xff0c;工业控制的控制器中PID类控制占有90%以上。PID控制器是最早出现的控制器类型&#xff0c;因为其结构简单&#xff0c;各个控制器参数有着明显的物理意义…

js根据毫米/厘米算像素px

<html><meta http-equiv"content-type" content"text/html;charsetutf-8"><body> 纸张宽度(毫米mm)&#xff1a;<input type"text" id"width" value"10"> <span id"width_px"><…

c语言为什么有这么多的编程环境?_为什么98%的程序员学编程都会从C语言开始?...

在互联网蓬勃发展的时代&#xff0c;有一类人做出了巨大的贡献&#xff0c;这一群人被大家称之为程序员&#xff0c;怎样才能成为一名优秀的程序员呢&#xff0c;为什么每一个程序员都需要学习C语言呢&#xff1f;就让我来跟大家分享分享&#xff1a;壹第一&#xff1a;相比较其…