摘要：即是由此我們可以輕松偽造一個(gè)實(shí)例對(duì)象可是這是對(duì)對(duì)象的屬性的修改，和有什么關(guān)系靜態(tài)方法的繼承少年，可別忘了函數(shù)本身也是個(gè)對(duì)象喲在上面的代碼中，我們使無關(guān)對(duì)象的指向構(gòu)造函數(shù)的，于是使被判定為的實(shí)例。

關(guān)于 __proto__ 屬性，MDN 上的解釋是這樣的^[1]：

The __proto__ property of Object.prototype is an accessor property (a getter function and a setter function) that exposes the internal [[Prototype]] (either an object or null) of the object through which it is accessed.

即是說，__proto__ 屬性指向了實(shí)例對(duì)象的原型 Constructor.prototype。那么，這個(gè)屬性里隱藏著怎樣的黑魔法呢？

最近看 ECMAScript 6 的 spec，發(fā)現(xiàn)了一些有意思的東西，比如 class 章節(jié)：

14.5.14 Runtime Semantics: ClassDefinitionEvaluation[2.1]

With parameter className.
ClassTail : ClassHeritageopt { ClassBodyopt }
...
6.g (for class heritage)

If superclass has a [[FunctionKind]] internal slot whose value is "generator", throw a TypeError exception.

Let protoParent be Get(superclass, "prototype").

ReturnIfAbrupt(protoParent).

If Type(protoParent) is neither Object nor Null, throw a TypeError exception.

Let constructorParent be superclass.


7. Let proto be ObjectCreate(protoParent).

...
12. Let constructorInfo be the result of performing DefineMethod for constructor with arguments proto and constructorParent as the optional functionPrototype argument.

...
16. Perform MakeConstructor(F, false, proto).

...
18. Perform CreateMethodProperty(proto, "constructor", F).
...

這幾行規(guī)定了類繼承（class SubClass extends SuperClass {}）的行為，除了眾所周知的 SubClass.prototype = Object.create(SuperClass.prototype) 以外，還做了一件有趣的事：Let constructorParent be superclass, proto be ObjectCreate(protoParent), and performing DefineMethod for constructor with arguments proto and constructorParent as the optional functionPrototype argument.

追溯 functionPrototype 變量的去向，發(fā)現(xiàn)是這樣的：

14.3.8 Runtime Semantics: DefineMethod[2.2]

With parameters object and optional parameter functionPrototype.
...
6. Let closure be FunctionCreate(kind, StrictFormalParameters, FunctionBody, scope, strict). If functionPrototype was passed as a parameter then pass its value as the functionPrototype optional argument of FunctionCreate.

...

9.2.5 FunctionCreate (kind, ParameterList, Body, Scope, Strict, prototype)[2.3]

The abstract operation FunctionCreate requires the arguments: kind which is one of (Normal, Method, Arrow), a parameter list production specified by ParameterList, a body production specified by Body, a Lexical Environment specified by Scope, a Boolean flag Strict, and optionally, an object prototype.
...
4. Let F be FunctionAllocate(prototype, Strict, allocKind).

...

9.2.3 FunctionAllocate (functionPrototype, strict [,functionKind] )[2.4]

...
12. Set the [[Prototype]] internal slot of F to functionPrototype.
...

原來 functionPrototype 被用作了 SubClass 的 [[Prototype]] 屬性！

Babel^[2] 對(duì)繼承的實(shí)現(xiàn)如下：

function _inherits(subClass, superClass) {
    if (typeof superClass !** "function" && superClass !** null) {
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    }
    subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
            value: subClass,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });
    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

道理我都懂，可是為什么要這樣做？

要檢測一個(gè)對(duì)象是否是一個(gè)構(gòu)造函數(shù)的實(shí)例，我們通常會(huì)用 O instanceof C 這樣的表達(dá)式，在 spec 中，instanceof 運(yùn)算符這樣被定義：

12.9.4 Runtime Semantics: InstanceofOperator(O, C)[2.5]

...
2. Let instOfHandler be GetMethod(C,@@hasInstance).
...

19.2.3.6 Function.prototype[@@hasInstance] ( V )[2.6]


Let F be the this value.

Return OrdinaryHasInstance(F, V).

7.3.19 OrdinaryHasInstance (C, O)[2.6]

...
4. Let P be Get(C, "prototype").

...
7. Repeat

Let O be O.[[GetPrototypeOf]]().

ReturnIfAbrupt(O).

If O is null, return false.

If SameValue(P, O) is true, return true.

9.1.1 [[GetPrototypeOf]] ( )[2.6]

Return the value of the [[Prototype]] internal slot of O.

大致描述如下：instanceof 運(yùn)算符掉用了 Function.prototype 上的內(nèi)部方法 @@hasInstance，此方法將 this 對(duì)象（即 C）的 prototype 屬性與實(shí)例對(duì)象 O 的 [[prototype]] 對(duì)比，如果后者 [[prototype]] 為 null 則返回 false，如果兩者相等，則返回 true，否則沿原型鏈向上比較，直到得出結(jié)果。

即是：

O instanceof C =>
  O.__proto__ === C.prototype ? true:
    O.__proto__.__proto__ === C.prototype ? true :
        ...

由此我們可以輕松偽造一個(gè)實(shí)例對(duì)象：

class A {
    whoami() {
        return "Instance of A";
    }
}

let a = new A();

let b = {};
Object.setPrototypeOf(b, A.prototype); // b.__proto__ = A.prototype

a.whoami() =** b.whoami(); // true
b instanceof A; // true

可是這是對(duì)對(duì)象的 __proto__ 屬性的修改，和 SubClass.__proto__ 有什么關(guān)系？

少年，可別忘了 JavaScript 函數(shù)本身也是個(gè)對(duì)象喲！

在上面的代碼中，我們使無關(guān)對(duì)象 b 的 __proto__ 指向構(gòu)造函數(shù) A 的 prototype，于是使 b 被判定為 A 的實(shí)例。同時(shí)，A 的所有原型方法都被 b 所繼承！

換句話說，如果將 SubClass 的 __proto__ 屬性指向 SuperClass，父類上的所有屬性都將被子類繼承！比如：

class A {
    static whoami() {
        return "A Constructor!";
    }

    greet() {
        return "hello world!";
    }
}

function B() {}
Object.setPrototypeOf(B, A);

B.whoami(); // "A Constructor!"

此時(shí)，我們?cè)賹?B.prototype 的 __proto__ 屬性指向 A.prototype，即可完成原型方法的繼承：

Object.setPrototypeOf(B.prototype, A.prototype);

let b = new B();
b.greet(); // "hello world!"

b instanceof B; // true
b instanceof A; // true

如此一來，子類就構(gòu)造完成了！可以開開心心造孩子去了！

利用 instanceof 運(yùn)算符的定義，我們還能玩出一些神奇的事，比如：

function A() {};
A.prototype = A;

function B() {};
Object.setPrototypeOf(B, A);

B instanceof A; // true!

（全文完）

Object.prototype.__proto__ - JavaScript | MDN

ECMAScript 2015 Language Specification

Babel · The compiler for writing next generation JavaScript

重編自我的博客，原文地址：https://idiotwu.me/proto-property-and-es6-classes-inheritance/