[关闭]
@gyyin 2020-03-14T14:39:31.000000Z 字数 14220 阅读 289

深入浅出 ES6 Proxy

慕课专栏

只听空相大声道：“请道长立即禀报张真人，事在紧急，片刻延缓不得！”那道人道：“大师来得不巧，敝师祖自去岁坐关，至今一年有余，本派弟子亦已久不见他老人家慈范。”

在武侠小说中，经常看到这样的桥段。某位武林人士前来拜访德高望重的帮派掌门，往往需要经过手下弟子的通报。如果掌门外出或者不想见来人，就会让弟子婉拒。

今天要讲的 Proxy 和这个有异曲同工之妙。顾名思义，Proxy 的意思是代理，作用是为其他对象提供一种代理以控制对这个对象的访问。

本文会涉及到 Proxy 和 Reflect、Function、扩展运算符 等知识，主要以实践为主，对语法不会进行详细地讲解，建议配合阮一峰的 ES6入门 中相关章节服用。

1. 元编程

Proxy 常常被用于修改某些操作的默认行为，这种将代码视为数据，通过编写代码来生成代码，使程序获得额外能力的方式叫做元编程。更简单地理解起来，那就是“一段自动写程序的程序”。
在 JavaScript 中，eval 和 new Function 就是两种典型的用于元编程的特性。而 ES6 新出现的 Proxy 也是可以进行元编程的特性。
比如下面这段代码，通过 eval 自动生成一句声明 person 变量的语句：

  1. eval("var person = 'ygy'")

在 Underscore 的 template 方法实现中，就使用到 new Function 来将传入的数据和 JavaScript 代码字符串解析成一段可执行的脚本。

  1. // source是收集的模板语法
  2. source = "var __p = '';" + source + 'return __p;'
  3.         // 使用with可以修改作用域
  4.         if (!settings.variable) source = "with(obj||{}) {\n" + source + "\n}"
  5.         var render = new Function(settings.variable || "obj", source);

如果对如何编写模板感兴趣，可以参考一下我的这篇文章： 60行代码实现简单模板语法

2. 语法

Proxy 一般是用来架设在目标对象之上的一层拦截，来实现对目标对象访问和修改的控制。Proxy 是一个构造函数，使用的时候需要配合 new 操作符，直接调用会报错。

image.png-21.9kB

Proxy 构造函数接收两个参数，第一个参数是需要拦截的目标对象，这个对象只可以是对象、数组或者函数；第二个参数则是一个配置对象，提供了拦截方法，如果这个配置对象为空对象，那么返回的 Proxy 实例就是原来的目标对象。

  1. const person = {
  2.     name: 'tom'
  3. }
  4. // 如果第二个参数为空对象
  5. const proxy = new Proxy(person, {});
  6. proxy === person; // true
  8. // 第二个参数不为空
  9. const proxy = new Proxy(person, {
  10.     get(target, prop) {
  11.         console.log(`${prop} is ${target[prop]}`);
  12.         return target[prop];
  13.     }
  14. })
  15. proxy.name // 'name is tom'

2.1 API

Proxy 支持13种拦截操作，这里重点介绍其中四种。

  1. get(target, prop, receiver)：拦截对象属性的访问。
  2. set(target, prop, value, receiver)：拦截对象属性的设置，最后返回一个布尔值。
  3. apply(target, object, args)：用于拦截函数的调用，比如 proxy()。
  4. construct(target, args)：方法用于拦截 new 操作符，比如 new proxy()。为了使 new操作符在生成的Proxy对象上生效，用于初始化代理的目标对象自身必须具有[[Construct]]内部方法（即 new target 必须是有效的）。
  5. has(target, prop)：拦截例如 prop in proxy的操作，返回一个布尔值。
  6. deleteProperty(target, prop)：拦截例如 delete proxy[prop] 的操作，返回一个布尔值。
  7. ownKeys(target)：拦截 Object.getOwnPropertyNames(proxy)、Object.keys(proxy)、for in 循环等等操作，最终会返回一个数组。
  8. getOwnPropertyDescriptor(target, prop)：拦截 Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
  9. defineProperty(target, propKey, propDesc)：拦截 Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
  10. preventExtensions(target)：拦截 Object.preventExtensions(proxy)，返回一个布尔值。
  11. getPrototypeOf(target)：拦截 Object.getPrototypeOf(proxy)，返回一个对象。
  12. isExtensible(target)：拦截 Object.isExtensible(proxy)，返回一个布尔值。
  13. setPrototypeOf(target, proto)：拦截 Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。

