Web程序员应该知道的Javascript prototype原理里,说到了prototype chain. 但是有一点要特别注明一下, 那就是prototype chain只在对对象的方法和属性调用和读取时有效, 遵循沿着prototype查找方法和属性的规律; 但是在对对象属性进行赋值时, 并不遵循这一规律.

在对Javascript对象的属性进行赋值时, 原则是这样的:
1. 如果该对象本身有这个属性, 则对该属性赋值
2. 如果该对象本身没有这个属性, 则在该对象上新建一个该属性, 并进行赋值. (这时不会通过__proto__属性, 找该对象的prototype, 检查prototype上有没有该属性, 然后在prototype的属性上赋值.)

举个简单的例子:

var Car = function(){
  this.color = "red";
}
var Jeep = function(){};
Jeep.prototype = new Car();

var myCar= new Jeep();
console.log(myCar.color);
console.log(myCar); 
//这时myCar对象本身上并没有color属性, 
//访问myCar.color得到的结果是"red",
//因为这时prototype chain起作用了.

myCar.color = "green";
console.log(myCar.color);
console.log(myCar);
//这时myCar对象上新建了一个color属性, 值是"green".
//但是它并没有覆盖掉myCar的__proto__上的color的属性.
//这时候如果读取myCar.color, 按prototype chain的搜索顺序,
//首先找到的是myCar对象自身上的属性color, 值是"green".

看console里打出了的对象应该比较清楚.
assign value with prototype chain

用对象的数组写法可能更容易理解些.

var Car = function() {
  this["color"] = "red";
}
var Jeep = function() {};
Jeep.prototype = new Car();

var myCar= new Jeep();
console.log(myCar); 

myCar["color"] = "green";
console.log(myCar);

相关文章

    共享到: