用Object.defineProperty实现双向绑定

Object.defineProperty也称 “对象属性拦截器”
拦截器不懂？
比如你平常用 Person.name就可以获取到 Person的 name属性的值对吧，但是如果我给该 name属性设置个拦截器，那你获取的可不一定是我 name属性的值咯（嘻嘻嘻），因为我可以在拦截器里操作，并且返回给你任何值，比如下面这个例子，你永远获取不到 age的真实值，控制台只能打印 ‘你还是一朵花’。

let Person = {
name: ‘besam-juajua’,
age: ‘18’
}
Object.defineProperty(Person, ‘age’, {
enumerable: true,
configurable: false,
get () {
return ‘你还是一朵花’
}
})
console.log(Person.age);
当然，除了 get，还有 set，defineProperty接收三个参数，第一个要拦截的对象，第二个要拦截的属性，第三个是要拦截的操作（俗称 “描述”，是一个对象来的），那么可以拦截哪些操作呢？如下（一共有六个）：

value: 值 // 给改属性赋值

writable: true // 该属性是否可写

enumerable: true, // 该属性是否可枚举，不理解的话，你可以理解为 “是否可for…in”来遍历

configurable: false, // 是否可重新配置

get: function (value) { // 当获取该属性时，自动调用该方法 }

set: function (value) { // 当设置该属性时，自动调用该方法 }

相信你已经基本了解 defineProperty了，下面讲下该例子的一个典型应用（实现数据双向绑定）：
创建一个 id 为 bindData 的输入框，然后插入这片代码（你可以在控制台和input里改变 Person.name的值，查看结果）

// 创建一个将要双向绑定的对象
var Person = { name: ‘’ }

// input输入每一个字符，都将其数据传到Person，这就先实现了单向绑定
$(’#bindData’).on(‘input’,function(e){Person.name = e.target.value});

// 在控制台每改变一次Person.name,都会将新值传到input输入框
Object.defineProperty(Person,‘name’,{
enumerable: true,
configurable: true,
get: function(){return this._name||‘besam-juajua’},
set: function(value){
this._name = value;
$(’#bindData’).value = value;
console.log("Person.name = " + Person.name)
console.log("input = " + $(’#bindData’).val())
}
})
关于 Object.defineProperty, 你需要注意：
不能 writable 和 （set、get） 同时存在，有前者不能有后者，有后者不能有前者，因为同时存在的话，就互相矛盾了