image_1e3br0h5t2kvb5q5mo1r8t79c9.png-127.3kB

2.2 Proxy vs Object.defineProperty

在 Proxy 出现之前，JavaScript 中就提供过 Object.defineProperty，允许对对象的 getter/setter 进行拦截，那么两者的区别在哪里呢？

  1. Object.defineProperty 无法一次性监听对象所有属性，必须遍历或者递归来实现。

    1. let girl = {
    2.  name: "ltt",
    3.  age: 22
    4. }
    5. /* Proxy 监听整个对象*/
    6. girl = new Proxy(girl, {
    7.  get() {}
    8.  set() {}
    9. })
    10. /* Object.defineProperty */
    11. Object.keys(girl).forEach(key => {
    12.  Object.defineProperty(girl, key, {
    13.    set() {},
    14.    get() {}
    15.  })
    16. })

  2. Proxy 可以监听到新增加的属性，而 Object.defineProperty 不可以，需要你手动再去做一次监听。因此，在 vue 中想动态监听属性，一般用 Vue.set(girl, "hobby", "game") 这种形式来添加。

    1. let girl = {
    2.  name: "ltt",
    3.  age: 22
    4. }
    5. /* Proxy 监听整个对象*/
    6. girl = new Proxy(girl, {
    7.  get() {}
    8.  set() {}
    9. })
    10. /* Object.defineProperty */
    11. Object.keys(girl).forEach(key => {
    12.  Object.defineProperty(girl, key, {
    13.    set() {},
    14.    get() {}
    15.  })
    16. });
    17. /* Proxy 生效，Object.defineProperty 不生效 */
    18. girl.hobby = "game";

  3. Proxy 可以监听数组的变化，Object.defineProperty 无法对 push、shift、pop、unshift 等方法进行响应。

    1. const arr = [1, 2, 3];
    2. /* Proxy 监听数组*/
    3. arr = new Proxy(arr, {
    4.  get() {},
    5.  set() {}
    6. })
    7. /* Object.defineProperty */
    8. arr.forEach((item, index) => {
    9.  Object.defineProperty(arr, `${index}`, {
    10.    set() {},
    11.    get() {}
    12.  })
    13. })
    15. arr[0] = 10; // 都生效
    16. arr[3] = 10; // 只有 Proxy 生效
    17. arr.push(10); // 只有 Proxy 生效

    对于新增加的数组项，Object.defineProperty 依旧无法监听到。因此，在 mobx 中为了监听数组的变化，默认将数组长度设置为1000，监听 0-999 的属性变化。

    1. /* mobx 的实现 */
    2. const arr = [1, 2, 3];
    3. /* Object.defineProperty */
    4. [...Array(1000)].forEach((item, index) => {
    5.  Object.defineProperty(arr, `${index}`, {
    6.    set() {},
    7.    get() {}
    8.  })
    9. });
    10. arr[3] = 10; // 生效
    11. arr[4] = 10; // 生效

    如果想要监听到 push、shift、pop、unshift等方法，该怎么做呢？在 vue 和 mobx 中都是通过重写原型实现的。

    在定义变量的时候，判断其是否为数组，如果是数组，那么就修改它的 __proto__，将其指向 subArrProto，从而实现重写原型链。

    1. const arrayProto = Array.prototype;
    2. const subArrProto = Object.create(arrayProto);
    3. const methods = ['pop', 'shift', 'unshift', 'sort', 'reverse', 'splice', 'push'];
    4. methods.forEach(method => {
    5.  /* 重写原型方法 */
    6.  subArrProto[method] = function() {
    7.    arrayProto[method].call(this, ...arguments);
    8.  };
    9.  /* 监听这些方法 */
    10.  Object.defineProperty(subArrProto, method, {
    11.    set() {},
    12.    get() {}
    13.  })
    14. })
  4. Proxy 提供了13种拦截方法，包括拦截 constructor、apply、deleteProperty 等等，而 Object.defineProperty 只有 get 和 set。
  5. Object.defineProperty 的兼容性更好，Proxy 是新出的 API，兼容性还不够好。

2.3 get

