c语言prototype,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

参考文章：