JavaScript类和继承:prototype属性

转自 http://developer.51cto.com/art/200907/134911.htm

  • 本文介绍了JavaScript里面的prototype属性。这个属性是理解JavaScript类和继承的重要基础。

我们已经在第一章中使用prototype属性模拟类和继承的实现。 prototype属性本质上还是一个JavaScript对象。 并且每个函数都有一个默认的prototype属性。
如果这个函数被用在创建自定义对象的场景中,我们称这个函数为构造函数。 比如下面一个简单的场景:

 
 
  1. // 构造函数  

  2. function Person(name) {  

  3.      this .name = name;  

  4. }  

  5. // 定义Person的原型,原型中的属性可以被自定义对象引用  

  6. Person.prototype = {  

  7.     getName: function() {  

  8.          return   this .name;  

  9.     }  

  10. }  

  11. var zhang =  new  Person( "ZhangSan" );  

  12. console.log(zhang.getName());    // "ZhangSan"  

作为类比,我们考虑下JavaScript中的数据类型 - 字符串(String)、数字(Number)、数组(Array)、对象(Object)、日期(Date)等。 我们有理由相信,在JavaScript内部这些类型都是作为构造函数来实现的,比如:

 
 
  1. // 定义数组的构造函数,作为JavaScript的一种预定义类型  

  2. function Array() {  

  3.      // ...  

  4. }  

  5.  

  6. // 初始化数组的实例  

  7. var arr1 =  new  Array( 1 56 34 12 );  

  8. // 但是,我们更倾向于如下的语法定义:  

  9. var arr2 = [ 1 56 34 12 ]; 

同时对数组操作的很多方法(比如concat、join、push)应该也是在prototype属性中定义的。
实际上,JavaScript所有的固有数据类型都具有只读的prototype属性(这是可以理解的:因为如果修改了这些类型的prototype属性,则哪些预定义的方法就消失了), 但是我们可以向其中添加自己的扩展方法。

 
 
  1. // 向JavaScript固有类型Array扩展一个获取最小值的方法  

  2. Array.prototype.min = function() {  

  3.     var min =  this [ 0 ];  

  4.      for  (var i =  1 ; i <   this .length; i++) {  

  5.          if  ( this [i] <  min) {  

  6.             min =  this [i];  

  7.         }  

  8.     }  

  9.      return  min;  

  10. };  

  11.  

  12. // 在任意Array的实例上调用min方法  

  13. console.log([ 1 56 34 12 ].min());   // 1  

注意:这里有一个陷阱,向Array的原型中添加扩展方法后,当使用for-in循环数组时,这个扩展方法也会被循环出来。
下面的代码说明这一点(假设已经向Array的原型中扩展了min方法):

 
 
  1. var arr = [ 1 56 34 12 ];  

  2. var total =  0 ;  

  3. for  (var i in arr) {  

  4.     total += parseInt(arr[i],  10 );  

  5. }  

  6. console.log(total);    // NaN  

解决方法也很简单:

 
 
  1. var arr = [ 1 56 34 12 ];  

  2. var total =  0 ;  

  3. for  (var i in arr) {  

  4.      if  (arr.hasOwnProperty(i)) {  

  5.         total += parseInt(arr[i],  10 );  

  6.     }  

  7. }  

  8. console.log(total);    // 103

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值