get 方法用来拦截对目标对象属性的读取，它接收三个参数，分别是目标对象、属性名和 Proxy 实例本身。
基于 get 方法的特性，可以实现很多实用的功能，比如在对象里面设置私有属性（一般定义属性我们以 _ 开头表明是私有属性） ，实现禁止访问私有属性的功能。

  1. const person = {
  2.     name: 'tom',
  3.     age: 20,
  4.     _sex: 'male'
  5. }
  6. const proxy = new Proxy(person, {
  7.     get(target, prop) {
  8.         if (prop[0] === '_') {
  9.             throw new Error(`${prop} is private attribute`);
  10.         }
  11.         return target[prop]
  12.     }
  13. })
  14. proxy.name; // 'tom'
  15. proxy._sex; // _sex is private attribute

还可以给对象中未定义的属性设置默认值。通过拦截对属性的访问，如果是 undefined，那就返回最开始设置的默认值。

  1. let person = {
  2.     name: 'tom',
  3.     age: 20
  4. }
  5. const defaults = (obj, initial) => {
  6.     return new Proxy(obj, {
  7.         get(target, prop) {
  8.             if (prop in target) {
  9.                 return target[prop]
  10.             }
  11.             return initial
  12.         }
  13.     })
  14. }
  15. person = defaults(person, 0);
  16. person.name // 'tom'
  17. person.sex // 0
  18. person = defaults(person, null);
  19. person.sex // null

2.4 set

set 方法可以拦截对属性的赋值操作，一般来说接收四个参数，分别是目标对象、属性名、属性值、Proxy 实例。
下面是一个 set 方法的用法，在对属性进行赋值的时候打印出当前状态。

  1. const proxy = new Proxy({}, {
  2.     set(target, key, value, receiver) {
  3.         console.log(`${key} has been set to ${value}`);
  4.         Reflect.set(target, key, value);
  5.     }
  6. })
  7. proxy.name = 'tom'; // name has been setted ygy

第四个参数 receiver 则是指当前的 Proxy 实例，在下例中指代 proxy。

  1. const proxy = new Proxy({}, {
  2.     set(target, key, value, receiver) {
  3.         if (key === 'self') {
  4.             Reflect.set(target, key, receiver);
  5.         } else {
  6.             Reflect.set(target, key, value);
  7.         }
  8.     }
  9. })
  10. proxy.self === proxy; // true

如果你写过表单验证，也许会被各种验证规则搞得很头疼。使用 Proxy 可以在填写表单的时候，拦截其中的字段进行格式校验。
通常来说，大家都会用一个对象来保存验证规则，这样会更容易对规则进行扩展。

  1. // 验证规则
  2. const validators = {
  3.     name: {
  4.         validate(value) {
  5.             return value.length > 6;
  6.         },
  7.         message: '用户名长度不能小于六'
  8.     },
  9.     password: {
  10.         validate(value) {
  11.             return value.length > 10;
  12.         },
  13.         message: '密码长度不能小于十'
  14.     },
  15.     moblie: {
  16.         validate(value) {
  17.             return /^1(3|5|7|8|9)[0-9]{9}$/.test(value);
  18.         },
  19.         message: '手机号格式错误'
  20.     }
  21. }

然后编写验证方法，用 set 方法对 form 表单对象设置属性进行拦截，拦截的时候用上面的验证规则对属性值进行校验，如果校验失败，则弹窗提示。

  1. // 验证方法
  2. function validator(obj, validators) {
  3.     return new Proxy(obj, {
  4.         set(target, key, value) {
  5.             const validator = validators[key]
  6.             if (!validator) {
  7.                 target[key] = value;
  8.             } else if (validator.validate(value)) {
  9.                 target[key] = value;
  10.             } else {
  11.                 alert(validator.message || "");
  12.             }
  13.         }
  14.     })
  15. }
  16. let form = {};
  17. form = validator(form, validators);
  18. form.name = '666'; // 用户名长度不能小于六
  19. form.password = '113123123123123';

但是，如果这个属性已经设置为不可写，那么 set 将不会生效（但 set 方法依然会执行）。

  1. const person = {
  2.     name: 'tom'
  3. }
  4. Object.defineProperty(person, 'name', {
  5.     writable: false
  6. })
  7. const proxy = new Proxy(person, {  
  8.     set(target, key, value) {
  9.         console.log(666)
  10.         target[key] = 'jerry'
  11.     }
  12. })
  13. proxy.name = '';

