Proxy And Reflect

Proxy

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

代理对象

let handleer = {
    get: function (target, propKey, receiver) {
        console.log(target, propKey, receiver)
        console.log(target[propKey])
    },
    set: function (target, propKey, newValue, receiver) {
        target[propKey] = newValue
    }
}

let proxy = new Proxy({
    name: 'akara',
}, handler)

proxy.name
// 输出
// {name: 'akara'}   "name"   Proxy {name: 'akara'}
// 'akara'

代理函数

handler = {
    get: function (target, propKey, receiver) {
        return target[propKey]
    },

    apply: function (target, myThis, args) {
        console.log(target, myThis, args)
        target.apply(myThis, args)
    },

    construct(target, args) {
        return new target(...args)
    }
}

let proxy = new Proxy(function (a, b) {
    this.name = a
    this.age = b
}, handler)

proxy('akara', 20) 
// ƒ (a, b) {
//     this.name = a
//     this.age = b
//     console.log(a, b)
// } undefined (2) ["akara", 20]

proxy.call({}, 'akara', 20) 
// ƒ (a, b) {
//     this.name = a
//     this.age = b
//     console.log(a, b)
// } {} (2) ["akara", 20]

get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。
set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。
apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。
其他的拦截操作

Reflect

Reflect对象的设计目的有这样几个。

将许多Object上的方法，如Object.defineProperty放在了Reflect上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。也就是说，从Reflect对象上可以拿到语言内部的方法。

修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。

// 老写法
try {
  Object.defineProperty(target, property, attributes);
  // success
} catch (e) {
  // failure
}

// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}

让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。
```
// 老写法
'assign' in Object // true
delete obj.name

// 新写法
Reflect.has(Object, 'assign') // true
Reflect.deleteProperty(obj, 'name')
```

Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。

// 老写法
Proxy(target, {
    set: function(target, name, value, receiver) {
        target[name] = value
    }
})

// 新写法
Proxy(target, {
    set: function(target, name, value, receiver) {
        Reflect.set(target, name, value, receiver)
    }
})

下面是另一个例子

var loggedObj = new Proxy(obj, {
  get(target, name) {
    console.log('get', target, name);
    return Reflect.get(target, name);
  },
  deleteProperty(target, name) {
    console.log('delete' + name);
    return Reflect.deleteProperty(target, name);
  },
  has(target, name) {
    console.log('has' + name);
    return Reflect.has(target, name);
  }
});

Reflect对象一共有 13 个静态方法。

Reflect.apply(target, thisArg, args)
Reflect.construct(target, args)
Reflect.get(target, name, receiver)
Reflect.set(target, name, value, receiver)
Reflect.defineProperty(target, name, desc)
Reflect.deleteProperty(target, name)
Reflect.has(target, name)
Reflect.ownKeys(target)
Reflect.isExtensible(target)
Reflect.preventExtensions(target)
Reflect.getOwnPropertyDescriptor(target, name)
Reflect.getPrototypeOf(target)
Reflect.setPrototypeOf(target, prototype)

除去一些Object上已经部署的方法，如Object.getPrototypeOf对应的Reflect.getPrototypeOf。Reflect上还部署了一些有意思的方法。

Reflect.apply

Reflect.apply(function (a, b) {
    console.log(this.name)
    console.log(a + b)
}, {name: 'akara'}, [1, 2])

Reflect.construct

function People(name) {
    this.name = name
}

Reflect.construct(People, ['akara'])

Reflect.ownKeys

Reflect.ownKeys方法用于返回对象的所有属性，基本等同于Object.getOwnPropertyNames与Object.getOwnPropertySymbols之和。

let obj = {
    [Symbol('name')]: 'akara',
    age: 21
}

Object.getOwnPropertyNames(obj)
// ["age"]

Object.getOwnPropertySymbols(obj)
// [Symbol(name)]

Reflect.ownKeys(obj)
// ["age", Symbol(name)]

Proxy And Reflect

Proxy​

代理对象​

代理函数​

Reflect​

Reflect.apply​

Reflect.construct​

Reflect.ownKeys​