javascript中的继承方法

最新推荐文章于 2013-11-29 15:49:32 发布

lantianjialiang

最新推荐文章于 2013-11-29 15:49:32 发布

阅读量817

点赞数

分类专栏： JS

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/lantianjialiang/article/details/10510801

版权

JS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

从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中现在还不支持继承，只能能下一个版本。

lantianjialiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript中的继承方法

从Javascript面向对象编程（二）：构造函数的继承这里，可以看到详细的说明。我只是将其中的例子做成html文件，便于调试罢了。1. 构造函数绑定function Animal(){ this.species = "动物";}Animal.prototype.species2 = "动物2"function Cat(name,color){ Animal.app
复制链接

扫一扫

专栏目录