2.5 apply

apply 一般是用来拦截函数的调用，它接收三个参数，分别是目标对象、上下文对象（this）、参数数组。

  1. function test() {
  2.     console.log('this is a test function');
  3. }
  4. const func = new Proxy(test, {
  5.     apply(target, context, args) {
  6.         console.log('hello, world');
  7.         target.apply(context, args);
  8.     }
  9. })
  10. func();

通过 apply 方法可以获取到函数的执行次数，也可以打印出函数执行消耗的时间，常常可以用来做性能分析。

  1. function log() {}
  2. const func = new Proxy(log, {
  3.     _count: 0,
  4.     apply(target, context, args) {
  5.         target.apply(context, args);
  6.         console.log(`this function has been called ${++this._count} times`);
  7.     }
  8. })
  9. func()

2.6 construct

construct 方法用来拦截 new 操作符。它接收三个参数，分别是目标对象、构造函数的参数列表、proxy 对象，最后需要返回一个对象。
使用方式可以参考下面这么一个例子：

  1. function Person(name, age) {
  2.     this.name = name;
  3.     this.age = age;
  4. }
  5. const P = new Proxy(Person, {
  6.     construct(target, args, newTarget) {
  7.         console.log('construct');
  8.         return new target(...args);
  9.     }
  10. })
  11. const p = new P('tom', 21); // 'construct'

我们知道，如果构造函数没有返回任何值或者返回了原始类型的值，那么默认返回的就是 this，如果返回的是一个引用类型的值，那么最终 new 出来的就是这个值。
因此，你可以代理一个空函数，然后返回一个新的对象。

  1. function noop() {}
  2. const Person = new Proxy(noop, {
  3.     construct(target, args, newTarget) {
  4.         return {
  5.             name: args[0],
  6.             age: args[1]
  7.         }
  8.     }
  9. })
  10. const person = new Person('tom', 21); // { name: 'tom', age: 21 }

3. Proxy 可以做哪些有意思的事情？

Proxy 的使用场景非常广泛，可以用来拦截对象的 set/get 从而实现数据响应。在 Vue3 和 Mobx5 中都使用了 Proxy 代替 Object.defineProperty。那么接下来就来看看 Proxy 都可以做哪些事情吧。

3.1 骚操作：代理类

使用 construct 可以代理类，你可能会好奇，Proxy 不是只能代理 Object 类型吗？类该怎么代理呢？
其实类的本质也是构造函数和原型（对象）组成的，完全可以对其进行代理。
考虑有这么一个需求，需要拦截对属性的访问，以及计算原型上函数的执行时间，这样该怎么去做就比较清晰了。可以对属性设置 get 拦截，对原型函数设置 apply 拦截。
先考虑对下面的 Person 类的原型函数进行拦截。使用 Object.getOwnPropertyNames 来获取原型上面所有的函数，遍历这些函数并对其使用 apply 拦截。

  1. class Person {
  2.   constructor(name, age) {
  3.     this.name = name;
  4.     this.age = age;
  5.   }
  6.   say() {
  7.     console.log(`my name is ${this.name}, and my age is ${this.age}`)
  8.   }
  9. }
  10. const prototype = Person.prototype;
  11. // 获取 prototype 上所有的属性名
  12. Object.getOwnPropertyNames(prototype).forEach((name) => {
  13.     Person.prototype[name] = new Proxy(prototype[name], {
  14.         apply(target, context, args) {
  15.             console.time();
  16.             target.apply(context, args);
  17.             console.timeEnd();
  18.         }
  19.     })
  20.  })

拦截了原型函数后，开始考虑拦截对属性的访问。前面刚刚讲过 construct 方法的作用，那么是不是可以在 new 的时候对所有属性的访问设置拦截呢？
没错，由于 new 出来的实例也是个对象，那么完全可以对这个对象进行拦截。

  2. new Proxy(Person, {
  3.     // 拦截 construct 方法
  4.     construct(target, args) {
  5.         const obj = new target(...args);
  6.         // 返回一个代理过的对象
  7.         return new Proxy(obj, {
  8.             get(target, prop) {
  9.                 console.log(`${target.name}.${prop} is being getting`);
  10.                 return target[prop]
  11.             }
  12.         })
  13.     }
  14. })

