从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. PHP框架学习之Laravel基本功能

    Laravel5的功能不是一般的多(路由,中间件,blade模版...),单是一个路由功能就让哥很蛋疼,虽说路由使用起来变得很灵活,但真他妹的有点变态了.这里是我照着Laravel5官方文档研究的成果 ...

  2. Example: Develop Web application on Baidu App Engine using CherryPy

    In the past few months, I have developed two simple applications on Baidu App Engine. Compared to Go ...

  3. Java 中类与类之间的关系

    在java中类和类之间的关系基本上有依赖.关联.聚合.组合等 一.继承关系     继承指的是一个类(称为子类.子接口)继承另外的一个类(称为父类.父接口)的功能,并可以增加它自己的新功能的能力.在J ...

  4. click through rate prediction

    包括内容如下图: 使用直接估计法,置信区间置信率的估计: 1.使用二项分布直接估计 $p(0.04<\hat{p}<0.06) = \sum_{0.04n\leq k \leq 0.06n ...

  5. 全国计算机等级考试二级教程-C语言程序设计_第15章_位运算

    位运算,不适用于实数,仅仅适用于整数.字符. C语言的位运算只能操作整数.字符,实数是指数方式表示的,不适用于位运算. #define _CRT_SECURE_NO_WARNINGS #include ...

  6. 测试中的代码分享~将可以合并的方法去合并Func不赖

    在面向对象的设计中,我们经常会谈到“重构”,而重构之中有个叫合并方法的,就是将多个方法干的事类似,或者说,方法体的长向很像,那么,我们需要去考虑,将它们进行抽象! 原来的代码: /// <sum ...

  7. Cocos2d-x官方在线视频-Cocos2d-x3.2《2048》手游开发揭秘

    Cocoachina 官方在线视频 http://cn.cocos2d-x.org/tutorial/lists?id=58 一.游戏介绍 2048游戏是一款风靡全球的休闲类游戏,通过控制4X4范围内 ...

  8. 两种Makefile

    .PHONY:clean CC=g++ CFLAGS=-Wall -g BIN=test_queue OBJS=Queue.o test_main.o $(BIN):$(OBJS) $(CC) $(C ...

  9. iOS 混合网页开发 问题

    在利用JavaScriptCore与H5交互时出现异常提示: This application is modifying the autolayout engine from a background ...

  10. Block使用要点

    Block简介 Block其实包含两个部分内容 Block执行的代码,这是在编译的时候已经生成好的: 一个包含Block执行时需要的所有外部变量值的数据结构. Block将使用到的.作用域附近到的变量 ...