JavaScript 的原型继承是如何工作的？答案

【问题标题】：How does JavaScript's prototypal Inheritance work?JavaScript 的原型继承是如何工作的？
【发布时间】：2021-11-10 14:14:25
【问题描述】：

我想知道 JavaScript 的原型继承是如何工作的。当我们使用 new 关键字创建对象时，对象的 __proto__ 设置为 Constructor_Function.prototype。

但我不明白为什么我会得到这个输出。

我的代码：

function SimpleFunction(){}

let obj = new SimpleFunction();

console.dir(obj);

输出：

SimpleFunction {}
    [[Prototype]]: Object
        constructor: ƒ SimpleFunction()
        [[Prototype]]: Object
            constructor: ƒ Object()
            hasOwnProperty: ƒ hasOwnProperty()
            isPrototypeOf: ƒ isPrototypeOf()
            propertyIsEnumerable: ƒ propertyIsEnumerable()
            toLocaleString: ƒ toLocaleString()
            toString: ƒ toString()
            valueOf: ƒ valueOf()
            __defineGetter__: ƒ __defineGetter__()
            __defineSetter__: ƒ __defineSetter__()
            __lookupGetter__: ƒ __lookupGetter__()
            __lookupSetter__: ƒ __lookupSetter__()
            __proto__: Object
                constructor: ƒ SimpleFunction()
                [[Prototype]]: Object
                constructor: ƒ Object()
                hasOwnProperty: ƒ hasOwnProperty()
                isPrototypeOf: ƒ isPrototypeOf()
                propertyIsEnumerable: ƒ propertyIsEnumerable()
                toLocaleString: ƒ toLocaleString()
                toString: ƒ toString()
                valueOf: ƒ valueOf()
                __defineGetter__: ƒ __defineGetter__()
                __defineSetter__: ƒ __defineSetter__()
                __lookupGetter__: ƒ __lookupGetter__()
                __lookupSetter__: ƒ __lookupSetter__()
                __proto__: Object
                    constructor: ƒ Object()
                    hasOwnProperty: ƒ hasOwnProperty()
                    isPrototypeOf: ƒ isPrototypeOf()
                    propertyIsEnumerable: ƒ propertyIsEnumerable()
                    toLocaleString: ƒ toLocaleString()
                    toString: ƒ toString()
                    valueOf: ƒ valueOf()
                    __defineGetter__: ƒ __defineGetter__()
                    __defineSetter__: ƒ __defineSetter__()
                    __lookupGetter__: ƒ __lookupGetter__()
                    __lookupSetter__: ƒ __lookupSetter__()
                    __proto__: null
                    get __proto__: ƒ __proto__()
                    set __proto__: ƒ __proto__()
                get __proto__: ƒ __proto__()
                set __proto__: ƒ __proto__()
            get __proto__: ƒ __proto__()
            set __proto__: ƒ __proto__()

当我尝试这个时：

obj.__proto__.__proto__.__proto__;

我明白了：

null

所以我不明白为什么输出中有超过三个原型对象。

【问题讨论】：

这能回答你的问题吗？ Benefits of prototypal inheritance over classical?
对不起，我还是不明白。
也许读过JavaScript Object prototypes？它们使修补您继承的对象的代码成为可能。如果您只是问自己“为什么这是自我参照 3 次？” 停下来，大体上理解它。有三个原型对象，因为语言不会骗你。这只是一个功能有多少。为什么这对您来说是个问题？
这不是问题，就像我说的那样，只是我无法理解为什么我会得到这个输出。[[Prototype]] 和 __proto__ 是同一件事吗？
请考虑：What should I do when someone answers my question?

标签： javascript prototype prototypal-inheritance

【解决方案1】：

所以我不明白为什么原型对象不止三个在输出中。

这是因为SimpleFunction()构造函数是派生源对象（functions are objects with prototypes too）。由于SimpleFunction() 是用户定义的，它必须像其他所有对象一样从 Object 对象继承。因此，您有函数对象及其原型 Object 对象，然后您有 obj，它是从具有自己的 Object 对象原型的构造函数派生的。

Reference

如果有兴趣，这里是spec that describes this process

不，[[Prototype]] 和__proto__ 不是一回事。如果查看日志，您将看到名为 __proto__ 的 setter 和 getter。所以__proto__ 实际上是 [[Prototype]] 的访问器属性，而 [[Prototype]] 反映了是原型的实际对象。

Reference

【讨论】：