所以，最后完整的代码如下：

  1. class Person {
  2.   constructor(name, age) {
  3.     this.name = name;
  4.     this.age = age;
  5.   }
  6.   say() {
  7.     console.log(`my name is ${this.name}, and my age is ${this.age}`)
  8.   }
  9. }
  10. const proxyTrack = (targetClass) => {
  11.   const prototype = targetClass.prototype;
  12.   Object.getOwnPropertyNames(prototype).forEach((name) => {
  13.         targetClass.prototype[name] = new Proxy(prototype[name], {
  14.             apply(target, context, args) {
  15.                 console.time();
  16.                 target.apply(context, args);
  17.                 console.timeEnd();
  18.             }
  19.         })
  20.   })
  22.   return new Proxy(targetClass, {
  23.     construct(target, args) {
  24.       const obj = new target(...args);
  25.       return new Proxy(obj, {
  26.         get(target, prop) {
  27.             console.log(`${target.name}.${prop} is being getting`);
  28.             return target[prop]
  29.         }
  30.       })
  31.     }
  32.   })       
  33. }
  35. const MyClass = proxyTrack(Person);
  36. const myClass = new MyClass('tom', 21);
  37. myClass.say();
  38. myClass.name;

3.1 活学活用：深层取值（get）

平时取数据的时候，经常会遇到深层数据结构，如果不做任何处理，很容易造成 JS 报错。
为了避免这个问题，也许你会用多个 && 进行处理：

  1. const country = {
  2.     name: 'china',
  3.     province: {
  4.         name: 'guangdong',
  5.         city: {
  6.             name: 'shenzhen'
  7.         }
  8.     }
  9. }
  10. const cityName = country.province
  11.     && country.province.city
  12.     && country.province.city.name;

但这样还是过于繁琐了，于是 lodash 提供了 get 方法帮处理这个问题：

  1. _.get(country, 'province.city.name');

虽然看起来似乎还不错，但总觉得哪里不太对。对，这种写法看起来很不自然，有没有更自然的写法呢？
最新的 ES 提案中提供了可选链的语法糖，支持我们用下面的语法来深层取值。

  1. country?.province?.city?.name

但是这个特性只是处于 stage3阶段，还没有被正式纳入 ES 规范中，更没有浏览器已经支持了这个特性。
所以，我们只能另辟蹊径。这时你可能会想到如果使用 Proxy 的 get 方法拦截对属性的访问，这样是不是就可以实现深层取值了呢？
接下来，我将会带着你一步步实现下面的这个 get 方法。

  1. const obj = {
  2.     person: {}
  3. }
  4. // 预期结果（这里为什么要当做函数执行呢？）
  5. get(obj)() === obj;
  6. get(obj).person(); // {}
  7. get(obj).person.name(); // undefined
  8. get(obj).person.name.xxx.yyy.zzz(); // undefined

首先，创建一个 get 方法，使用 Proxy 中的 get 对传入的对象进行拦截。

  1. function get (obj) {
  2.     return new Proxy(obj, {
  3.         get(target, prop) {
  4.             return target[prop];
  5.         }
  6.     })
  7. }

来运行一下上面的三个例子，看一下结果如何：

  1. get(obj).person; // {}
  2. get(obj).person.name; // undefined
  3. get(obj).person.name.xxx.yyy.zzz; // Cannot read property 'xxx' of undefined

前两个测试用例是成功了，但第三个还是不行，因为 get(obj).person.name 是 undefined，所以接下来的重点是处理属性为 undefined 的情况。
对这个 get 方法进行一下简单的改造，这次不再直接返回 target[prop]，而是返回一个代理对象，让第三个例子不再报错。

  1. function get (obj) {
  2.     return new Proxy(obj, {
  3.         get(target, prop) {
  4.             return get(target[prop]);
  5.         }
  6.     })
  7. }

嗯，看起来有点儿高大上了，但是 target[prop] 为 undefined 的时候，传给 get 方法的就是 undefined 了，而 Proxy 第一个参数必须为对象，这样岂不是会报错？
所以，需要对 obj 为 undefined 的时候进行特殊处理，为了能够深层取值，只能对值为 undefined 的属性设置默认值为空对象。

  1. function get (obj = {}) {
  2.     return new Proxy(obj, {
  3.         get(target, prop) {
  4.             return get(target[prop]);
  5.         }
  6.     })
  7. }
  8. get(obj).person; // {}
  9. get(obj).person.name; // {}
  10. get(obj).person.name.xxx.yyy.zzz; // {}

