学习Vue响应式原理时候了解到其内部使用了 Object.defineProperty() 来实现数据响应式，又去拓展学习了下，找到一个Object.defineProperty()的有趣用法——设置对象属性只读，下面我们一起来看下吧。

Object.defineProperty()定义

MDN上Object.defineProperty()定义是：

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

对象的数据属性

对象的数据属性有四个描述其行为的特性：

configurable

表示能否被修改或删除，如通过delete删除属性从而重新定义属性，或者能否把属性修改为访问器属性。直接在对象上定义的属性，这个特性的默认值是true，使用 Object.defineProperty() 定义属性时的默认值false。

enumerable

表示是否会出现在对象的枚举属性中，如能否通过for-in循环返回属性。直接在对象上定义的属性，这个特性的默认值是true，使用 Object.defineProperty() 定义属性时的默认值false。

writable

表示能否被赋值运算符修改属性的值。直接在对象上定义的属性，这个特性的默认值是true，使用 Object.defineProperty() 定义属性时的默认值false。

value

该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存在这个位置。这个特性的默认值为undefined，使用 Object.defineProperty() 定义属性时的默认值false。

代码示例

直接在对象上定义属性

let obj = {
    text: "Hello World！"
}
复制代码

此时obj的text属性的configurable、enumerable和writable特性默认都是true，value特性的值是”Hello World！“。此时尝试获取obj的text属性会取到value的值，可以枚举，可以使用赋值运算符修改属性的值，且可以删除。

let obj = {
    text: "Hello World！"
}
console.log(obj.text);// Hello World！
for(let item in obj) {
    console.log(item);
}
// Hello World！
obj.text = 'change';
console.log(obj.text);// change
delete obj.text;
console.log(obj.text);// undefined
复制代码

示例效果

使用 Object.defineProperty() 定义属性

let obj = {}
Object.defineProperty(obj, 'text', {});
复制代码

此时obj的text属性的configurable、enumerable和writable特性默认都是false，value特性的值是”undefined“。此时尝试获取obj的text属性会取到value的值，不可以枚举，不可以使用赋值运算符修改属性的值，且不可以删除。

let obj = {}
Object.defineProperty(obj, 'text', {});
Object.defineProperty(obj, 'text2', {
    value: 'Hello World！'
});
console.log(obj.text);// undefined
for(let item in obj) {
    console.log(item);
}
// undefined
obj.text = 'change';
console.log(obj.text);// undefined
delete obj.text2;
console.log(obj.text2);// 'Hello World！'
复制代码

示例效果

设置对象属性只读

看了上面的内容一定就知道怎么设置对象属性只读了吧。

let obj = {
    text: 'Hello World！'
}
Object.defineProperty(obj, 'text', {
    writable: false
});
Object.defineProperty(obj, 'text2', {
    value: 'Hello World！'
});
obj.text = 'change';
console.log(obj.text);// Hello World！
obj.text2 = 'change';
console.log(obj.text2);// Hello World！
复制代码

示例效果