JavaScript原型学习笔记

什么是原型

原型是一个对象，其他对象可以通过它实现属性继承。所有的对象都拥有原型，所有的对象都可以成为原型。
获得原型的方法：

var a = {}; 

 //Firefox 3.6 and Chrome 5 

 Object.getPrototypeOf(a); //[object Object]   

 //Firefox 3.6, Chrome 5 and Safari 4 

a.__proto__; //[object Object]   

 //all browsers 

 a.constructor.prototype; //[object Object]

注意，当你试图获取一个主数据类型的原型时，它被强制转化成了一个对象：

//(works in IE too, but only by accident) 
false.__proto__ === Boolean(false).__proto__; //true

原型与原型属性

原型例子：

//创建一个函数bvar b = function(){ var one; }
//使用b创建一个对象实例cvar c = new b();
//查看b 和c的构造函数
b.constructor;  // function Function() { [native code]}
b.constructor==Function.constructor; //true
c.constructor; //实例c的构造函数 即 b function(){ var one; }c.constructor==b //true
//b是一个函数，查看b的原型如下b.constructor.prototype // function (){}b.__proto__  //function (){}
//b是一个函数，由于javascript没有在构造函数constructor和函数function之间做区分，所以函数像constructor一样，//有一个原型属性，这和函数的原型(b.__proto__ 或者b.construtor.prototype)是不一样的b.prototype //[object Object]   函数b的原型属性
b.prototype==b.constructor.prototype //fasleb.prototype==b.__proto__  //falseb.__proto__==b.constructor.prototype //true
//c是一个由b创建的对象实例，查看c的原型如下c.constructor.prototype //[object Object] 这是对象的原型c.__proto__ //[object Object] 这是对象的原型
c.constructor.prototype==b.constructor.prototype;  //false  c的原型和b的原型比较c.constructor.prototype==b.prototype;  //true c的原型和b的原型属性比较
//为函数b的原型属性添加一个属性max
b.prototype.max = 3
//实例c也有了一个属性max
c.max  //3

上面的例子中，对象实例c的原型和函数的b的原型属性是一样的，如果改变b的原型属性，则对象实例c的原型也会改变。

理解一个函数的原型属性(function’s prototype property )其实和实际的原型(prototype)没有关系对我们来说至关重要。如实例对象a的原型(a.proto)是对函数A的原型属性(A.prototype)的引用：

var A = function(name){this.name = name;}
var a = new A(‘alpha’);a.name; //’alpha’
A.__proto__.max = 19880716;
a.max   //undefined

原型可以做什么

String.prototype.times = function(count) {
    return count < 1 ? '' : new Array(count + 1).join(this);
 } 
"hello!".times(3); //"hello!hello!hello!"; 
"please...".times(6);//"please...please...please...please...please...please..."

注意事项

hasOwnProperty在for-in中一般用来检测是否为自身属性，也是JavaScript中唯一一个不会遍历原型链的方法。但是这方法有可能被覆盖改写：

var foo = {
    hasOwnProperty: function() {
        return false;
    },
    bar: 'Here be dragons'
};
foo.hasOwnProperty('bar'); // 总是返回 false
// 使用{}对象的 hasOwnProperty，并将其上下为设置为foo
{}.hasOwnProperty.call(foo, 'bar'); // true

参考资料

• 强大的原型和原型链
• js原型链原理看图说明
• 理解JavaScript原型