Object.defineProperty 在不同场景下的区别

最近发现了一个很有意思的现象，在浏览器的控制台和nodejs环境中，Object.defineProperty的表现有一个小差异。

 

在浏览器的控制台环境中，运行如下代码：

const obj = {};
Object.defineProperty(obj, 'name', {
    value: 'Tom',
    writable: false
})
console.log(obj)

输出的obj为：

{name: 'Tom'}

而同样一段代码，在nodejs环境中，输出结果为：

{}

 

• 使用 obj.name 在两种环境中都可以输出值为 Tom
• 使用 Object.keys(obj) 获取到的都为空数组：[]

由此可见，浏览器的控制台只是为了阅读方便，才打印出了name属性值。

有意思的是，当有多个属性时，这一点可以很明显的看出来：

const obj = {age:18};
Object.defineProperty(obj, 'name', {
    value: 'Tom',
    writable: false
})
console.log(obj)

上述代码在浏览器中的运行结果，name属性明显是淡化的，用以表示它不是真正的属性