JS中代理Proxy的简单使用

---

一、概念

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

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

target 参数表示所要代理的目标对象，handler 参数也是一个对象，用来定制代理拦截行为。 Proxy 对象的所有用法，都是上面这种形式，不同的只是 handler 参数的写法。其中，new Proxy() 表示生成一个Proxy实例。

下面是一个拦截读取属性行为的例子。

let proxy = new Proxy({},{
  get:function (target,key) {
    // target 是要代理的对象，key 是要获取的属性
    // 原对象的属性名称在代理之后是不会发生变化的
    return 35
  }
})

console.log(proxy.name); // 35
console.log(proxy.age);  // 35
console.log(proxy.time); // 35

上面代码中，作为构造函数，Proxy 接受两个参数。

• 第一个参数是所要代理的目标对象（上例是一个空对象），即如果没有 Proxy 的介入，操作原来要访问的就是这个对象；
• 第二个参数是一个配置对象，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。比如，上面代码中，配置对象有一个 get 方法，用来拦截对目标对象属性的访问请求。get 方法的两个参数分别是目标对象和所要访问的属性。
• 可以看到，由于拦截函数总是返回35，所以访问任何属性都得到35。

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

另外，如果 Proxy 的第二个参数 handler 没有设置任何拦截，那就等同于直接通向原对象。

var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"

// handler 是一个空对象，没有任何拦截效果，访问 proxy 就等同于访问 target

---

二、Proxy 实例的方法

Proxy 支持的拦截操作一共 13 种。下面介绍一下 get 和 set 的简单使用

1、get()

get 方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。

let person = {
  name: 'webchang'
}

let proxy = new Proxy(person, {
  get(target, key) {
    if (key in target) {
      return target[key]
    }
    return new Error('属性不存在')
  }
})

console.log(proxy.name);
console.log(proxy.age);

上面代码表示，如果访问目标对象不存在的属性，会抛出一个错误。如果没有这个拦截函数，访问不存在的属性，只会返回 undefined。

---

2、set()

set 方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。

let validator = {
  set:function (target, key, value) {
    if (key === 'age') {
      if (!Number.isInteger(value) || value > 150) {
        throw new Error('数据不合法')
      }
    }

    // 对于满足条件的 age 属性以及其他属性，直接保存
    target[key] = value;
  }
}

let proxy = new Proxy({},validator);

proxy.age = 89;
console.log(proxy.age); // 89

proxy.age = 'webchang'; // 报错
proxy.age = 200;        // 报错

上面代码中，由于设置了存值函数 set ，任何不符合要求的 age 属性赋值，都会抛出一个错误，这是数据验证的一种实现方法。

有时，我们会在对象上面设置内部属性，属性名的第一个字符使用下划线开头，表示这些属性不应该被外部使用。结合 get 和 set 方法，就可以做到防止这些内部属性被外部读写。

function invariant (key, action) {
  if (key[0] === '_') {
    throw new Error(`不应该在 ${action} 方法中访问 ${key} 属性`)
  }
}

let handler = {
  get(target, key) {
    invariant(key, 'get');
    return target[key];
  },
  set(target, key, value) {
    invariant(key, 'set');
    target[key] = value;
  }
}

let proxy = new Proxy({}, handler);

console.log(proxy._age);  // Uncaught Error: 不应该在 get 方法中访问 _age 属性
proxy._name = 'webchang'; // Uncaught Error: 不应该在 set 方法中访问 _name 属性

上面代码中，只要读写的属性名的第一个字符是下划线，一律抛错，从而达到禁止读写内部属性的目的。

---

案例

1、明星经纪人案例

// 明星对象
let star = {
  name: 'webchang',
  age: 18,
  phone: '12345'
}

// 经纪人-代理对象
let agent = new Proxy(star,{
  get:function (target,key) {
    if (key === 'phone') {
      // 返回经纪人自己的电话，明星的电话要保密
      return '56789';
    }

    if (key === 'price') {
      //明星不报价，经纪人报价
      return 120000;
    }

    //如果不是上边的 phone 和price，就直接返回 star 自己的属性，可能是 name 或者 age
    return target[key];
  },
  set:function (target,key,value) {
    // 谈合作价格
    if(key === 'customPrice') {
      if (value < 100000) {
        throw new Error('价格太低')
      } else {
        target[key] = value;
        return true;
      }
    }
  }
})

//测试
console.log(agent.name);     // webchang
console.log(agent.age);      // 18
console.log(agent.phone);    // 56789 拿到的是经纪人的电话
console.log(agent.price);    // 120000
// agent.customPrice = 9000; // 报错 Uncaught Error: 价格太低

agent.customPrice = 900000;
console.log(agent.customPrice); // 900000

2、使用代理实现数组的负数索引

function createArrayProxy(array) {

  if (!Array.isArray(array)) {
    throw new TypeError('参数不是数组');
  }

  return new Proxy(array, {
    get(target, index) {
      index = +index; // 转成数值
      return target[index < 0 ? target.length + index : index];
    },
    set(target, index, value) {
      index = +index;
      target[index < 0 ? target.length + index : index] = value;
    }
  })
}

let arr = ['a','b','c','d'];
let arrProxy = createArrayProxy(arr);

console.log(arrProxy[-1]); // d
arrProxy[-2] = 'hello';
console.log(arrProxy[-2]); // hello
console.log(arr); // ["a", "b", "hello", "d"]

---

三、参考资料

本博客介绍的内容有限，大家可以通过下边的资料继续学习：

Proxy - ECMAScript 6

前端学习交流QQ群，群内学习讨论的氛围很好，大佬云集，期待您的加入：862748629 点击加入