Top

深入理解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

posted @ 2016-08-24 21:30  Avenstar  阅读(220)  评论(0)    收藏  举报