从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. 四条命令搞定mysql主从

    一 . 环境准备 先上拓扑图

  2. [原创]NT系统信息察看工具 : NtInfoGuy

    原文链接:[原创]NT系统信息察看工具 : NtInfoGuy 对于windows的内部,我们有太多的东西需要了解,认知.我们非凡的.从不知足的探求本性驱使我们要 拨开迷雾得见青天.太多的木马,病毒, ...

  3. Mono For Android 实现索引分段器效果

    这两天看了个Demo,自己也动手写了下,觉得效果还不错,分享一下! 主要是利用ListActivity中自带了一个ListView和ListAdapter来实现的,当然也可以在一般的Activity中 ...

  4. Fsu0413's Qt builds

    http://fsu0413.github.io/QtCompile/#!index.md

  5. test for randomness

  6. C语言对象化编程

    以下为一个引子: C中struct的函数实现,只能用函数指针成员. C结构体内不能有函数的代码,但可以有函数的指针. C/C code Code highlighting produced by Ac ...

  7. Struts2 二、为Action的参数注入值

    为Action参数注入值,主要使用在的场景为,Action的一个参数的值不是固定的是可以改变的,所以不能直接写在Action中,可以通过Struts配置的方式将值配置到Struts中,然后通过注入的方 ...

  8. php操作路径的经典方法

    function create_folders($dir){    return is_dir($dir) or ( create_folders( dirname( $dir ) ) and mkd ...

  9. Triangle LOVE(拓扑排序)

    Triangle LOVE Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/65536K (Java/Other) Total ...

  10. [Oracle] - 性能优化工具（3） - ADDM

    ADDM 通过检查和分析AWR获取的数据来推断Oracle数据库中可能的问题.并给出优化建议. 获取ADDM的方法例如以下: @?/rdbms/admin/addmrpt.sql 以下能够看一个样例: ...