js prototype

时间  2021-01-16 标签 js prototype javascript 对象

转两篇讲javascript prototype的文章

（http://firefly-zp.iteye.com/blog/1249816）

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() 来调用。其理论依据是通过查找对象属性的过程来实现的。 

举个例子来说： 

Javascript代码   收藏代码
  1. function Fruit(){  
  2. }  
  3.   
  4. Fruit.prototype.category = "apple";  
  5. Fruit.prototype.price = 19.9;  
  6. Fruit.prototype.showPrice = function(){  
  7.     alert(this.price);   
  8. }  
  9.   
  10. var fruit_1 = new Fruit();  
  11. var fruit_2 = new Fruit();  
  12. alert(fruit_1.constructor == fruit_2.constructor);  // 输出 true  
  13. fruit_1.showPrice(); // 19.9  


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

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

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

 

第二篇（）

-----------------------------------------------------------------

function User(name){
   this.name=name;
}
User.prototype.display = function(){
   alert("User's name is:"+this.name);
}
var me = new User("test");
me.display();

JavaScript能够实现的面向对象的特征有： 
·公有属性(public field) 
·公有方法(public Method) 
·私有属性(private field) 
·私有方法(private field) 
·方法重载(method overload) 
·构造函数(constructor) 
·事件(event) 
·单一继承(single inherit) 
·子类重写父类的属性或方法(override) 
·静态属性或方法(static member)


例子一(JavaScript中允许添加行为的类型)： 可以在类型上使用proptotype来为类型添加行为。这些行为只能在类型的实例上体现。 JS中允许的类型有Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String

Js代码
  1. <script type= "text/javascript" >   
  2. Object.prototype.Property = 1;   
  3. Object.prototype.Method =  function  ()   
  4. {   
  5.     alert(1);   
  6. }   
  7.     
  8. var  obj =  new  Object();   
  9. alert(obj.Property);   
  10. obj.Method();   
  11. </script>   
  12.           
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. Object.prototype.Property = 1;  
  3. Object.prototype.Method = function ()  
  4. {  
  5.     alert(1);  
  6. }  
  7.    
  8. var obj = new Object();  
  9. alert(obj.Property);  
  10. obj.Method();  
  11. </script></span>  

  例子二(prototype使用的限制)： 在实例上不能使用prototype，否则发生编译错误

Js代码
  1. <script type= "text/javascript" >   
  2. var  obj =  new  Object();   
  3. obj.prototype.Property = 1;  //Error   
  4. //Error   
  5. obj.prototype.Method =  function ()   
  6. {   
  7.     alert(1);   
  8. }   
  9. </script>   
  10.           
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. var obj = new Object();  
  3. obj.prototype.Property = 1; //Error  
  4. //Error  
  5. obj.prototype.Method = function()  
  6. {  
  7.     alert(1);  
  8. }  
  9. </script></span>  

  例子三(如何定义类型上的静态成员)： 可以为类型定义“静态”的属性和方法，直接在类型上调用即可

Js代码
  1. <script type= "text/javascript" >   
  2. Object.Property = 1;   
  3. Object.Method =  function ()   
  4. {   
  5.     alert(1);   
  6. }   
  7.     
  8. alert(Object.Property);   
  9. Object.Method();   
  10. </script>   
  11.           
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. Object.Property = 1;  
  3. Object.Method = function()  
  4. {  
  5.     alert(1);  
  6. }  
  7.    
  8. alert(Object.Property);  
  9. Object.Method();  
  10. </script></span>  

  例子五()： 这个例子演示了通常的在JavaScript中定义一个类型的方法

Js代码
  1. <script type= "text/javascript" >   
  2. function  Aclass()   
  3. {   
  4. this .Property = 1;   
  5. this .Method =  function ()   
  6. {   
  7.     alert(1);   
  8. }   
  9. }   
  10. var  obj =  new  Aclass();   
  11. alert(obj.Property);   
  12. obj.Method();   
  13. </script>  
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. function Aclass()  
  3. {  
  4. this.Property = 1;  
  5. this.Method = function()  
  6. {  
  7.     alert(1);  
  8. }  
  9. }  
  10. var obj = new Aclass();  
  11. alert(obj.Property);  
  12. obj.Method();  
  13. </script></span>  

  例子六(JavaScript中允许添加行为的类型)： 可以在外部使用prototype为自定义的类型添加属性和方法。

Js代码
  1. <script type= "text/javascript" >   
  2. function  Aclass()   
  3. {   
  4. this .Property = 1;   
  5. this .Method =  function ()   
  6. {   
  7.     alert(1);   
  8. }   
  9. }   
  10. Aclass.prototype.Property2 = 2;   
  11. Aclass.prototype.Method2 =  function   
  12. {   
  13.     alert(2);   
  14. }   
  15. var  obj =  new  Aclass();   
  16. alert(obj.Property2);   
  17. obj.Method2();   
  18. </script>   
  19.       
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. function Aclass()  
  3. {  
  4. this.Property = 1;  
  5. this.Method = function()  
  6. {  
  7.     alert(1);  
  8. }  
  9. }  
  10. Aclass.prototype.Property2 = 2;  
  11. Aclass.prototype.Method2 = function  
  12. {  
  13.     alert(2);  
  14. }  
  15. var obj = new Aclass();  
  16. alert(obj.Property2);  
  17. obj.Method2();  
  18. </script></span>  

  例子八()： 可以在对象上改变属性。（这个是肯定的）也可以在对象上改变方法。（和普遍的面向对象的概念不同）

