深入理解JavaScript系列(10):JavaScript核心(晋级高手必读篇)
原型链

1 //prototype-chain 原型链--共用--继承 2 var a = { 3 x : 15, 4 caculate : function(z){ 5 return this.x + this.y + z; 6 } 7 }; 8 9 var b = { 10 y : 5 , 11 z : 20 , 12 __proto__ : a 13}; 14 15 var c = { 16 y : 5 , 17 z : 20 , 18 __proto__ : a 19 }; 20 21 //调用继承过来的方法 22 a.caculate(22);
说明:this这个值在一个继承机制中,仍然是指向它原本属于的对象,而不是从原型链上找到它时,它所属于的对象。例如,以上的例子,this.y是从b和c中获取的,而不是a。当然,你也发现了this.x是从a取的,因为是通过原型链机制找到的。

原型链通常将会在这样的情况下使用:对象拥有 相同或相似的状态结构(same or similar state structure) (即相同的属性集合)与 不同的状态值(different state values)。在这种情况下,我们可以使用 构造函数(Constructor) 在 特定模式(specified pattern) 下创建对象。

1 // 构造函数 2 function Foo(y) { 3 // 构造函数将会以特定模式创建对象:被创建的对象都会有"y"属性 4 this.y = y; 5 } 6 7 // "Foo.prototype"存放了新建对象的原型引用 8 // 所以我们可以将之用于定义继承和共享属性或方法 9 // 所以,和上例一样,我们有了如下代码: 10 11 // 继承属性"x" 12 Foo.prototype.x = 10; 13 14 // 继承方法"calculate" 15 Foo.prototype.calculate = function (z) { 16 return this.x + this.y + z; 17 }; 18 19 // 使用foo模式创建 "b" and "c" 20 var b = new Foo(20); 21 var c = new Foo(30); 22 23 // 调用继承的方法 24 b.calculate(30); // 60 25 c.calculate(40); // 80 26 27 // 让我们看看是否使用了预期的属性 28 29 console.log( 30 31 b.__proto__ === Foo.prototype, // true 32 c.__proto__ === Foo.prototype, // true 33 34 // "Foo.prototype"自动创建了一个特殊的属性"constructor" 35 // 指向a的构造函数本身 36 // 实例"b"和"c"可以通过授权找到它并用以检测自己的构造函数 37 38 b.constructor === Foo, // true 39 c.constructor === Foo, // true 40 Foo.prototype.constructor === Foo // true 41 42 b.calculate === b.__proto__.calculate, // true 43 b.__proto__.calculate === Foo.prototype.calculate // true 44 45 );

文章源自Tom大叔博客JavaScript核心篇 http://www.cnblogs.com/TomXu/archive/2012/01/12/2308594.html

浙公网安备 33010602011771号