从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. 使用SecureCRT网络连接树莓派

        为了更加方便可以通过网络来连接.控制树莓派,使用SecureCRT可以通过网络来连接树莓派.     1.在树莓派上通过终端命令ifconfig 来查看当前树莓派的IP地址:     IP地址 ...

  2. CPrimer Plus第12章 存储类、链接和内存管理随笔

    被static修饰的属于内部链接,不可被外部程序文件所使用一般而言,全局变量(文件作用域变量)具有静态存储期,局部变量(代码块作用域变量)具有自动存储期寄存器变量不能使用地址运算符因为被static修 ...

  3. 如何修改Struts2 FiledError样式

    有时候,使用Struts2的<s:fielderror />标签还是比较好的.但是这个标签本来的样式实在很难看,不但换行,而且有个大大的黑点.一看就知道用了<ui><li ...

  4. jQuery停止事件冒泡

    event.stopPropagation(); 在jQuery中提供了stopPropagation()方法来停止事件冒泡.终止事件在传播过程的捕获.目标处理或起泡阶段进一步传播.调用该方法后,该节 ...

  5. Android客户端与服务器交互中的token

    学习Token Token是什么? Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Tok ...

  6. docker 容器管理常用命令

    Docker 容器管理: docker create -it centos //这样可以创建一个容器,但该容器并没有启动: create Create a new container 创建一个容器: ...

  7. SEO高手在扯蛋?

    真正的高手SEO你在扯蛋吗?当大家都很会扯的时候,高手扯得肯定比你疼,不是他们 蛋比较敏感,而是他们的确更用力. 当你说我是SEO时,高手肯定说现在我在做的是SEM. 当你说我是SEM时,高手肯定在说 ...

  8. VS2015 开发人员命令提示，如何实现记事本编程

    开始,选择VS2015 开发人员命令提示,打开 找到.c文件的位置,复制位置 在VS2015 开发人员命令提示, 输入cd 位置 回车 然后输入cl 文件名 回车 这样进行编译

  9. Android应用中使用百度地图API定位自己的位置（二）

    官方文档:http://developer.baidu.com/map/sdkandev-6.htm#.E7.AE.80.E4.BB.8B3 百度地图SDK为开发人员们提供了例如以下类型的地图覆盖物: ...

  10. ASP.NET MVC4 json序列化器

    ASP.NET MVC4中调用WEB API的四个方法 2012年06月07日00:05 it168网站原创 作者:廖煜嵘 编辑:景保玉 我要评论(0) [IT168技术]当今的软件开发中,设计软件的 ...