JavaScript | 浅析 prototype 与 __proto__ 的区别

概述

JavaScript里，除了null 和 undefined之外，几乎所有的内容都是来自Object的派生。prototype与__proto__是JS中特殊存在，二者都是对象所拥有的一组特殊属性。

从一段代码开始

看下面的代码片段：

var fooFunc = function() {
    return {
        foo: 42
    }
};
fooFunc.prototype.bar = 'baz';
var fooVal = fooFunc();
console.log(fooVal);   // {foo: 42}
console.log(fooFunc.prototype);     // {bar: "baz", constructor: ƒ}

在这个例子中，我们可以看到原型的好处。函数 fooFunc 是从 Object 实例派生出来的，它有自己的一组属性，例如{ bar: baz } ，以及它从 Object 实例化时所携带的任何东西，例如{constructor: f }。

我们知道，fooFunc 是从 Object 派生出来的，那么是否可以向上查看 Object 的原型？答案是肯定的

console.log('prototype of fooFunc:');
console.log(fooFunc.prototype);     // {bar: "baz", constructor: ƒ}
console.log('prototype of Object:');
console.log(fooFunc.prototype.__proto__);   // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

从上面的代码中，可以看到对象的所有其他原型都驻留在它的__proto__属性中。控制台最后一行输出，就是对象的原型链。

当我们尝试遍历 Object 的原型链，会发生什么呢？

console.log(fooFunc.prototype); // {bar: "baz", constructor: ƒ}
console.log(fooFunc.prototype.__proto__);// {constructor: ƒ, __defineSetter__: ƒ, …}
console.log(fooFunc.prototype.__proto__.__proto__);     // null

控制台最后一行表示Object 没有父级。

原型继承

我们既然已经知道了原型是如何工作的，那么理解原型继承将变得简单。

var obj = function(){
    this.firstName = 'Varun';
    this.lastName = 'Dey'
}
obj.prototype.age = 25;
var nameObj = new obj()
console.log(nameObj.age);   // 25

1. 定义一个函数obj
2. 在obj原型链上直接分配一个属性年龄
3. 据obj实例出一个nameObj 变量，并且有属性firstName、 lastName 和age。
4. 当程序访问age属性时，因nameObj里没有。程序便从nameObj.__proto__原型链上查找，并找到age。值得一提的是，nameObj.__proto__ 就是obj.prototype