从Javascript面向对象编程（二）：构造函数的继承这里，可以看到详细的说明。

我只是将其中的例子做成html文件，便于调试罢了。

1. 构造函数绑定

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function Animal(){
  5. 	this.species = "动物";
  6. }
  7.  
  8. Animal.prototype.species2 = "动物2"
  9.  
  10. function Cat(name,color){
  11. 	Animal.apply(this, arguments);
  12. 	this.name=name;
  13. 	this.color=color;
  14. }
  15. Cat.prototype.type = "猫科动物";
  16. Cat.prototype.eat = function(){alert("吃老鼠")}; 
  17.  
  18. var cat1 = new Cat("大毛","黄色");
  19. var cat2 = new Cat("二毛","黑色");
  20. alert(cat1.species); // 大毛
  21. alert(cat1.species2); // 黄色
  22. </script>
  23. </head>
  24. <body>
  25. 	Test
  26. </body>
  27. </html>

但是这种方法只适合本地变量的继承，并且Animal和Cat之间也没有关系。

看截图，可以看到从cat1并不能访问Animal.prototype.species2。

2。 prototype模式

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function Animal(){
  5. 	this.species = "动物";
  6. }
  7.  
  8. function Cat(name,color){
  9. 	this.name=name;
  10. 	this.color=color;
  11. }
  12.  
  13. Cat.prototype = new Animal();
  14. Cat.prototype.constructor = Cat;
  15.  
  16. Cat.prototype.type = "猫科动物";
  17. Cat.prototype.eat = function(){alert("吃老鼠")}; 
  18.  
  19. var cat1 = new Cat("大毛","黄色");
  20. var cat2 = new Cat("二毛","黑色");
  21. alert(cat1.name); // 大毛
  22. alert(cat1.color); // 黄色
  23. </script>
  24. </head>
  25. <body>
  26. 	Test
  27. </body>
  28. </html>

从截图可以看出，prototype还是没有改变javascript内部的继承关系，见直角方框；

圆角方框中的内容就是通过改变prototype，来实现继承。

3. 直接继承prototype

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function Animal(){ }
  5. Animal.prototype.species = "动物";
  6.  
  7. function Cat(name,color){
  8. 	this.name=name;
  9. 	this.color=color;
  10. }
  11.  
  12. Cat.prototype = Animal.prototype;
  13. Cat.prototype.constructor = Cat;
  14.  
  15. Cat.prototype.type = "猫科动物";
  16. Cat.prototype.eat = function(){alert("吃老鼠")}; 
  17.  
  18. var cat1 = new Cat("大毛","黄色");
  19. var cat2 = new Cat("二毛","黑色");
  20. alert(cat1.name); // 大毛
  21. alert(cat1.color); // 黄色
  22. </script>
  23. </head>
  24. <body>
  25. 	Test
  26. </body>
  27. </html>

从下面的截图上可以看出，修改Cat.prototype会同时修改Animal.prototype。

4. 利用空对象作为中介

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function extend(Child, Parent) {
  5. 　　var F = function(){};
  6. 　　F.prototype = Parent.prototype;
  7. 　　Child.prototype = new F();
  8. 　　Child.prototype.constructor = Child;
  9. 　　Child.uber = Parent.prototype;
  10. }
  11.  
  12. function Animal(){ }
  13. Animal.prototype.species = "动物";
  14. Animal.prototype.birthPlaces = ['北京','上海','香港'];
  15.  
  16. function Cat(name,color){
  17. 	this.name=name;
  18. 	this.color=color;
  19. }
  20.  
  21. extend(Cat,Animal);
  22.  
  23. Cat.prototype.type = "猫科动物";
  24. Cat.prototype.eat = function(){alert("吃老鼠")}; 
  25.  
  26. var cat1 = new Cat("大毛","黄色");
  27. cat1.birthPlaces.push('厦门');
  28. var cat2 = new Cat("二毛","黑色");
  29. alert(cat1.name); // 大毛
  30. alert(cat1.color); // 黄色
  31. </script>
  32. </head>
  33. <body>
  34. 	Test
  35. </body>
  36. </html>

但是这种方法，还是存在子类修改父类的方法。

  1. cat1.birthPlaces.push('厦门');

会直接导致Animal中的birthPlaces变量变化，这时就会牵扯到浅拷贝和深拷贝了。

一句话，上面的方法，都是在模拟继承，但是都不是正的继承。

