深入浅出 proxy 系列之一：Proxy 是什么

1. 理解proxy

1.1 类还是函数

proxy 是 ES6 中新增的一个函数，也可以叫类，但是 js 中一切皆是函数，即使使用 class 定义的类，最终也是函数，所以我们还是称其为函数吧，虽然我更喜欢称其为类，因为这更符合我后端背景

1.2 为什么没有原型对象

console.log(Proxy.prototype); // undefined

我只是好奇试了一下，果然发现了特殊之处：作为一个构造函数，为什么没有原型对象？

这是 ECMA 的官方说明

由于 Proxy 构造出来的实例对象是对目标对象的一个代理，所以 Proxy 在构造过程中是不需要 prototype 进行初始化的

因为其他构造函数之所以需要 prototype，是因为构造出来的对象需要一些初始化的成员，所以将这些成员定义到了 protoype 上

Proxy 只是用来代理其他对象，就好比平时的烟酒代理，其本身并不具备生产能力，所以啥也没有任何的设备和工艺，任何人有个门脸都可以开一个

1.3 确实是个代理

Proxy 确实很多方面，都跟烟酒代理一样

比如茅台酒的代理，有了这个代理，我们就不能直接从茅台公司拿酒，必须通过这个代理

代理说多少钱，就是多少钱，代理说没有就没有

Proxy 代理的是一个对象，这个对象被代理之后，我们就不能直接访问这个对象了，必须通过代理访问。

比如像获取某个属性的值，代理说没有就没有，代理想给你返回啥值就返回啥值

代码演示

// 创建了一个对象，将来被proxy代理
let person = {
  name: 'yhb'
}
// 创建了一个对象，当通过代理访问目标对象时，此对象中的对应
// 方法会执行
let handler = {
  get (target, prop) {
    return '哈哈，我是代理，我说什么价就是什么价'
  }
}
// 创建代理，指定代理对象和代理对象操作对象
let py1 = new Proxy(person, handler)
console.log(py1.name);
console.log(py1.age);

当通过代理访问 person 对象的 name 和 age  属性时，会触发 handler 对象的 get 属性指定的函数

此函数有两个参数

• target ：目标代理对象，也就是 person
• prop：访问的属性

此函数返回什么，外界最终获取的就是什么

返回属性的值

如果想返回 person 对象中的 nage 和 age 属性实际的值，只需要将代码改成这样

 get (target, prop) {
    return target[prop]
  }

什么都不返回呢？

如果 get 函数改成这样

get (target, prop) {

  }

则访问任何属性的结果都为 undefined

总结：是不是很像现实中的代理，或者汽车 4S 店

• 不管你要什么，我说有就有，说没有就没有
• 我说多少钱就是多少钱

1.4 为什么要有代理

原因上，与以前的 Object.defineProperty 方法一样，就是不希望用户直接访问某个对象，直接操作对象的某个成员，通过代理，用户的访问首先被代理拦截，拦截住后就可以对数据进行处理，比如验证等