說(shuō)到j(luò)s的prototype豺总，我平常都這樣用：
// 給Date添加Format方法
Date.prototype.Format = function (fmt) {}
不過(guò)這兩天在看騰訊地圖的js api署恍，發(fā)現(xiàn)了一個(gè)很特別的用法：
var Label = function(opts) {
qq.maps.Overlay.call(this, opts);
}
Label.prototype = new qq.maps.Overlay();
wtf? 原型等于一個(gè)實(shí)例兴溜？call又是個(gè)啥项鬼？黑人問(wèn)號(hào)...
哲學(xué)起源
想要理解prototype是怎么回事零截，先從他為什么存在說(shuō)起吧。
眾所周知 JS 是一個(gè)面向?qū)ο蟮恼Z(yǔ)言秃臣，C語(yǔ)言什么的都有Class涧衙，JS木有哪工，咋整？
官方文檔是這么說(shuō)的（節(jié)選）：
Each constructor is a function that has a property named “
prototype” that is used to implement prototype-based inheritance and shared properties.blabla...
我知道你不想看這些弧哎。簡(jiǎn)單的說(shuō)：JS的繼承主要是依賴于原型繼承機(jī)制雁比，如果調(diào)用這個(gè)方法或者屬性，先找對(duì)象自己撤嫩，找不到就往prototype找偎捎，prototype找不到繼續(xù)找prototype的prototype，重復(fù)下去序攘，徹底找不到再返回undefined茴她。
Prototype都有什么特點(diǎn)？
看看下面的這段：
var a = 'haha';
a.prototype // undefined
a.__proto__ // String {length: 0, [[PrimitiveValue]]: ""}
是的程奠，對(duì)象實(shí)例沒(méi)有prototype丈牢。
不過(guò)__proto__又是個(gè)啥？先別著急瞄沙。
var fk = function() {}
fk.prototype // Object {}
fk.__proto__ // function () {}
函數(shù)有己沛。恩，因吹斯聽距境。
PS.不是所有的函數(shù)都有prototype申尼，比如瀏覽器的alert()就沒(méi)有。
但是這和繼承有什么關(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ù)時(shí)候都等價(jià)于a.constructor.prototype师幕，個(gè)別時(shí)候是什么呢？比如使用Object.create()诬滩，比如使用原型繼承的時(shí)候霹粥。請(qǐng)期待一下我后面的文章吧~
那么我們就可以這樣玩了：
function CatMama() {
this.miao = function() {
console.log('miao~');
}
}
var catMama = new CatMama(); // 貓媽媽會(huì)miao
catMama.miao(); // miao~
catMama.__proto__ === CatMama.prototype; // true
catMama.__proto__ === catMama.constructor.prototype; // true
function LittleCat() {this.ha = function() {console.log('~')}} // 小貓什么都不會(huì)
LittleCat.prototype = catMama;
var c = new LittleCat(); // 神說(shuō)要有LittleCat
c.ha(); // ~
c.miao(); // miao~ 基因決定了一切
// 根據(jù)前面說(shuō)到的的原型繼承，因?yàn)閏沒(méi)有miao這個(gè)方法碱呼，于是往自己的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)定
// 具體我也沒(méi)搞明白矾利，后面再看看
這樣就有了一個(gè)基于原型的繼承關(guān)系了姑裂。
總結(jié)起來(lái)，Prototype屬性的主要特點(diǎn)其實(shí)就是：
- 只有大部分function有
- 內(nèi)容指向具體對(duì)象
番外 1
又有人問(wèn)了Object.getPrototypeOf() 又是個(gè)啥男旗？
function Person() {
this.haha = function() {
console.log('haha')
}
}
var p = new Person();
Object.getPrototypeOf(p) === Person.prototype // true
Object.getPrototypeOf(p) === p.__proto__ // true
這么看起來(lái)似乎沒(méi)啥區(qū)別呢舶斧。MDN是這么說(shuō)的：
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)建好的實(shí)例會(huì)不會(huì)跟著變呢泽台？
提示一下，按照上面的描述矾缓，prototype其實(shí)是個(gè)引用怀酷。
好問(wèn)題，我們一起看一下：
// 先來(lái)一個(gè)反例
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~
// 知道為什么沒(méi)有修改成功么嗜闻？
// 因?yàn)樵屠^承鏈總是先查找對(duì)象本身有沒(méi)有該方法蜕依，miao方法在Cat與prototype中都存在，所以直接調(diào)用了Cat本身的miao琉雳，而不會(huì)去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
// 恩，符合我們的猜想翠肘。因?yàn)閜rototype本身就是引用檐束，所以修改這個(gè)引用的內(nèi)容，直接調(diào)用就會(huì)用最新的值
// 修改2
Cat.prototype = {
miao: function() {
console.log('haha');
}
}
c1.miao(); // mmmmm
// 為什么沒(méi)有修改成功锯茄？
// 因?yàn)閜rototype對(duì)象直接變了厢塘，所以沒(méi)有修改成功
// 而上面的方式是直接修改引用本身，所以可以成功
想知道修改2為什么沒(méi)有成功的話肌幽，這就要從new 到底做了些什么說(shuō)起了晚碾。請(qǐng)期待一下吧~
P.S.以上代碼運(yùn)行環(huán)境均為Chrome 55
參考文章：
