前端时间学习Vue的时候，碰到Proxy，当时就一脸蒙逼了。所以返过头来补一下相关的知识。在JavaScript中有Proxy和Reflect的两个概念。最近几天一直在学习这两个概念，今天整整这方面的相关知识点。

术语介绍

Proxy又称为代理。在现实生活中，大家对代理二字并不会太陌生，比如某产品的代理。打个比方来说，我们要买一台手机，我们不会直接到一家手机厂去买，会在手机的代理商中买。

在JavaScript中，Proxy用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种元编程，即对编程语言进行编程。

Proxy可以理解成，在目标对象之前架设一层拦截，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy这个词的原意是代理，用在这里表示由它来代理某些操作，可以译为代理器。

Reflect称为反射。它也是ES6中为了操作对象而提供的新的API，用来替代直接调用Object的方法。Reflect是一个内置的对象，它提供可拦截JavaScript操作的方法。方法与代理处理程序的方法相同。Reflect不是一个函数对象，因此它是不可构造的。

Reflect与大多数全局对象不同，Reflect没有构造函数。你不能将其与一个new运算符一起使用，或者将Reflect对象作为一个函数来调用。

简单的看一个小示例：

let target = {}
let handler = {
    get: function (target, key, receiver) {
        console.log(`Getting ${key}!`)
        return Reflect.get(target, key, receiver)
    },
    set: function (target, key, value, receiver) {
        console.log(`Setting ${key}!`)
        return Reflect.set(target, key, value, receiver)
    }
}

let proxy = new Proxy(target, handler)

console.log(proxy.name)

proxy.name = '大漠'

console.log(proxy.name)

proxy.count = 1

proxy.count++

console.log(proxy.count)

运行的结果如下：

上面代码对一个空对象架设了一层拦截，重新定义了属性的读取(get)和设置(set)行为。这里暂时先不解释具体的语法，只看运行结果。

在上面的示例中，我们看到了target、handler和trap。简单对介绍一下：

• target代表了被代理的对象。这是你需要控制对其访问的对象。它始终作为Proxy构造器的第一个参数被传入，同时它也会被传入每个trap。
• handler是一个包含了你想要拦截和处理的操作的对象。它会被作为Proxy构造器的第二个参数传入。它实现了Proxy API(比如：get，set，apply等等)。
• 一个trap代表了handler中一个被处理的函数。因此，如果要拦截get请求你需要创建一个get的trap。以此类推。

基本语法

前面我们了解了相关的术语，我们来看看他们的基本语法。首先来看看Proxy的基本语法格式：

// @param {Object} target 用来被代理的对象
// @param {Object} handler 用来设置代理的对象

let proxy = new Proxy(target, handler)

ES6原生提供Proxy构造函数，用来生成Proxy实例。在使用过程当中，Proxy都像上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

let proxy = new Proxy({}, {
    get: function(target, property) {
        return property in target ? target[property] : `Error: ${target} object not has ${property} property! `
    }
})

console.log(proxy.time)
console.log(proxy.name)
console.log(proxy.title)

proxy.time = new Date()
proxy.name = '大漠'
proxy.title = '切图仔'

console.log(proxy.time)
console.log(proxy.name)
console.log(proxy.title)

上面代码中，作来构造函数，Proxy接受两个参数。第一个参数是所要代理的目标对象（一个空对象{}），即如果没有Proxy的介入，操作原来要访问的就是这个对象；第二个参数是一个配置对象，对于每一个被代码的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。比如，上面的代码中，配置对象有一个get方法，用来拦截对目标对象属性的访问请求。get方法的两个参数分别是target（目标对象）和property（所要访问的属性）。

注意，要使得Proxy起作用，必须针对Proxy实例（上例是proxy对象）进行操作，而不是针对目标对象（上例是空对象）进行操作。

Reflect只是一个内置的对象，它提供可拦截JavaScript操作的方法。方法与代理处理程序的方法相同（稍后会介绍）。Reflect不是一个函数对象，因此它是不可构造的。

new Reflect() // 错误的写法

Reflect提供了一些静态方法，静态方法是指只能通过对象自身访问的方法：

处理器对象

处理器对象handler一共提供了14种可代理操作，每种操作的代号（属性名/方法名）和触发这种操作的方式如下：

• handler.getPrototypeOf()：在读取代理对象的原型时触发该操作，比如在执行Object.getPrototypeOf(proxy)时
• handler.setPrototypeOf()：在设置代理对象的原型时触发该操作，比如在执行Object.setprototypeOf(proxy, null)时
• handler.isExtensible()：在判断一个代理对象是否是可扩展时触发该操作，比如在执行Object.isExtensible(proxy)时
• handler.preventExtensions()：在让一个代理对象不可扩展时触发该操作，比如在执行Object.preventExtensions(proxy)时
• handler.getOwnPropertyDescriptor()：在获取代理对象某个属性的属性描述时触发该操作，比如在执行Object.getOwnPropertyDescriptor(proxy, 'foo')时
• handler.defineProperty()：在定义代理对象某个属性时的属性描述时触发该操作，比如在执行Object.defineProperty(proxy,'foo',{})时
• handler.has()：在判断代理对象是否拥有某个属性时触发该操作，比如在执行'foo' in proxy时
• handler.get()：在读取代理对象的某个属性时触发该操作，比如在执行proxy.foo时
• handler.set()：在给代理对象的某个赋值时触发该操作，比如在执行proxy.foo = 1时
• handler.deleteProperty()：在删除代理对象的某个属性时触发该操作，比如在执行delete proxy.foo时
• handler.ownKeys()：在获取代理对象的所有属性键时触发该操作，比如在执行Object.getOwnPropertyNames(proxy)时
• handler.apply()：在调用一个目标对象为函数的代理对象时触发该操作，比如在执行proxy()时
• handler.construct()：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行new proxy()时

Reflect对象拥有对应的可以控制各种元编程任务的静态方法。这些功能和Proxy一一对应。

下面的这些名称你可能看起来很眼熟（因为他们也是Object上的方法）：

• Reflect.getOwnPropertyDescriptor(..)
• Reflect.defineProperty(..)
• Reflect.getPrototypeOf(..)
• Reflect.setPrototypeOf(..)
• Reflect.preventExtension