javascript中现在还不支持继承，只能能下一个版本。

javascript中的继承方法的更多相关文章

  1. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  2. 浅谈JavaScript中的继承

    引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...

  3. JavaScript中的继承（原型链）

    一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.pro ...

  4. 彻底搞懂JavaScript中的继承

    你应该知道,JavaScript是一门基于原型链的语言,而我们今天的主题 -- "继承"就和"原型链"这一概念息息相关.甚至可以说,所谓的"原型链&q ...

  5. 浅谈 JavaScript 中的继承模式

    最近在读一本设计模式的书,书中的开头部分就讲了一下 JavaScript 中的继承,阅读之后写下了这篇博客作为笔记.毕竟好记性不如烂笔头. JavaScript 是一门面向对象的语言,但是 ES6 之 ...

  6. 关于JavaScript中实现继承，及prototype属性

    感谢Mozilla 让我弄懂继承. JavaScript有八种基本类型,函数属于object.所以所有函数都继承自object.//扩展:对象,基本上 JavaScript 里的任何东西都是对象,而且 ...

  7. javascript中各种继承方式的优缺点

    javascript中实现继承的方式有很多种,一般都是通过原型链和构造函数来实现.下面对各种实现方式进行分析,总结各自的优缺点. 一 原型继承 let Super = functioin(name = ...

  8. JavaScript中的工厂方法、构造函数与class

    JavaScript中的工厂方法.构造函数与class 本文转载自:众成翻译 译者:谢于中 链接:http://www.zcfy.cc/article/1129 原文:https://medium.c ...

  9. 深入理解JavaScript中的继承

    1前言 继承是JavaScript中的重要概念,可以说要学好JavaScript,必须搞清楚JavaScript中的继承.我最开始是通过看视频听培训班的老师讲解的JavaScript中的继承,当时看的 ...

随机推荐

  1. 关于python命令在editor里编写与在interpreter里的编写的不同之处

    关于python命令在editor里编写与在interpreter里的编写的不同之处 其实用这个标题,我心里还是有点胆怯的.作为一个python入门的小白,不,编程入门的小白,我还不太确定我对edit ...

  2. [转]C 语言指针的使用

    第一章 指针的概念 指针是一个特殊的变量,它里面存储的数值被解释成为内存里的一个地址. 要搞清一个指针需要搞清指针的四方面的内容:指针的类型,指针所指向的 类型,指针的值或者叫指针所指向的内存区,还有 ...

  3. MySQL----alter table modify | change的不同

    1.modify.change都可以修改列的属性:一同的是modify只能修改表的数据类型.change比它要牛逼一点它可以在修改数据类型的同时也修改列名. 2.modify 的语法:alter ta ...

  4. USB OTG学习

    1. 概要 OTG设备使用插头中的ID引脚来区分A/B Device,ID接地被称作为A-Device,为连接时候的USB Host,A-Device始终为总线提供电力,ID悬空被称作为B-Devic ...

  5. DNS解析服务使用的系统对网站的安全起着很重要的作用

    1 采用独享的DNS服务器解析系统 DNS解析服务使用的系统对网站的安全极其重要.现在国内的DNS服务器普遍是公用的,即是你的企业网站DNS解析服务和其他许多网站都是由同一个DNS服务器提供.一旦某个 ...

  6. 图片文件,图片文件流和BASE64加密字符串之间的转换,以及图片的BASE64加密字符串再jsp上如何显示

    http://blog.csdn.net/sidongxue2/article/details/43036373

  7. linux（debian） 安装jdk

    #vi /etc/profile 在里面添加如下内容 export JAVA_HOME=/usr/java/jdk1.6.0_27 export JAVA_BIN=/usr/java/jdk1.6.0 ...

  8. poj - 1228 - Grandpa's Estate

    题意:原来一个凸多边形删去一些点后剩n个点,问这个n个点能否确定原来的凸包(1 <= 测试组数t <= 10,1 <= n <= 1000). 题目链接:http://poj. ...

  9. LCP Array(思维)

    LCP Array Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Tota ...

  10. SVN 权限配置具体说明

    svnserve权限配置 分配权限时.文件夹应该应该遵从从大到小,权限应该从小到大的规则 即:文件夹从根文件夹開始,权限从没有权限(为空就可以)到可写再到可读写. 提示:文件夹的訪问权限既能够分配给组 ...