JavaScript 原型与继承说明

325 阅读 0 评论 215 点赞

我是靠谱客的博主鳗鱼小蝴蝶，最近开发中收集的这篇文章主要介绍JavaScript 原型与继承说明，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

function A(x) 
{ 
this.x = x; 
} 
alert(A.prototype); 
alert(A.prototype.constructor);

根据弹出的结果，我们可以得到：原型对象是由函数的构造函数创建，它所拥有的属性能被所有对象共享，初始时原型对象指向一个Object对象，并且定义了一个constructor属性，该属性指向定义该原型对象的构造函数本身，再看如下代码。

Code

function A(x) 
{ 
A.prototype.x = x; 
} 
var obj = new A(10); 
alert(obj.x); 
alert(obj.constructor);

因为原型对象的所有属性能被构造函数创建对象共享，所以创建的对象可以访问这里的constructor属性，同时obj对应的就是原型对象（prototype）所创建出来的一个实例，那么重写constructor属性会出现什么样的结果呢？

Code

function A(x) 
{ 
A.prototype.x = x; 
} 

var objA = new A(10); 
objA.constructor = function(x){ alert("重写obj的constructor属性");this.x = 20 }; 
objA.constructor(); 
alert(objA.x); 

var objB = new A(10); 
alert(objB.x);

根据结果我们可以看到，首先弹出的是“重写obj的constructor属性”，然后弹出20，在弹出10，可见，我们在书写重写objA这个对象的constructor之后，objB并没有被改变，因此无论在一个对象加入或修改多少属性这都不影响其原型对象中属性的本来面目，其实很容易理解js为什么这样做，因为一个对象的行为不能影响到其他对象,否则将会造成混乱。

在这里，我们可以总结一下，上面代码的规则：

1.当我们调用某个对象的时候，首先检查该对象本身的自己定义的属性，如果存在则调用。

2.当自己本身的属性不存在的时候，则调用其构造函数所定义的原型对象的引用。

那么根据这个规则，就形成了JavaScript中的一个原型链，我们就可以根据这个规则来定义继承关系。

function A(x) 
{ 
A.prototype.x = x; 
} 

function B(x,y) 
{ 
B.prototype.y = y; 
A.call(this,x); 
}

这段代码显示了两个函数，B函数继承与A函数，A.call(this.x)表示，将B的对象this传递到A函数中进行执行。然后，我们同样需要由B函数构造出来的对象需要包含A函数的所有特性，因此需要加上这么一句话。

复制代码代码如下:

 
B.prototype = new A(); 

alert(B.prototype.constructor);

先我们指定B的原型为A，因此，B函数继承了A函数的特性，根据弹出的结果，我们可以看到，其constructor指向的是A函数，那么我们的B函数的特性是不是丢失了呢？因此，我们需要在加上一句话，最后给出继续的整合代码。

function A(x) 
{ 
A.prototype.x = x; 
A.prototype.ShowA = function(){ alert("A的Show方法!"); }; 
} 

function B(x,y) 
{ 
B.prototype.y = y; 
A.call(this,x); 
B.prototype.ShowB = function(){ alert("B的Show方法!"); }; 
} 

B.prototype = new A(); 
B.prototype.constructor = B; 

var obj = new B(10,5); 
alert(obj.x); 
alert(obj.y); 
obj.ShowA(); 
obj.ShowB();

若有疑问或不正之处，欢迎提出指正和讨论。