javascript原型对象与原型链

发表于 | 分类于 |

原型对象

每个javascript对象都有一个原型对象，这个对象在不同的解释器下的实现不同。比如在firefox下,每个对象都有一个隐藏的proto属性,这个属性就是原型对象的引用。原型的值可以是一个对象或者null。

原型链

由于原型对象本身也是对象，根据上边的定义，它也有自己的原型，而它自己的原型对象又可以有自己的原型，这样就组成了一条链，这个链就是原型链。
JavaScritp引擎在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值，如果整个链都遍历且没有找到属性，则返回undefined，原型链一般实现为一个链表，这样就可以按照一定的顺序来查找。

例子1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var base = {
	name:"base",
	getInfo:function(){
		return this.name;
	}
}
var ext1 = {
	id:0,
	__proto__:base
}
var ext2 = {
	id:9,
	__proto__:base
}
console.log(ext1.id+" "+ext2.id+" "+ext1.getInfo()+" "+ext2.getInfo());

最后结果会是：0 9 base base,在访问每个对象的属性时，都是先在对象本身找，如果没找到，则去原型链中查找，下面的图片可以显示这一点。

example1

例子2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var base = {
	name:"base",
	getInfo:function(){
		return this.name+"*"+this.id;
	}
}
var ext1 = {
	id:0,
	name:"ext1",
	__proto__:base
}
var ext2 = {
	id:9,
	__proto__:base
}
console.log(ext1.name+" "+ext2.name+" "+ext1.getInfo()+" "+ext2.getInfo());

结果是：ext1 base ext10 base9，这里为什么ext1.getInfo()不会有base出现，就是因为name属性在ext2对象中不存在，因此,从对象本身出发，沿着proto查找，直到在base中找到属性名称相同的值（name）。而ext1对象中本身就有name了，所以不会沿着原型链继续查找了。
应该注意的是，getInfo函数中的this表示原始的对象，而并非原型对象（this上下文）。如果对象没有显式的声明自己的”proto”属性，这个值默认的设置为Object.prototype,而Object.prototype的”proto”属性的值为”null”，标志着原型链的终结，即该对象没有原型。

构造器

除了上边提到的直接操作对象的proto属性的指向以外，JavaScript还支持构造器形式的对象创建。构造器会自动的为新创建的对象设置原型对象，此时的原型对象通过构造器的prototype属性来引用。

例子3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Task(id){
	this.id = id;
}
Task.prototype.status = "STOPPED";
Task.prototype.execute = function(args){
	return "execute task_"+this.id+"["+this.status+"]:"+args; 
};

var task1 = new Task(1);
var task2 = new Task(2);

task1.status = "ACTIVE";
task2.status = "STARTING";

console.log(task1.execute('task1')+" * "+task2.execute('task2'));

这里不像上面的例子在对象上直接操作proto属性的指向，而是通过构造器（属性prototype）的形式来操作。这就是构造器方法也是最经常用的一种方法。
最后的结果是：execute task_1[ACTIVE]:task1 * execute task_2[STARTING]:task2
构造器会自动为task1,task2两个对象设置原型对象Task.prototype，这个对象被Task(在此最为构造器)的prototype属性引用，参看下图中的箭头指向。

example3

由于Task本身仍旧是函数，因此其”proto”属性为Function.prototype, 而内建的函数原型对象的”proto”属性则为Object.prototype对象。最后Obejct.prototype的”proto”值为null.

感谢这么棒的文章：核心概念深入