说到js的prototype，我平常都这样用：
// 给Date添加Format方法
Date.prototype.Format = function (fmt) {}
不过这两天在看腾讯地图的js api，发现了一个很特别的用法：
var Label = function(opts) {
qq.maps.Overlay.call(this, opts);
}
Label.prototype = new qq.maps.Overlay();
wtf? 原型等于一个实例？call又是个啥？黑人问号...
哲学起源
想要理解prototype是怎么回事，先从他为什么存在说起吧。
众所周知 JS 是一个面向对象的语言，C语言什么的都有Class，JS木有，咋整？
官方文档是这么说的（节选）：
Each constructor is a function that has a property named “
prototype” that is used to implement prototype-based inheritance and shared properties.blabla...
我知道你不想看这些。简单的说：JS的继承主要是依赖于原型继承机制，如果调用这个方法或者属性，先找对象自己，找不到就往prototype找，prototype找不到继续找prototype的prototype，重复下去，彻底找不到再返回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 () {}
函数有。恩，因吹斯听。
PS.不是所有的函数都有prototype，比如浏览器的alert()就没有。
但是这和继承有什么关系？往下看：
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__在大多数时候都等价于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~ 基因决定了一切
// 根据前面说到的的原型继承，因为c没有miao这个方法，于是往自己的prototype找，找到了，调用。一切都那么顺理成章，你看
c.miao === LittleCat.prototype.miao // true
c.__proto__ === LittleCat.prototype; // true
c.__proto__ === c.constructor.prototype; // false
// 可以看到__proto__和constructor.prototype的关系不是那么的稳定
// 具体我也没搞明白，后面再看看
这样就有了一个基于原型的继承关系了。
总结起来，Prototype属性的主要特点其实就是：
- 只有大部分function有
- 内容指向具体对象
番外 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
这么看起来似乎没啥区别呢。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__是不规范的，为了更好的兼容性，建议大家用Object.getPrototypeOf()
番外 2：
如果修改了prototype，那么之前已经创建好的实例会不会跟着变呢？
提示一下，按照上面的描述，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中都存在，所以直接调用了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本身就是引用，所以修改这个引用的内容，直接调用就会用最新的值
// 修改2
Cat.prototype = {
miao: function() {
console.log('haha');
}
}
c1.miao(); // mmmmm
// 为什么没有修改成功？
// 因为prototype对象直接变了，所以没有修改成功
// 而上面的方式是直接修改引用本身，所以可以成功
想知道修改2为什么没有成功的话，这就要从new 到底做了些什么说起了。请期待一下吧~
P.S.以上代码运行环境均为Chrome 55
参考文章：
