說到j(luò)s的prototype，我平常都這樣用：
// 給Date添加Format方法
Date.prototype.Format = function (fmt) {}
不過這兩天在看騰訊地圖的js api，發(fā)現(xiàn)了一個很特別的用法：
var Label = function(opts) {
qq.maps.Overlay.call(this, opts);
}
Label.prototype = new qq.maps.Overlay();
wtf? 原型等于一個實例？call又是個啥？黑人問號...
哲學(xué)起源
想要理解prototype是怎么回事，先從他為什么存在說起吧。
眾所周知 JS 是一個面向?qū)ο蟮恼Z言，C語言什么的都有Class，JS木有，咋整？
官方文檔是這么說的（節(jié)選）：
Each constructor is a function that has a property named “
prototype” that is used to implement prototype-based inheritance and shared properties.blabla...
我知道你不想看這些。簡單的說：JS的繼承主要是依賴于原型繼承機制，如果調(diào)用這個方法或者屬性，先找對象自己，找不到就往prototype找，prototype找不到繼續(xù)找prototype的prototype，重復(fù)下去，徹底找不到再返回undefined。
Prototype都有什么特點？
看看下面的這段：
var a = 'haha';
a.prototype // undefined
a.__proto__ // String {length: 0, [[PrimitiveValue]]: ""}
是的，對象實例沒有prototype。
不過__proto__又是個啥？先別著急。
var fk = function() {}
fk.prototype // Object {}
fk.__proto__ // function () {}
函數(shù)有。恩，因吹斯聽。
PS.不是所有的函數(shù)都有prototype，比如瀏覽器的alert()就沒有。
但是這和繼承有什么關(guān)系？往下看：
var Person = function() {
this.name = 'Jobs'
this.hello = function() {
console.log('hello!');
}
};
var p1 = new Person();
p1.__proto__ === Person.prototype // true
p1.__proto__ === p1.constructor.prototype // true
p1.hello() // hello!
可以看到
a.__proto__在大多數(shù)時候都等價于a.constructor.prototype，個別時候是什么呢？比如使用Object.create()，比如使用原型繼承的時候。請期待一下我后面的文章吧~
那么我們就可以這樣玩了：
function CatMama() {
this.miao = function() {
console.log('miao~');
}
}
var catMama = new CatMama(); // 貓媽媽會miao
catMama.miao(); // miao~
catMama.__proto__ === CatMama.prototype; // true
catMama.__proto__ === catMama.constructor.prototype; // true
function LittleCat() {this.ha = function() {console.log('~')}} // 小貓什么都不會
LittleCat.prototype = catMama;
var c = new LittleCat(); // 神說要有LittleCat
c.ha(); // ~
c.miao(); // miao~ 基因決定了一切
// 根據(jù)前面說到的的原型繼承，因為c沒有miao這個方法，于是往自己的prototype找，找到了，調(diào)用。一切都那么順理成章，你看
c.miao === LittleCat.prototype.miao // true
c.__proto__ === LittleCat.prototype; // true
c.__proto__ === c.constructor.prototype; // false
// 可以看到__proto__和constructor.prototype的關(guān)系不是那么的穩(wěn)定
// 具體我也沒搞明白，后面再看看
這樣就有了一個基于原型的繼承關(guān)系了。
總結(jié)起來，Prototype屬性的主要特點其實就是：
- 只有大部分function有
- 內(nèi)容指向具體對象
番外 1
又有人問了Object.getPrototypeOf() 又是個啥？
function Person() {
this.haha = function() {
console.log('haha')
}
}
var p = new Person();
Object.getPrototypeOf(p) === Person.prototype // true
Object.getPrototypeOf(p) === p.__proto__ // true
這么看起來似乎沒啥區(qū)別呢。MDN是這么說的：
Warning: While
Object.prototype.__proto__is supported today in most browsers, its existence and exact behavior has only been standardized in the ECMAScript 2015 specification as a legacy feature to ensure compatibility for web browsers. For better support, it is recommended that onlyObject.getPrototypeOf()be used instead.
意思就是__proto__是不規(guī)范的，為了更好的兼容性，建議大家用Object.getPrototypeOf()
番外 2：
如果修改了prototype，那么之前已經(jīng)創(chuàng)建好的實例會不會跟著變呢？
提示一下，按照上面的描述，prototype其實是個引用。
好問題，我們一起看一下：
// 先來一個反例
function Cat() {
this.miao = function() {
console.log('m~')
}
}
var c1 = new Cat();
c1.miao(); // m~
Cat.prototype.miao = function() {
console.log('mmmmmm');
}
c1.miao(); // m~
// 知道為什么沒有修改成功么？
// 因為原型繼承鏈總是先查找對象本身有沒有該方法，miao方法在Cat與prototype中都存在，所以直接調(diào)用了Cat本身的miao，而不會去prototype中查找了。
正確的例子在這里：
function Cat() {}
Cat.prototype.miao = function() {
console.log('m~')
}
var c1 = new Cat();
c1.miao(); // m~
// 修改1
Cat.prototype.miao = function() {
console.log('mmmmmm');
}
c1.miao(); // mmmmmm
// 恩，符合我們的猜想。因為prototype本身就是引用，所以修改這個引用的內(nèi)容，直接調(diào)用就會用最新的值
// 修改2
Cat.prototype = {
miao: function() {
console.log('haha');
}
}
c1.miao(); // mmmmm
// 為什么沒有修改成功？
// 因為prototype對象直接變了，所以沒有修改成功
// 而上面的方式是直接修改引用本身，所以可以成功
想知道修改2為什么沒有成功的話，這就要從new 到底做了些什么說起了。請期待一下吧~
P.S.以上代碼運行環(huán)境均為Chrome 55
參考文章：
