JavaScript prototype 介绍

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

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

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

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

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

取值与赋值

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

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

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

内置类的增强

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

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

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

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

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

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

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

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

一点点注意事项

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

 1function Test(){}
 2Test.prototype.num = 3;
 3
 4var inst1 = new Test();
 5var inst2 = new Test();
 6
 7Test.prototype.num = 4; // 所有指向 Test.prototype.num 的值。
 8var p1 = inst1.num;     // 4
 9var p2 = inst2.num;     // 4
10
11inst1.num = 5;          // 赋值，会为 inst 对象创建一个 num 属性。
12Test.prototype.num = 6; // 所有指向 Test.prototype.num 的值。
13var p3 = inst1.num;     // 5 这里返回的是刚创建的 inst1.num 的值，而不是 Test.prototype.num 的值。
14var p4 = inst2.num;     // 6
15
16delete Test.prototype.num;
17var p5 = inst1.num;     // 5 inst1.num 依然存在。
18var p6 = inst2.num;     // undefined Test.prototype.num 被删除了。