stackoverflow 代碼段與瀏覽器控制台中的 console.log() 不同 - 為什么？

Question

 const func = function() { this.name = 'mon' } let f1 = new func let f2 = Object.create(f1) let f3 = Object.create(f2) // The following comments are what the browser console logs: console.log(f1.__proto__) // {constructor: f} console.log(f2.__proto__) // func {name: "mon"} console.log(f3.__proto__) // func {} (here's where this snippet logs func {"name": "mon"})

另外，JS 中對象的“類型”是否由其“最近的”構造函數決定？ （即 func 是瀏覽器為f1和f2記錄的類型）？

Answer 1

不同之處在於 Stack Snippet 控制台（可在此處找到其代碼）使用for..in迭代屬性。 這將包括原型鏈上任何地方的可枚舉屬性。 這是（部分）代碼段控制台如何計算要記錄的屬性：

    function n(e) {
        var n = [];
        for (var o in e)
            n.push(o);
        return n
    }

例如：

 const proto = { prop: 'val' }; const obj = Object.create(proto); console.log(obj); // browser console shows `Object`, but no `prop` property

相比之下，在瀏覽器控制台中，只會顯示直接在記錄對象上的屬性。 為了訪問記錄對象的內部原型（並查看原型上可能的屬性），您必須單擊__proto__屬性以展開它。

因為someFunction.prototype的constructor屬性是不可枚舉的，它不會通過for..in迭代，所以它可以在瀏覽器控制台中看到，但在代碼段控制台中看不到。

 const func = function() { this.name = 'mon' } console.log(func.prototype.hasOwnProperty('constructor')); for (const prop in func.prototype) { console.log(prop); // Nothing is logged }

另外，JS 中對象的“類型”是否由其“最近的”構造函數決定？ （即 func 是瀏覽器為 f1 和 f2 記錄的類型）？

每個對象都只有一個內部原型。 在你的代碼段，內部原型f3是f2 ，內部原型f2是f1 ，並且內部原型f1是func.prototype 。 原型鏈中的某些東西也可能有一個constructor屬性（ func.prototype.constructor === func ），但是這樣一個屬性存在的事實對內部原型鏈沒有真正的影響，它只是一個方便的方法將.prototype對象鏈接到其關聯的function 。