时间戳

首页 > 解决方案 > JavaScript 的原型继承是如何工作的？

javascript - JavaScript 的原型继承是如何工作的？

问题描述

我想知道 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

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

标签： javascriptprototypeprototypal-inheritance

解决方案

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

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

参考

如果有兴趣，这里是描述这个过程的规范

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

参考

推荐阅读