JavaScript原型链

  声明，文章中用到的专业名词可能并不标准。请同学指正。

  JavaScript原型链方面的文章很多，随便百度一下可以找到许多版本，但是我找到的版本未能给我一种拨云见日的爽快感，也许有些同学也有我一样的困扰。把我的理解整理出来，希望对有困惑的同学有所帮助。

  首先我们明确一个概念“原型”，由于JavaScript中没有类的概念，面向对象的继承特性是采用原型这种方式来实现的，每个函数都有一个属性prototype，这个属性就指向函数的原型，你甚至可以直接理解为，prototype就是指向函数的父对象。但是prototype并没有把对象链接起来，它只把函数与对象链接起来了。在firefox中对象和函数都有一个私有属性“__proto__”，它才是真正的作为实例在原型链上查找属性与方法的一个类似指针的属性。可以这么说，prototype是函数所有的，而__proto__是实例化的对象存在的属性。通过"__proto__"属性可以组成一个完整的原型链。
 
  废话不多说，翠花上代码。
1、定义一个函数A

/**
 * 构造函数 A
 */
function A(){
	//成员变量
	this.val = 1;
	//成员函数
	this.getVal = function(){
		return this.val;
	};
}

我们定义的函数A也就是一个构造函数，通过this关键字为函数A申明了一个成员变量和一个成员函数。
2、定义一个函数B继承A

/**
 * 构造函数 B
 */
function B(){
	//成员变量
	this.valb = 2;
	//成员函数
	this.getValb = function(){
		return this.valb;
	};
}

//通过B的原型继承A的对象
B.prototype = new A();

3、通过下列代码看看构造函数的一些奇妙关系

//通过b的原型继承a对象
B.prototype = new A();

//构造函数链
if( A.__proto__ === Function.prototype){
	alert("A.__proto__等于 Funciton.Prototype");
}
if( B.__proto__ === Function.prototype){
	alert("B.__proto__等于 Funciton.Prototype");
}
if( Object.__proto__ === Function.prototype){
	alert("Object.__proto__等于 Funciton.Prototype");
}
if( Function.__proto__ === Function.prototype){
	alert("Function.__proto__等于 Funciton.Prototype");
}
//显然这是一种统一。是有规律可循的。

4、通过下列代码验证对象之间的关系

//原型链 这里我把它称为对象链
var b = new B();
var a = new A();
if(b.__proto__ === B.prototype){
	alert("b.__proto__ 等于 B.prototype");
}
if(b.__proto__.__proto__ === A.prototype && B.prototype.__proto__ === A.prototype){
	alert("B.prototype.__proto__ 等于 A.prototype");
}
if(b.__proto__.__proto__.__proto__ === Object.prototype && A.prototype.__proto__ === Object.prototype){
	alert("A.prototype.__proto__ 等于 Object.prototype");
}
if(!Object.prototype.__proto__){
	alert("Object.prototype.__proto__ 等于 undefined");
}

if(Function.prototype.__proto__ === Object.prototype){
	alert("Function.prototype.__proto__ 等于 Object.prototype");
}
//同样是有规律可循的，最终都将指向Object.prototype

有人会有疑问，上面的链中不都是对象啊，也有构造函数，比如A,B都出现了。不对，链中比较的是A,B的prototype属性，而这个属性指向的是一个对象，所以说这是一个对象链。
经过整理，可以得到下面这张图，通过这张图可以更好的理解俩条不同的链的规则。

评论

2 楼 zhangfan1990 2014-04-02  

楼主的文章有启发啊

1 楼 s2640226szm 2011-10-14  

写的不错，理解了原型链