Prototype

   prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法,而且特殊的地方便在于:它是一个给类的对象添加方法的方法!
    在Javascript中,一切都是对象,字符串是对象,数组是对象,变量是对象,函数也是对象,所以才会允许['a','b','c'].push
('d');这样的操作存在。类本身也是一个对象,也可以定义属性和方法: 

   function Test(){}; 
    Test.str = 'str'; 
    Test.fun = function(){return 'fun';}; 
    var r1 = Test.str;    // str 
    var r2 = Test.fun();  // fun 
    var inst = new Test(); 
    var r3 = inst.str;    // undefined 
    var r4 = inst.fun();  // undefined


    prototype就是一个作用于类的属性。默认情况下,所有Javascript类都会有一个prototype属性,但是类实例没有。

   function Test(){}; 
    var p1 = typeof(String.prototype);     // object 
    var p2 = typeof(Test.prototype);       // object 
    var p3 = typeof(new Test().prototype); // undefined 
    var p4 = typeof(Object.prototype);     // object 
    var p5 = typeof(new Object().prototype); // undefined

 

    在Javascript中,当我们取一个对象中并不存在的属性或是方法时,它会试图查看该对象所对应的类中的prototype属性中是否包含该属性或是方法,而prototype也是一个Javascript对象,若是其中也没有,该prototype又会访问它对应的类的prototype,如此一级级地向上访问,直到找到需要的属性或方法,或是prototype属性为null。

   function Test(){}; 
    Test.test = 'str';
 
    function pt1()
 
    { this.test1 = 'pt1';  };
  
    function pt2()
 
    { this.test2 = 'pt2';  };
 
    pt2.prototype.test3 = 'test3';
 
    pt2.prototype.test1 = 'test4';
 
    pt1.prototype = new pt2();
 
    Test.prototype = new pt1();
 
    var inst = new Test();
 
    var p1 = inst.test;   // undefined
 
    var p2 = inst.test1;  // pt1 而不是 test4
 
    var p3 = inst.test2;  // pt2
 
    var p4 = inst.test3;  // test3

 

    相对于取值,赋值就简单得多了。它并不会一层层向上查找prototype中的属性值,而直接对当前的实例进行赋值,没有则创建。

    在Javascript中并不能直接修改内置类prototype。但是可以通过修改prototype的属性达到修改内置类行为的目的。

   Array.prototype = {push:function(){alert('test1');}}; // 不起作用 
    Array.prototype.push = function(){alert('test2');};  // 可以
 
    var test = new Array('a','b','c');
 
    test.push('d');  // test2

一次可以插入多个元素的Array.push函数:

   Array.prototype.pushs = function() 
   { 
 
      var pos = this.length;
 
      for(var i=0; i<arguments.length; i++)
 
      {
 

        this [++ pos ] = arguments [ i ];  
      }
 
      return this.length;
 
   }
 
   var test = new Array('a','b','c');
 
   test.pushs('d','e');

 

   值得注意的是,为内置类的prototype添加的函数,在使用for语句输出属性时,也会被显示: 

  var str; 
   for(var i in test)
 
  {
 
     str += ('  ' + i); // '0   1  2  3  4  5  pushs' pushs自定义函数。
 
   }

  但是可以通过hasOwnProperty()进行判断:

  var str; 
  for(var i in test)
 
  {
 
     if(test.hasOwnProperty(i))  // 过滤掉pushs函数。
 
     {   str += ('  ' + i);  }
 
   }

 

    注意事项:前面说过,prototype是类的一个属性。更改prototype中的属性值,有可能会带来意想不到的灾难!

   function Test(){} 
    Test.prototype.num = 3;
  
    var inst1 = new Test();
 
    var inst2 = new Test();
 
    Test.prototype.num = 4;  // 所有指向Test.prototype.num的值。
 
    var p1 = inst1.num;   // 4
 
    var p2 = inst2.num;   // 4
 
    inst1.num = 5;  // 赋值,会为inst对象创建一个num属性。
 
    Test.prototype.num = 6;  // 所有指向Test.prototype.num的值。
 
    var p3 = inst1.num;   // 5 这里返回的是刚创建的inst1.num的值,而不是      

    Test.prototype.num的值。 
    var p4 = inst2.num;   // 6
 
   
delete Test.prototype.num; 
    var p5 = inst1.num;  // 5 inst1.num依然存在。
 
    var p6 = inst2.num;  // undefined Test.prototype.num 被删除了。


    JavaScript没有提供传统的类结构,使你可以通过继承它,然后加入新功能来扩展一个类。相反,这门语言使用prototype属性来扩展现有对象,以及它们的示例。

    prototype是在运行期定义的一个属性和方法的集合,它对对象的每个示例都是有效的,而且不管这些示例是在prototype修改前,还是修改后建立的。

    prototype在JavaScript中的工作原理是:当访问对象的属性时,浏览器的脚本引擎首先会从本地属性(native propertie)中查找这个属性,接着会在prototype属性中进行查找。如果在prototype属性中没有找到,它就会检查示例级的属性。

    在如下的代码中,我们使用prototype属性,来扩展Number对象,在这里,我们添加了一个新的属性percentage,以及一个新的方法adjustValue:

    Number.prototype.percentage = 0.15; // 15%
     Number.prototype.adjustValue = function()

    {
          return this * this.percentage;
     }

 

    我们可以像访问本地属性一样访问新属性:

    var someValue = 3.0;

    alert(someValue.adjustValue());

    这个应用程序会显示一个消息,这个消息会把调整后的值显示出来,也就是将初始值3.0乘以0.15。

    Prototype库利用prototype的能力,为某些内置对象添加扩展,例如:String、Array、Function。下面就是一个对stripTags方法进行扩展的示例,它可以剔除字符串中所有元素的标签。

    var str = "<p>This is a paragraph</p>";

    var newStr = str.stripTags(); // 结果是“This is a paragraph”

    JavaScript的prototype属性的功能相当强大,而且在很大程度上构成了Prototype库的基础。但同时它也是有风险的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值