一、语法
Object.defineProperty(obj, prop, descriptor)obj：需要定义属性的对象
descriptor：属性的描述描述符
[举个例子]
let obj = Object.create(null); let descriptor = { configurable:false, writable:false, enumerable:false, value:'hello world' }; Object.defineProperty(obj,'hello',descriptor); console.log(obj.hello);//hello world二、描述符
在JS中对象具有两种属性，分别是数据属性和访问器属性，所以其描述符也根据属性分类，分为数据描述符和访问器描述符。
在使用描述符时，必须是两种形式之一，且两者不能同时使用。
2.1 数据描述符
数据描述符是一个具有值的属性，该值可能是可写的，也可能是不可写的。
configurable：表示该属性能否通过delete删除，能否修改属性的特性或者能否修改访问器属性，默认为false。当且仅当该属性的configurable为true时，才能实现上述行为。
enumerable：表示该属性是否可以枚举，即可否通过for..in访问属性。默认为false。
value：表示该属性的值。可以是任何有效的JS值。默认为undefined。
writable：表示该属性的值是否可写，默认为false。当且仅当属性的writable为true时，其值才能被赋值运算符改变。
[举个例子]
let obj = { hello:'world' }; console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));运行结果：
2.2 访问器描述符
访问器描述符是一个有getter-setter函数对描述的属性的读写。
它具有以下可选的键值：
configurable：表示该属性能否通过delete删除，能否修改属性的特性或者能否修改访问器属性，默认为false。当且仅当该属性的configurable为true时，才能实现上述行为。
enumerable：表示该属性是否可以枚举，即可否通过for..in访问属性。默认为false。
get：在读取属性时调用的函数，默认值为undefined。
set：在写入属性时调用的函数，默认值为undefined。
[举个例子]
let obj = { _hello:'hello world' //表示私有变量 }; Object.defineProperty(obj,'hello',{ get() { console.log('get'); return this._hello; }, set:function (value) { console.log('set'); this._hello = value; } }); console.log(obj.hello); obj.hello = 'goodbye'; console.log(obj.hello); 执行结果：
function Hello() { let hello = 'hello world'; Object.defineProperty(this, 'hello', { get(){ console.log('get'); return hello; }, set(value){ console.log('set'); hello = value; } }) } let obj = new Hello(); console.log(obj.hello); obj.hello = 'goodbye'; console.log(obj.hello); 从本质上来讲两种方式没区别，之所以这个例子看上去比较优雅，是因为采用了闭包的思想，隐藏了他们访问的都是同一块内存区域的本质。
2.3 注意点
数据描述符和访问器描述符不能同时使用，否则会报错。
function Hello() { let hello = "hello world"; Object.defineProperty(this, 'hello', { get(){ console.log('get'); return hello; }, set(value){ console.log('set'); hello = value; }, writable:true }) } let obj = new Hello();执行结果：
三、瞎联想
主要这个东西让我想到了ES6中提出的Proxy(代理对象)，它同样也起到了属性拦截器的作用，但是功能更强大，这里也举个例子。
let obj = { hello:'hello world' }; let proxy = new Proxy(obj, { get(target, property) { console.log('get'); return target[property]; }, set(target,property,value) { console.log('set'); target[property] = value; } }); console.log(proxy.hello); proxy.hello = 'goodbye'; console.log(proxy.hello); 执行后的输出结果和上面通过设置属性的访问器描述符的结果一样。而且从代码上看，区别也不是很大，所以Proxy相当于访问器描述符的加强版吧，我是这么觉得的。（感觉我在这地方说法可能有问题，希望有大牛指点一下）
四、应用
const obj = {}; Object.defineProperty(obj, 'text', { get() { console.log('get val'); }, set(newVal) { console.log('set val:' + newVal); document.getElementById('input').value = newVal; document.getElementById('span').innerHTML = newVal; } }); const input = document.getElementById('input'); input.addEventListener('keyup', function(e){ obj.text = e.target.value; });当输入框改变时，页面显示也会改变。只是示例，并没有啥大用处。
五、推荐链接
1.剖析Vue原理&实现双向绑定MVVM
2.面试官: 实现双向绑定Proxy比defineproperty优劣如何?
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/230973.html原文链接：https://javaforall.net
