监听一个变量的变化，当变量变化时执行某些操作，这类似现在流行的前端框架(例如 React、Vue等)中的数据绑定功能，在数据更新时自动更新 DOM 渲染，那么如何实现数据绑定喃?

本文给出两种思路：

• ES5 的 Object.defineProperty
• ES6 的 Proxy

ES5 的 Object.defineProperty

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

——MDN

1. Object.defineProperty(obj, prop, descriptor) 

其中：

• obj ：要定义属性的对象
• prop ：要定义或修改的属性的名称或 Symbol
• descriptor ：要定义或修改的属性描述符

1. var user = {  
2.     name: 'sisterAn'  
3. } 
4.  
5. Object.defineProperty(user, 'name', { 
6.     enumerable: true, 
7.     configurable:true, 
8.     set: function(newVal) { 
9.         this._name = newVal  
10.         console.log('set: ' + this._name) 
11.     }, 
12.     get: function() { 
13.         console.log('get: ' + this._name) 
14.         return this._name 
15.     } 
16. }) 
17.  
18. user.name = 'an' // set: an 
19. console.log(user.name) // get: an 

如果是完整的对变量的每一个子属性进行监听：

1. // 监视对象 
2. function observe(obj) { 
3.    // 遍历对象，使用 get/set 重新定义对象的每个属性值 
4.     Object.keys(obj).map(key => { 
5.         defineReactive(obj, key, obj[key]) 
6.     }) 
7. } 
8.  
9. function defineReactive(obj, k, v) { 
10.     // 递归子属性 
11.     if (typeof(v) === 'object') observe(v) 
12.      
13.     // 重定义 get/set 
14.     Object.defineProperty(obj, k, { 
15.         enumerable: true, 
16.         configurable: true, 
17.         get: function reactiveGetter() { 
18.             console.log('get: ' + v) 
19.             return v 
20.         }, 
21.         // 重新设置值时，触发收集器的通知机制 
22.         set: function reactiveSetter(newV) { 
23.             console.log('set: ' + newV) 
24.             v = newV 
25.         }, 
26.     }) 
27. } 
28.  
29. let data = {a: 1} 
30. // 监视对象 
31. observe(data) 
32. data.a // get: 1 
33. data.a = 2 // set: 2 

通过 map 遍历，通过深度递归监听子子属性

注意， Object.defineProperty 拥有以下缺陷：

• IE8 及更低版本 IE 是不支持的
• 无法检测到对象属性的新增或删除
• 如果修改数组的 length ( Object.defineProperty 不能监听数组的长度)，以及数组的 push 等变异方法是无法触发 setter 的

对此，我们看一下 vue2.x 是如何解决这块的?