Js代码
  1. <script type= "text/javascript" >   
  2. function  Aclass()   
  3. {   
  4. this .Property = 1;   
  5. this .Method =  function ()   
  6. {   
  7.     alert(1);   
  8. }   
  9. }   
  10. var  obj =  new  Aclass();   
  11. obj.Property = 2;   
  12. obj.Method =  function ()   
  13. {   
  14.     alert(2);   
  15. }   
  16. alert(obj.Property);   
  17. obj.Method();   
  18. </script>  
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. function Aclass()  
  3. {  
  4. this.Property = 1;  
  5. this.Method = function()  
  6. {  
  7.     alert(1);  
  8. }  
  9. }  
  10. var obj = new Aclass();  
  11. obj.Property = 2;  
  12. obj.Method = function()  
  13. {  
  14.     alert(2);  
  15. }  
  16. alert(obj.Property);  
  17. obj.Method();  
  18. </script></span>  

  例子九()： 可以在对象上增加属性或方法

Js代码
  1. <script type= "text/javascript" >   
  2. function  Aclass()   
  3. {   
  4. this .Property = 1;   
  5. this .Method =  function ()   
  6. {   
  7.     alert(1);   
  8. }   
  9. }   
  10. var  obj =  new  Aclass();   
  11. obj.Property = 2;   
  12. obj.Method =  function ()   
  13. {   
  14.     alert(2);   
  15. }   
  16. alert(obj.Property);   
  17. obj.Method();   
  18. </script>   
  19.           
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. function Aclass()  
  3. {  
  4. this.Property = 1;  
  5. this.Method = function()  
  6. {  
  7.     alert(1);  
  8. }  
  9. }  
  10. var obj = new Aclass();  
  11. obj.Property = 2;  
  12. obj.Method = function()  
  13. {  
  14.     alert(2);  
  15. }  
  16. alert(obj.Property);  
  17. obj.Method();  
  18. </script></span>  

  例子十(如何让一个类型继承于另一个类型)： 这个例子说明了一个类型如何从另一个类型继承。

Js代码
  1. <script type= "text/javascript" >   
  2. function  AClass()   
  3. {   
  4.         this .Property = 1;   
  5.         this .Method =  function ()   
  6.        {   
  7.               alert(1);   
  8.        }   
  9. }   
  10.     
  11. function  AClass2()   
  12. {   
  13.         this .Property2 = 2;   
  14.         this .Method2 =  function ()   
  15.        {   
  16.               alert(2);   
  17.        }   
  18. }   
  19. AClass2.prototype =  new  AClass();   
  20.     
  21. var  obj =  new  AClass2();   
  22. alert(obj.Property);   
  23. obj.Method();   
  24. alert(obj.Property2);   
  25. obj.Method2();   
  26. </script>   
  27.           
Js代码   收藏代码
  1. <span style="font-size: 18px;"><script type="text/javascript">  
  2. function AClass()  
  3. {  
  4.        this.Property = 1;  
  5.        this.Method = function()  
  6.        {  
  7.               alert(1);  
  8.        }  
  9. }  
  10.    
  11. function AClass2()  
  12. {  
  13.        this.Property2 = 2;  
  14.        this.Method2 = function()  
  15.        {  
  16.               alert(2);  
  17.        }  
  18. }  
  19. AClass2.prototype = new AClass();  
  20.    
  21. var obj = new AClass2();  
  22. alert(obj.Property);  
  23. obj.Method();  
  24. alert(obj.Property2);  
  25. obj.Method2();  
  26. </script></span>  

  例子十一(如何在子类中重新定义父类的成员)： 这个例子说明了子类如何重写父类的属性或方法。

Js代码
  1. <script type= "text/javascript" >   
  2. function  AClass()   
  3. {   
  4.         this .Property = 1;   
  5.         this .Method =  function ()   
  6.        {   
  7.               alert(1);   
  8.        }   
  9. }   
  10.     
  11. function  AClass2()   
  12. {   
  13.         this .Property2 = 2;   
  14.         this .Method2 =  function ()   
  15.        {   
  16.               alert(2);   
  17.        }   
  18. }   
  19. AClass2.prototype =  new  AClass();   
  20. AClass2.prototype.Property = 3;   
  21. AClass2.prototype.Method =  function ()   
  22. {   
  23.        alert(4);   
  24. }   
  25. var  obj =  new  AClass2();   
  26. alert(obj.Property);   
  27. obj.Method();   
  28. </script>
联系我们 沪ICP备2021010478号-7