Proxy 代理对象

proxy是EcmaScript 2015 中引入的一个内置模块，可以通过Proxy来实现对于对象的代理劫持操作，用proxy来包装一个变量，然后在读取或者对这个变量进行改变的时候可以进行一系列的操作。

let proxy = new Proxy(target, handler)

• target —— 是要包装的对象，可以是任何东西，包括函数。
• handler —— 钩子函数，在这里写入当读取或者改变变量时的操作，可以用return返回一个值，当读取或者改变target对象时会执行钩子中的操作，返回这个值。

如果不加钩子的proxy代理

let target = {};
let proxy = new Proxy(target, {}); // 空的handler对象

proxy.test = 5; // 写入 Proxy 对象 (1)
alert(target.test); // 返回 5，test属性出现在了 target 上！

alert(proxy.test); // 还是 5，我们也可以从 proxy 对象读取它 (2)

for(let key in proxy) alert(key); // 返回 test，迭代也正常工作！ (3)

钩子中的方法

• get(): 拦截对象属性的读取
• set(): 拦截对象设置属性,返回一个布尔值
• has(): 拦截 propKey in proxy 的操作，返回一个布尔值
• ownKeys(): 拦截对象属性遍历，返回一个数组
• deleteProperty()：拦截 delete proxy[propKey] 的操作，返回一个布尔值()
• apply()：拦截函数的调用，call 和 apply 操作
• construct()：拦截 new 命令，返回一个对象: 拦截 new 命令，返回一个对象 

get()方法

例子1:

const obj = {
  name: 'mi',
};

  const proxy = new Proxy(obj, {
   get(target, key) {
        console.log('属性为' + key);
        return target[key]
   },
     });

   proxy.name
   console.log("读取proxy值为"+proxy.name)

因为get值返回的值是target[key]也就是mi，所以调用proxy.name时拿到的值也是mi

例子2:

如果读取一个变量它不存在的值会返回undefined，但是如果不想让它返回undefined，想让它返回一个默认值可以用到get(),比如一个字典，如果短语能翻译就返回译文，不能翻译就返回这个短语本身。

let dictionary = {
  'Hello': '你好',
  'bye': '再见'
};

dictionary = new Proxy(dictionary, {
  get(target, phrase) { // 拦截读取属性操作
    if (phrase in target) { //如果字典包含该短语
      return target[phrase]; // 返回译文
    } else {
      // 否则返回未翻译的短语
      return phrase;
    }
  }
});

console.log( dictionary['Hello'] ); // 返回翻译后的短语"你好"
console.log( dictionary['hi']); // 字典中没有没有返回未翻译的短语"hi"

在读取对象dictionary时就会进行get中的操作，然后返回操作后的值。