所谓数据代理（也叫数据劫持），指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。比较典型的是 Object.defineProperty() 和 ES2015 中新增的 Proxy 对象。另外还有已经被废弃的 Object.observe()，废弃的原因正是 Proxy 的出现，因此这里我们就不继续讨论这个已经被浏览器删除的方法了。

数据劫持最著名的应用当属双向绑定，这也是一个已经被讨论烂了的面试必考题。例如 Vue 2.x 使用的是 Object.defineProperty()(Vue 在 3.x 版本之后改用 Proxy 进行实现)。此外 immer.js 为了保证数据的 immutable 属性，使用了 Proxy 来阻断常规的修改操作，也是数据劫持的一种应用。

看看这两种方法的优劣。

Object.defineProperty

Vue 的双向绑定已经升级为前端面试的必考题，原理我就不再重复了，网上一大片。简单来说就是利用 Object.defineProperty()，并且把内部解耦为 Observer, Dep, 并使用 Watcher 相连。

Object.defineProperty() 的问题主要有三个：

不能监听数组的变化

看如下代码：

let arr = [1,2,3]
let obj = {}Object.defineProperty(obj, 'arr', {get () {console.log('get arr')return arr},set (newVal) {console.log('set', newVal)arr = newVal}
})obj.arr.push(4) // 只会打印 get arr, 不会打印 set
obj.arr = [1,2,3,4] // 这个能正常 set

数组的以下几个方法不会触发 set：

• push
• pop
• shift
• unshift
• splice
• sort
• reverse

Vue 把这些方法定义为变异方法 (mutation method)，指的是会修改原来数组的方法。与之对应则是非变异方法 (non-mutating method)，例如 filter, concat, slice 等，它们都不会修改原始数组，而会返回一个新的数组。Vue 官网有相关文档讲述这个问题。

Vue 的做法是把这些方法重写来实现数组的劫持。一个极简的实现如下：

