文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>了解javascript中的prototype属性...

了解javascript中的prototype属性...

时间:2010-08-14  来源:xnotepad

一说到prototype很多人可能第一个想到的是著名的prototype.js框架,当然我们今天说的不是它,而是Javascript中的prototype属性,一般都被翻译为“原型”。这是一个比较特殊的属性,Javascript中的继承一般都依赖这属性实现。

在Javascript中,一切都是对象,字符串是对象,数组是对象,变量是对象,函数也是对象,所以才会允许['a','b','c'].push('d');这样的操作存在。类本身也是一个对象,也可以定义属性和方法:

  1. function Test(){};
  2. Test.str = 'str';
  3. Test.fun = function(){return 'fun';};
  4. var r1 = Test.str;    // str
  5. var r2 = Test.fun(); // fun
  6. var inst = new Test();
  7. var r3 = inst.str;    // undefined
  8. var r4 = inst.fun(); // undefined

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

  1. function Test(){};
  2. var p1 = typeof(String.prototype);     // object
  3. var p2 = typeof(Test.prototype);       // object
  4. var p3 = typeof(new Test().prototype); // undefined
  5. var p4 = typeof(Object.prototype);     // object
  6. var p5 = typeof(new Object().prototype); // undefined

取值与赋值

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

  1. function Test(){};
  2. Test.test = 'str';
  3. function pt1()
  4. { this.test1 = 'pt1'; };
  5. function pt2()
  6. { this.test2 = 'pt2'; };
  7. pt2.prototype.test3 = 'test3';
  8. pt2.prototype.test1 = 'test4';
  9. pt1.prototype = new pt2();
  10. Test.prototype = new pt1();
  11. var inst = new Test();
  12. var p1 = inst.test; // undefined
  13. var p2 = inst.test1; // pt1 而不是 test4
  14. var p3 = inst.test2; // pt2
  15. var p4 = inst.test3; // test3

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

内置类的增强

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

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

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

  1. Array.prototype.pushs = function()
  2. {
  3.     var pos = this.length;
  4.     for(var i=0; i<arguments.length; i++)
  5.     {
  6.         this[++pos] = arguments[i];
  7.     }
  8.     return this.length;
  9. }
  10. var test = new Array('a','b','c');
  11. test.pushs('d','e');

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

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

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

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

一点点注意事项

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

  1. function Test(){}
  2. Test.prototype.num = 3;
  3. var inst1 = new Test();
  4. var inst2 = new Test();
  5. Test.prototype.num = 4; // 所有指向Test.prototype.num的值。
  6. var p1 = inst1.num; // 4
  7. var p2 = inst2.num; // 4
  8. inst1.num = 5; // 赋值,会为inst对象创建一个num属性。
  9. Test.prototype.num = 6; // 所有指向Test.prototype.num的值。
  10. var p3 = inst1.num; // 5 这里返回的是刚创建的inst1.num的值,而不是Test.prototype.num的值。
  11. var p4 = inst2.num; // 6
  12. delete Test.prototype.num;
  13. var p5 = inst1.num; // 5 inst1.num依然存在。
  14. var p6 = inst2.num; // undefined Test.prototype.num 被删除了。
本文采用 知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议 进行许可。 
转载时请注明出处:http://www.caixw.com/archives/intro-to-javascript-prototype.html
排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载