虽然不报错了，可是后两个返回值却不对了。不设置默认值为空对象就无法继续访问，设置默认值为空对象就会改变返回值。这可该怎么办呢？
仔细看一下上面的预期设计，是不是发现少了一个括号，这就是为什么每个属性都被当做函数来执行。
所以需要对这个函数稍加修改，让其支持 apply 拦截的方式。

  1. function noop() {}
  2. function get (obj) {
  3.     // 注意这里拦截的是 noop 函数
  4.     return new Proxy(noop, {
  5.         // 这里支持返回执行的时候传入的参数
  6.         apply(target, context, [arg]) {
  7.             return obj;
  8.         },
  9.         get(target, prop) {
  10.             return get(obj[prop]);
  11.         }
  12.     })
  13. }

所以这个 get 方法已经可以这样使用了。

  1. get(obj)() === obj; // true
  2. get(obj).person.name(); // undefined
  3. get(obj).person.name.xxx.yyy.zzz(); // Cannot read property 'xxx' of undefined

我们理想中的应该是，如果属性为 undefined 就返回 undefined，但仍要支持访问下级属性，而不是抛出错误。顺着这个思路来的话，很明显当属性为 undefined 的时候也需要用 Proxy 进行特殊处理。
所以我们需要一个具有下面特性的 get 方法：

  1. get(undefined)() === undefined; // true
  2. get(undefined).xxx.yyy.zzz() // undefined

和前面的困扰不一样的地方是，这里完全不需要注意 get(undefined).xxx 是否为正确的值，因为想获取值必须要执行才能拿到。那么只需要对所有 undefined 后面访问的属性都默认为 undefined 就好了。

  1. function noop() {}
  2. function get (obj) {
  3.     if (obj === undefined) {
  4.         return proxyVoid;
  5.     }
  6.     // 注意这里拦截的是 noop 函数
  7.     return new Proxy(noop, {
  8.         // 这里支持返回执行的时候传入的参数
  9.         apply(target, context, [arg]) {
  10.             return obj === undefined ? arg : obj;
  11.         },
  12.         get(target, prop) {
  13.             if (
  14.                 obj !== undefined &&
  15.                 obj !== null &&
  16.                 obj.hasOwnProperty(prop)
  17.             ) {
  18.                 return get(obj[prop]);
  19.             }
  20.             return proxyVoid;
  21.         }
  22.     })
  23. }

接下来思考一下这个 proxyVoid 函数该如何实现呢？很明显它应该是一个代理了 undefined 后返回的对象。直接这样好不好？

  1. const proxyVoid = get(undefined);

但是这样很明显会造成死循环了，那么就需要判断临界值了，让 get 方法第一次接收 undefined 的时候不会死循环。

  1. let isFirst = true;
  2. function noop() {}
  3. let proxyVoid = get(undefined);
  4. function get(obj) {
  5.     if (obj === undefined && !isFirst) {
  6.         return proxyVoid;
  7.     }
  8.     if (obj === undefined && isFirst) {
  9.         isFirst = false;
  10.     }
  11.     // 注意这里拦截的是 noop 函数
  12.     return new Proxy(noop, {
  13.         // 这里支持返回执行的时候传入的参数
  14.         apply(target, context, [arg]) {
  15.             return obj === undefined ? arg : obj;
  16.         },
  17.         get(target, prop) {
  18.             if (
  19.                 obj !== undefined &&
  20.                 obj !== null &&
  21.                 obj.hasOwnProperty(prop)
  22.             ) {
  23.                 return get(obj[prop]);
  24.             }
  25.             return proxyVoid;
  26.         }
  27.     })
  28. }

我们再来验证一下，这种方式是否可行：

  1. get(obj)() === obj; // true
  2. get(obj).person.name(); // undefined
  3. get(obj).person.name.xxx.yyy.zzz(); // undefined

