为何用Object.create()创建的对象显示为空却存在属性？属性存储在哪？

问题代码与现象 #

let company = {
  companyName: "DeedaZaib"
}

let emp1 = Object.create(company, {
  name: {
    value: "Hasnain"
  }
})

console.log(emp1.name)
//emp1.name gives => Hasnain
console.log(emp1)
//emp1 gives      => {}
//I expect emp1 to be as {name: 'Hasnain'}

执行后console.log(emp1.name)能输出Hasnain，但console.log(emp1)却显示{}，预期emp1应该是{name: 'Hasnain'}。

原因分析 #

你用Object.create()第二个参数定义属性时，默认配置的enumerable（可枚举性）为false。控制台打印对象时，只会显示可枚举的属性，所以name属性不会出现在输出结果里，但它确实存在于对象自身。

如果要让name属性在控制台打印时显示，需要手动把enumerable设为true：

let emp1 = Object.create(company, {
  name: {
    value: "Hasnain",
    enumerable: true // 添加可枚举配置
  }
})

此时再执行console.log(emp1)，就会输出{name: 'Hasnain'}。

属性存储位置 #

emp1.name是存储在emp1对象自身的属性集合里的，并不是继承自company原型。你可以通过以下方法验证：

• 执行emp1.hasOwnProperty('name')会返回true，说明这是对象自身的属性；
• 执行Object.getOwnPropertyNames(emp1)会返回['name']，能获取到对象自身所有属性（包括不可枚举的）。

内容的提问来源于stack exchange，提问作者Hasnain