现在的位置: 首页 > javascript > 正文
理解原型
2013年09月12日 javascript ⁄ 共 1866字 暂无评论 ⁄ 被围观 5,927 views+

在js中,只要我们创建一个函数,系统就会自动为我们创建一个prototype属性,这个属性就指向函数的原型对象,在默认的情况下,自动的生成的原形对象都会有一个constructor的属性,这个属性指向prototype属性所在函数的指针。看下面代码:

  1. <script type="text/javascript">   
  2.     function Student()   
  3.     {   
  4.         alert(2);   
  5.     }   
  6.   
  7.     alert(Student.prototype.constructor === Student);//true   
  8.     Student.prototype.constructor();//2   
  9. </script>  

上面的代码很简单。constructor是个默认属性,我们也可以扩展自定义属性和方法,这些扩展的属性和方法体现在每个实例对象上。看下面的代码:

  1. <script type="text/javascript">   
  2.     function Student()   
  3.     {   
  4.   
  5.     }   
  6.     //扩展原型   
  7.     Student.prototype.name = "张三";   
  8.     Student.prototype.score = 80;   
  9.     Student.prototype.sayName = function ()   
  10.     {   
  11.         alert('我的名字是:'+this.name);   
  12.     }   
  13.     //创建两个新实例对象   
  14.     var student1 = new Student();   
  15.     var student2 = new Student();   
  16.   
  17.     student1.sayName();//我的名字是:张三   
  18.     student2.sayName();//我的名字是:张三   
  19.   
  20.     //当我们改变构造函数的原型属性时,也会体现在每个实例上   
  21.     Student.prototype.name = "李四";   
  22.     student1.sayName();//我的名字是:李四   
  23.     student2.sayName();//我的名字是:李四   
  24. </script>  

上面的每个实例可以调用构造函数的原型对象的方法和属性是因为,在我们调用自定义的构造函数生成实例对象时,该实例的内部包含一个指针,指向构造函数的原型对象,在ECMA-262第5版中管这个指针叫[[Prototye]],这个属性是个内部属性,不可以访问。因为有[[Prototye]]属性,所以每个实例都可以访问其构造函数的原型里面的方法和属性。这属性连接了实例和构造函数的原型对象。下面的图片展示了实例和构造函数、构造函数原型之间的关系。
原型1
虽然[[Prototye]]是内部属性,为了能更好的了解内部原理Firefox、Safari和Chrome在每个实例对象上都支持一个属性__proto__,这个属性可以访问到构造函数的原型对象。看如下代码:

  1. <script type="text/javascript">   
  2.     function Student()   
  3.     {   
  4.   
  5.     }   
  6.     //扩展原型   
  7.     Student.prototype.name = "张三";   
  8.     Student.prototype.score = 80;   
  9.     Student.prototype.sayName = function ()   
  10.     {   
  11.         alert('我的名字是:' + this.name);   
  12.     }   
  13.     //创建两个新实例对象   
  14.     var student1 = new Student();   
  15.     var student2 = new Student();   
  16.            
  17.     alert(student1.__proto__.name);//"张三"   
  18.     alert(student1.__proto__ === Student.prototype);//true   
  19.     alert(student2.__proto__===Student.prototype);//true   
  20. </script>  

通过原型的这一特性我们可以了解到。 当所有的实例需要共享方法和属性时,可以把这些属性和方法添加在其构造函数的原型上。

给我留言

留言无头像?


×