bingo，这个方法完全实现了我们的需求。最后，完整的代码如下：

  1.     let isFirst = true;
  2.     function noop() {}
  3.     let proxyVoid = get(undefined);
  4.     function get(obj) {
  5.         if (obj === undefined) {
  6.             if (!isFirst) {
  7.                 return proxyVoid;
  8.             }
  9.             isFirst = false;
  10.         }
  11.         // 注意这里拦截的是 noop 函数
  12.         return new Proxy(noop, {
  13.             // 这里支持返回执行的时候传入的参数
  14.             apply(target, context, [arg]) {
  15.                 return obj === undefined ? arg : obj;
  16.             },
  17.             get(target, prop) {
  18.                 if (
  19.                     obj !== undefined &&
  20.                     obj !== null &&
  21.                     obj.hasOwnProperty(prop)
  22.                 ) {
  23.                     return get(obj[prop]);
  24.                 }
  25.                 return proxyVoid;
  26.             }
  27.         })
  28.     }
  29.     this.get = get;

这个基于 Proxy 的 get 方法的灵感来自于 Github 上的一个名为 safe-touch 的库，感兴趣的可以去看一下它的源码实现：safe-touch

3.2 实现管道

在最新的 ECMA 提案中，出现了原生的管道操作符 |>，在 rxjs 和 nodejs 中都有类似的 pipe 概念。
使用 Proxy 也可以实现 pipe 功能，只要使用 get 对属性访问进行拦截就能轻易实现，将访问的方法都放到 stack 数组里面，一旦最后访问了 execute 就返回结果。

  1. const pipe = (value) => {
  2.     const stack = [];
  3.     const proxy = new Proxy({}, {
  4.         get(target, prop) {
  5.             if (prop === 'execute') {
  6.                 return stack.reduce(function (val, fn) {
  7.                     return fn(val);
  8.                 }, value);
  9.             }
  10.             stack.push(window[prop]);
  11.             return proxy;
  12.         }
  13.     })
  14.     return proxy;
  15. }
  16. var double = n => n * 2;
  17. var pow = n => n * n;
  18. pipe(3).double.pow.execute;

注意：这里为了在 stack 存入方法，使用了 window[prop] 的形式，是为了获取到对应的方法。也可以将 double 和 pow 方法挂载到一个对象里面，用这个对象替换 window。

3.3 简单的数据绑定

众所周知，Vue 相对于 React 的一个卖点就是 Reactive ，而 React 的状态管理库 Mobx 也是基于依赖追踪的，这两个库的核心实现都是 Object.defineProperty，后来都改为了 Proxy。
那么，接下来会带着你实现一个简单的类似下面的双向绑定。

绑定.gif-1236.4kB

我们的 HTML 结构如下，要求在输入框输入内容的时候，会同步显示在下方的 span 中。

  1. <input type="text" id="input" />
  2. <span id="span"></span>

传统的事件绑定形式实现这个很简单，只需要对 input 绑定事件，一旦输入内容就去修改 span 的 innerHTML。但这里我们想使用数据驱动的形式，用数据绑定视图的形式来做。
所以，这里完全可以使用 Proxy 监听一个对象，当在输入框输入内容的时候去修改这个对象属性的时候，在 set 函数中修改 span 的内容。

  1. let obj = {
  2.     text: '1'
  3. };
  4. const input = document.getElementById('input'),
  5.     span = document.getElementById('span');
  6. obj = new Proxy(obj, {
  7.   get: function() {
  8.     console.log('get val');
  9.   },
  10.   set: function(target, prop, newVal) {
  11.     if (prop === 'text') {
  12.         target[prop] = newVal;
  13.         input.value = newVal;
  14.         span.innerHTML = newVal;
  15.     }
  16.   }
  17. });
  19. input.addEventListener('keyup', function(e){
  20.   obj.text = e.target.value;
  21. })

这个功能就完美实现了，但是这个代码缺陷有很多：

  1. 现在只是监听了一个属性，如果需要监听多个属性变化呢？
  2. 如果下次需要在一个新的 span 中也要展示输入内容呢？每次修改 set 方法不符合开闭原则。
  3. 代码耦合太严重，set 方法中既有赋值，又有操作 DOM。

而在 Vue 中，还增加了发布订阅的形式来实现双向绑定，这里篇幅有限，就不具体展示讲解了。感兴趣的同学可以参考一下这篇文章：实现双向绑定Proxy比defineproperty优劣如何?

推荐阅读

  1. Proxy
  2. JavaScript的Proxy可以做哪些有意思的事儿
  3. Proxy 的巧用
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注