stackoverflow片段与浏览器控制台中的不同console.log（）s-为什么？

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控制台（可以在here中找到其代码）使用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__属性以将其展开。

因为函数的constructor属性是not不可枚举的，所以它不会通过for..in进行迭代，因此可以在browser控制台中看到，而在代码段控制台中却看不到。

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