JS好难：Prototype是个啥

说到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 only Object.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

参考文章：

ECMA-262

详解prototype与__proto__区别

Object.getPrototypeOf 函数 (JavaScript)