const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
const arrayAugmentations = {};aryMethods.forEach((method)=> {// 这里是原生 Array 的原型方法let original = Array.prototype[method];// 将 push, pop 等封装好的方法定义在对象 arrayAugmentations 的属性上// 注意：是实例属性而非原型属性arrayAugmentations[method] = function () {console.log('我被改变啦!');// 调用对应的原生方法并返回结果return original.apply(this, arguments);};});let list = ['a', 'b', 'c'];
// 将我们要监听的数组的原型指针指向上面定义的空数组对象
// 这样就能在调用 push, pop 这些方法时走进我们刚定义的方法，多了一句 console.log
list.__proto__ = arrayAugmentations;
list.push('d');  // 我被改变啦！// 这个 list2 是个普通的数组，所以调用 push 不会走到我们的方法里面。
let list2 = ['a', 'b', 'c'];
list2.push('d');  // 不输出内容

必须遍历对象的每个属性

使用 Object.defineProperty() 多数要配合 Object.keys() 和遍历，于是多了一层嵌套。如：

Object.keys(obj).forEach(key => {Object.defineProperty(obj, key, {// ...})
})

必须深层遍历嵌套的对象

所谓的嵌套对象，是指类似

let obj = {info: {name: 'eason'}
}

如果是这一类嵌套对象，那就必须逐层遍历，直到把每个对象的每个属性都调用 Object.defineProperty() 为止。 Vue 的源码中就能找到这样的逻辑 (叫做 walk 方法)。 

Proxy

Proxy 在 ES2015 规范中被正式加入，它的支持度虽然不如 Object.defineProperty()，但其实也基本支持了 (除了 IE 和 Opera Mini 等少数浏览器，数据来自 caniuse)，所以使用起来问题也不太大。

针对对象

在数据劫持这个问题上，Proxy 可以被认为是 Object.defineProperty() 的升级版。外界对某个对象的访问，都必须经过这层拦截。因此它是针对 整个对象，而不是 对象的某个属性，所以也就不需要对 keys 进行遍历。这解决了上述 Object.defineProperty() 的第二个问题。

let obj = {name: 'Eason',age: 30
}let handler = {get (target, key, receiver) {console.log('get', key)return Reflect.get(target, key, receiver)},set (target, key, value, receiver) {console.log('set', key, value)return Reflect.set(target, key, value, receiver)}
}
let proxy = new Proxy(obj, handler)proxy.name = 'Zoe' // set name Zoe
proxy.age = 18 // set age 18

如上代码，Proxy 是针对 obj 的。因此无论 obj 内部包含多少个 key ，都可以走进 set。(省了一个 Object.keys() 的遍历)

另外这个 Reflect.get 和 Reflect.set 可以理解为类继承里的 super，即调用原来的方法。详细的 Reflect 可以查看这里，或者查看js专栏，本文不做展开。

支持数组
 

let arr = [1,2,3]let proxy = new Proxy(arr, {get (target, key, receiver) {console.log('get', key)return Reflect.get(target, key, receiver)},set (target, key, value, receiver) {console.log('set', key, value)return Reflect.set(target, key, value, receiver)}
})proxy.push(4)
// 能够打印出很多内容
// get push     (寻找 proxy.push 方法)
// get length   (获取当前的 length)
// set 3 4      (设置 proxy[3] = 4)
// set length 4 (设置 proxy.length = 4)

Proxy 不需要对数组的方法进行重载，省去了众多 hack，减少代码量等于减少了维护成本，而且标准的就是最好的。

嵌套支持

本质上，Proxy 也是不支持嵌套的，这点和 Object.defineProperty() 是一样的。因此也需要通过逐层遍历来解决。Proxy 的写法是在 get 里面递归调用 Proxy 并返回，代码如下：

let obj = {info: {name: 'eason',blogs: ['webpack', 'babel', 'cache']}
}let handler = {get (target, key, receiver) {console.log('get', key)// 递归创建并返回if (typeof target[key] === 'object' && target[key] !== null) {return new Proxy(target[key], handler)}return Reflect.get(target, key, receiver)},set (target, key, value, receiver) {console.log('set', key, value)return Reflect.set(target, key, value, receiver)}
}
let proxy = new Proxy(obj, handler)// 以下两句都能够进入 set
proxy.info.name = 'Zoe'
proxy.info.blogs.push('proxy')

let current = 0
Object.defineProperty(window, 'a', {get () {current++return current}
})
console.log(a === 1 && a === 2 && a === 3) // true

let foo = {foo () {console.log('foo')}
}let bar = {bar () {console.log('bar')}
}
// 正常状态下，对象只能继承一个对象，要么有 foo()，要么有 bar()
let sonOfFoo = Object.create(foo);
sonOfFoo.foo();     // foo
let sonOfBar = Object.create(bar);
sonOfBar.bar();     // bar// 黑科技开始
let sonOfFooBar = new Proxy({}, {get (target, key) {return target[key] || foo[key] || bar[key];}
})
// 我们创造了一个对象同时继承了两个对象，foo() 和 bar() 同时拥有
sonOfFooBar.foo();   // foo 有foo方法，继承自对象foo
sonOfFooBar.bar();   // bar 也有bar方法，继承自对象bar

function getObject(rawObj, privateKeys) {return new Proxy(rawObj, {get (target, key, receiver) {if (privateKeys.indexOf(key) !== -1) {throw new ReferenceError(`${key} 是私有属性，不能访问。`)}return target[key]}})
}let rawObj = {name: 'Zoe',age: 18,isFemale: true
}
let obj = getObject(rawObj, ['age'])console.log(obj.name) // Zoe
console.log(obj.age) // 报错

let person = {name: 'Eason',age: 30
}let handler = {set (target, key, value, receiver) {if (key === 'name' && typeof value !== 'string') {throw new Error('用户姓名必须是字符串类型')}if (key === 'age' && typeof value !== 'number') {throw new Error('用户年龄必须是数字类型')}return Reflect.set(target, key, value, receiver)}
}let personForUser = new Proxy(person, handler)personForUser.name = 'Zoe' // OK
personForUser.age = '18' // 报错

// 发送请求代码省略，总之获取到了 response 对象了。
if (!response.data) {console.log('响应体没有信息')return
} else if (!response.data.message) {console.log('后端没有返回信息')return
} else if (!response.data.message.from || !response.data.message.text) {console.log('后端返回的信息不完整')return
} else {console.log(`你收到了来自 ${response.data.message.from} 的信息：${response.data.message.text}`)
}

// 故意设置一个错误的 data1，即 response.data = undefined
let response = {data1: {message: {from: 'Eason',text: 'Hello'}}
}// 也可以根据 key 的不同给出更友好的提示
let dealError = key => console.log('Error key', key)let isOK = obj => !obj['HAS_ERROR']let handler = {get (target, key, receiver) {// 基本类型直接返回if (target[key] !== undefined && typeof target[key] !== 'object') {return Reflect.get(target, key, receiver)}// 如果是 undefined，把访问的的 key 传递到错误处理函数 dealError 里面if (!target[key]) {if (!target['HAS_ERROR']) {dealError(key)}return new Proxy({HAS_ERROR: true}, handler)}// 正常的话递归创建 Proxyreturn new Proxy(target[key], handler)}
}let resp = new Proxy(response, handler)if (isOK(resp.data.message.text) && isOK(resp.data.message.from)) {console.log(`你收到了来自 ${response.data.message.from} 的信息：${response.data.message.text}`)
}