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

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

1. 构造函数绑定

<html>

<head>

<script type="text/javascript">

function Animal(){

	this.species = "动物";

}

Animal.prototype.species2 = "动物2"

function Cat(name,color){

	Animal.apply(this, arguments);

	this.name=name;

	this.color=color;

}

Cat.prototype.type = "猫科动物";

Cat.prototype.eat = function(){alert("吃老鼠")}; 

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

var cat2 = new Cat("二毛","黑色");

alert(cat1.species); // 大毛

alert(cat1.species2); // 黄色

</script>

</head>

<body>

	Test

</body>

</html>

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

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

2。 prototype模式

<html>

<head>

<script type="text/javascript">

function Animal(){

	this.species = "动物";

}

function Cat(name,color){

	this.name=name;

	this.color=color;

}

Cat.prototype = new Animal();

Cat.prototype.constructor = Cat;

Cat.prototype.type = "猫科动物";

Cat.prototype.eat = function(){alert("吃老鼠")}; 

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

var cat2 = new Cat("二毛","黑色");

alert(cat1.name); // 大毛

alert(cat1.color); // 黄色

</script>

</head>

<body>

	Test

</body>

</html>

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

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

3. 直接继承prototype

<html>

<head>

<script type="text/javascript">

function Animal(){ }

Animal.prototype.species = "动物";

function Cat(name,color){

	this.name=name;

	this.color=color;

}

Cat.prototype = Animal.prototype;

Cat.prototype.constructor = Cat;

Cat.prototype.type = "猫科动物";

Cat.prototype.eat = function(){alert("吃老鼠")}; 

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

var cat2 = new Cat("二毛","黑色");

alert(cat1.name); // 大毛

alert(cat1.color); // 黄色

</script>

</head>

<body>

	Test

</body>

</html>

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

4. 利用空对象作为中介

<html>

<head>

<script type="text/javascript">

function extend(Child, Parent) {

　　var F = function(){};

　　F.prototype = Parent.prototype;

　　Child.prototype = new F();

　　Child.prototype.constructor = Child;

　　Child.uber = Parent.prototype;

}

function Animal(){ }

Animal.prototype.species = "动物";

Animal.prototype.birthPlaces = ['北京','上海','香港'];

function Cat(name,color){

	this.name=name;

	this.color=color;

}

extend(Cat,Animal);

Cat.prototype.type = "猫科动物";

Cat.prototype.eat = function(){alert("吃老鼠")}; 

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

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

var cat2 = new Cat("二毛","黑色");

alert(cat1.name); // 大毛

alert(cat1.color); // 黄色

</script>

</head>

<body>

	Test

</body>

</html>

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

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. Almost Prime

    Description Almost Prime time limit per test: 2 seconds memory limit per test: 256 megabytes input: ...

  2. android XML格式颜色

    <!--android:background="@color/"-> <?xml version="1.0" encoding="u ...

  3. 只有电信3G是公网ip。

    只有电信3G是公网ip,其它网络拿到是内部网.

  4. Linux学习笔记4-三种不同类型的软件的安装（绿色软件、rpm软件、源代码软件）

    在Linux下软件分三种: 1.绿色软件:即不用安装直接就能用的软件 2.rpm安装包:以rpm结尾的可执行文件  3.源码文件:没有进行过编译和打包的文件,需要编译后再进行安装 一.绿色软件的安装 ...

  5. $(window).width() is not a function

    昨天在帮同事调试JS的时候,FF报错了,$(window).width() is not a function.我以前也是这么用的,都没问题,为什么现在就报错了呢? 这是因为jQuery用" ...

  6. Subsequence（暴力+二分）

    Subsequence Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10875   Accepted: 4493 Desc ...

  7. 自定义和扩展 SharePoint 2010 Server 功能区

    了解构成 SharePoint 2010 服务器功能区的组件以及如何通过演练两个功能区自定义项方案来自定义功能区. 适用范围: Microsoft SharePoint Foundation 2010 ...

  8. 使用sqlcmd执行连接的时候一直报有语法错误

    1.今天在使用sqlcmd进行执行连接操作的时候一直报有语法错误找了半天. 命令 sqlcmd -S 服务器名称 -U 帐户 -P 密码 示例 sqlcmd -S "LOCALHOST&qu ...

  9. asp.net 使用HttpModule记录全局错误

    以前使用Global.asax记录全局的错误日志觉得挺好用,但是如果一个解决方案下有N多个项目,每个下边都需要加一个并且代码都还是重复的,终于有一天无法再忍受这种模式,考虑到HttpModule,直接 ...

  10. Sql Server 列转行 Pivot使用

    今天正好做 数据展示,用到了列转行,行转列有多种方式,Pivot是其中的一种,Povit 是sql server 2005以后才出现的功能, 下面的业务场景: 每个月,进货渠道的总计数量[Total] ...