日期:2014-05-16  浏览次数:20471 次

javascript 原型函数 prototype 工作原理
Javascript 中的原型函数(prototype)的工作原理,在 javascript 中每次声明新函数的过程中,就会为其创建一个 prototype 的属性。在未加其他附带条件情况下,所有的 prototype 属性都会自动获取 constractor 属性,constructor 内包含一个指向 prototype 属性所属函数的指针(就是说 constructor 回指构造函数本身)。

举个例子来说,Fruit.prototype.constructor 指向 Fruit。并且可以通过这个构造函数,为其添加更多的属性和方法。

当调用构造函数创建一个新实例后,该实例内部包含一个指针指向构造函数的原型函数。此时我们不用去关心内部的这个指针到底是什么(这个指针还的确有个名字:__proto__ 估计是为了对应 prototype 而起的名字吧 ~\(≧▽≦)/~ ),只需记住它的指向即可(指向构造函数的原型函数)。需要注意的是,这个 __proto__ 只存在于函数实例与构造函数的原型函数之间,而非实例与构造函数之间。

下面画个图,来精心诠释一下。



如上图所示,Fruit_1, Fruit_2 与构造函数没有直接的联系,只是这两个实例的 __proto__ 属性指向了 Fruit.prototype。虽然这两个实例都不包含属性和方法,但却可以通过 fruit_1.showPrice() 来调用。其理论依据是通过查找对象属性的过程来实现的。

举个例子来说:

       function Fruit(){
       }
	
       Fruit.prototype.category = "apple";
       Fruit.prototype.price = 19.9;
       Fruit.prototype.showPrice = function(){
           alert(this.price); 
       }
	
       var fruit_1 = new Fruit();
       var fruit_2 = new Fruit();
       alert(fruit_1.constructor == fruit_2.constructor);  // 输出 true
       fruit_1.showPrice(); // 19.9


此时,Fruit()构造函数变成了一个空函数,但却可以通过调用 prototype 往构造函数内直接增加属性和方法。并且在此时,仍然可以调用构造函数来 new 新对象,并且新对象具有通过原型函数向构造函数直接增加的属性和方法(有点拗口啊,就是说,通过原型函数直接向构造函数增加属性和方法,增加的这些属性和方法,在通过构造函数 new 出来新实例中也具有)。

并且通过上面的例子可以看出,通过构造函数 new 出来的不同对象,具有与构造函数相同的属性和方法。并且这些都是共有的。

这一切的一切表明,在构造函数外部可以通过原型函数为其增加属性和方法,并且与在构造函数内部声明具有相同的效果。