本文来自我的小伙伴小帅，从JS基础出发一起学习JS，全网首发
对象的属性分为：数据属性和访问器属性。如果要修改对象的默认特性，必须使用Object.defineProperty方法，它接收三个参数：属性所在的对象、属性的名字、一个描述符对象。
下面是MDN上面的解释：
数据属性：
数据属性包含一个数据值的位置，在这个位置可以读取和写入值，数据属性有4个描述其行为的特性。
· Configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。默认值为true。
· Enumberable：表示能否通过for-in循环返回属性。默认值为true。
· Writable：表示能否修改属性的值。默认值为true。
· Value：包含这个属性的数据值。读取属性值的时候，从这个位置读；定稿属性值的时候，把新值保存在这个位置。默认值为true。
访问器属性：
访问器属性不包含数据值；它们包含一对getter、setter函数（两个函数不是必须的）。在读取访问器属性时，会调用getter函数，这个函数负责返回有效的值；在写入访问器属性时，会调用setter函数并传入新值，这个函数负责决定如何处理数据。访问器属性有如下4个特性。
· Configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为数据属性。默认值为true。
· Enumerable：表示能否通过for-in循环返回属性。默认值为true。
· Get：在读取属性时调用的函数。默认值为undefined。
· Set：在写入属性时调用的函数。默认值为undefined。
利用访问器属性实现简单的数据双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="input">
<div id="innerText"></div>
<script>
let obj = {
name:'小帅',
age:'22'
}
const input = document.getElementById('input');
const text = document.getElementById('innerText');
Object.defineProperty(obj,'nickName',{
configurable:true,
enumerable:true,
get: function() {
console.log('触发get')
console.log(obj)
return input.value
},
set: function(val) {
console.log('触发set')
console.log(val)
text.innerHTML = val
input.value = val
}
})
// console.log(obj)
input.addEventListener('keyup', function(e){
console.log(e.target.value)
obj.nickName = e.target.value;
});
document.getElementById('innerText').innerHTML = obj.name
</script>
</body>
</html>Input输入内容, div的内容也会随着改变
手动修改对象obj也会 同步到input和div的内容