JS帶你深入領(lǐng)略Proxy的世界

更新時(shí)間：2021年05月14日 14:45:43 作者：蚊子博客

Proxy是es2015 標(biāo)準(zhǔn)規(guī)范加入的語(yǔ)法，很可能你只是聽(tīng)說(shuō)過(guò)，但并沒(méi)有用過(guò)，畢竟考慮到兼容的問(wèn)題，不能輕易地使用Proxy特性。但現(xiàn)在隨著各個(gè)瀏覽器的更新迭代，Proxy的支持度也越來(lái)越高：而且使用Proxy進(jìn)行代理和劫持，也漸漸成為了趨勢(shì)。

1. Proxy 的基本結(jié)構(gòu)

Proxy 的基本使用方式：

/**
 * target: 表示要代理的目標(biāo)，可以是object, array, function類型
 * handler: 是一個(gè)對(duì)象，可以編寫各種代理的方法
 */
const proxy = new Proxy(target, handler);

例如我們想要代理一個(gè)對(duì)象，可以通過(guò)設(shè)置 get 和 set 方法來(lái)代理獲取和設(shè)置數(shù)據(jù)的操作：

const person = {
  name: 'wenzi',
  age: 20,
};
const personProxy = new Proxy(person, {
  get(target, key, receiver) {
    console.log(`get value by ${key}`);
    return target[key];
  },
  set(target, key, value) {
    console.log(`set ${key}, old value ${target[key]} to ${value}`);
    target[key] = value;
  },
});

Proxy 僅僅是一個(gè)代理，personProxy 上有 person 所有的屬性和方法。我們通過(guò)personProxy獲取和設(shè)置 name 時(shí)，就會(huì)有相應(yīng)的 log 輸出：

personProxy.name; // "wenzi"
// log: get value by name

personProxy.name = 'hello';
// log: set name, old value wenzi to hello

并且通過(guò) personProxy 設(shè)置數(shù)據(jù)時(shí)，代理的原結(jié)構(gòu)里的數(shù)據(jù)也會(huì)發(fā)生變化。我們打印下 person，可以發(fā)現(xiàn)字段 name 的值也變成了hello：

console.log(person); // {name: "hello", age: 20}

Proxy 的第 2 個(gè)參數(shù) handler 除了可以設(shè)置 get 和 set 方法外，還有更多豐富的方法：

1.get(target, propKey, receiver)：攔截對(duì)象屬性的讀取，比如 proxy.foo 和 proxy['foo']。

2.set(target, propKey, value, receiver)：攔截對(duì)象屬性的設(shè)置，比如 proxy.foo = v 或 proxy['foo'] = v，返回一個(gè)布爾值。

3.has(target, propKey)：攔截 propKey in proxy 的操作，返回一個(gè)布爾值。

4.deleteProperty(target, propKey)：攔截 delete proxy[propKey]的操作，返回一個(gè)布爾值。

5.ownKeys(target)：攔截 Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in 循環(huán)，返回一個(gè)數(shù)組。該方法返回目標(biāo)對(duì)象所有自身的屬性的屬性名，而 Object.keys()的返回結(jié)果僅包括目標(biāo)對(duì)象自身的可遍歷屬性。

6.getOwnPropertyDescriptor(target, propKey)：攔截 Object.getOwnPropertyDescriptor(proxy, propKey)，返回屬性的描述對(duì)象。

7.defineProperty(target, propKey, propDesc)：攔截 Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一個(gè)布爾值。

8.preventExtensions(target)：攔截 Object.preventExtensions(proxy)，返回一個(gè)布爾值。

9.getPrototypeOf(target)：攔截 Object.getPrototypeOf(proxy)，返回一個(gè)對(duì)象。

10.isExtensible(target)：攔截 Object.isExtensible(proxy)，返回一個(gè)布爾值。

11.setPrototypeOf(target, proto)：攔截 Object.setPrototypeOf(proxy, proto)，返回一個(gè)布爾值。如果目標(biāo)對(duì)象是函數(shù)，那么還有兩種額外操作可以攔截。

12.apply(target, object, args)：攔截 Proxy 實(shí)例作為函數(shù)調(diào)用的操作，比如 proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。

13.construct(target, args)：攔截 Proxy 實(shí)例作為構(gòu)造函數(shù)調(diào)用的操作，比如 new proxy(...args)。

如我們通過(guò) delete 刪除其中一個(gè)元素時(shí)，可以通過(guò)deleteProperty()方法來(lái)攔截這個(gè)操作。還是上面代理 person 的代碼，我們添加一個(gè) deleteProperty：

const person = {
  name: 'wenzi',
  age: 20,
};
const personProxy = new Proxy(person, {
  // 忽略get和set方法，與上面一樣
  // ...
  deleteProperty(target, key, receiver) {
    console.log(`delete key ${key}`);
    delete target[key];
  },
});

當(dāng)執(zhí)行 delete 操作時(shí)：

delete personProxy['age'];
// log: delete key age

2. Proxy 與 Reflect

Proxy 與 Reflect 可以說(shuō)形影不離了，Reflect 里所有的方法和使用方式與 Proxy 完全一樣。

例如上面 Proxy 里的 get(), set()和 deleteProperty()方法我們都是直接操作原代理對(duì)象的，這里我們改成使用Reflect來(lái)操作：

const personProxy = new Proxy(person, {
  get(target, key, receiver) {
    console.log(`get value by ${key}`);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log(`set ${key}, old value ${target[key]} to ${value}`);
    return Reflect.set(target, key, value, receiver);
  },
  deleteProperty(target, key, receiver) {
    console.log(`delete key ${key}`);
    return Reflect.deleteProperty(target, key, receiver);
  },
});

可以發(fā)現(xiàn)完美地實(shí)現(xiàn)這些功能。

3. 代理數(shù)組

我們?cè)谥暗奈恼?Vue 中對(duì)數(shù)組特殊的操作中，討論過(guò) Vue 為什么沒(méi)有使用Object.defineProperty來(lái)劫持?jǐn)?shù)據(jù)，而是重寫了 Array 原型鏈上的幾個(gè)方法，通過(guò)這幾個(gè)方法來(lái)實(shí)現(xiàn) Vue 模板中數(shù)據(jù)的更新。

但若 Proxy 的話，就可以直接代理數(shù)組：

const arr = [1, 2, 3, 4];
const arrProxy = new Proxy(arr, {
  get(target, key, receiver) {
    console.log('arrProxy.get', target, key);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log('arrProxy.set', target, key, value);
    return Reflect.set(target, key, value, receiver);
  },
  deleteProperty(target, key) {
    console.log('arrProxy.deleteProperty', target, key);
    return Reflect.deleteProperty(target, key);
  },
});

現(xiàn)在我們?cè)賮?lái)操作一下代理后的數(shù)組 arrProxy 看下：

arrProxy[2] = 22; // arrProxy.set (4) [1, 2, 3, 4] 2 22
arrProxy[3]; // arrProxy.get (4) [1, 2, 22, 4] 3
delete arrProxy[2]; // arrProxy.deleteProperty (4) [1, 2, 22, 4] 2
arrProxy.push(5); // push操作比較復(fù)雜，這里進(jìn)行了多個(gè)get()和set()操作
arrProxy.length; // arrProxy.get (5) [1, 2, empty, 4, 5] length

可以看到無(wú)論獲取、刪除還是修改數(shù)據(jù)，都可以感知到。還有數(shù)組原型鏈上的一些方法，如：

1.push()

2.pop()

3.shift()

4.unshift()

5.splice()

6.sort()

7.reverse()

也都能通過(guò) Proxy 中的代理方法劫持到。

concat()方法比較特殊的是，他是一個(gè)賦值操作，并不改變?cè)瓟?shù)組，因此在調(diào)用 concat()方法操作數(shù)組時(shí)，如果沒(méi)有賦值操作，那么這里只有 get()攔截到。

4. 代理函數(shù)

Proxy 中還有一個(gè)apply()方法，是表示自己作為函數(shù)調(diào)用時(shí)，被攔截的操作。

const getSum = (...args) => {
  if (!args.every((item) => typeof item === 'number')) {
    throw new TypeError('參數(shù)應(yīng)當(dāng)均為number類型');
  }
  return args.reduce((sum, item) => sum + item, 0);
};
const fnProxy = new Proxy(getSum, {
  /**
   * @params {Fuction} target 代理的對(duì)象
   * @params {any} ctx 執(zhí)行的上下文
   * @params {any} args 參數(shù)
   */
  apply(target, ctx, args) {
    console.log('ctx', ctx);
    console.log(`execute fn ${getSum.name}, args: ${args}`);
    return Reflect.apply(target, ctx, args);
  },
});

執(zhí)行 fnProxy：

// 10, ctx為undefined, log: execute fn getSum, args: 1,2,3,4
fnProxy(1, 2, 3, 4);

// ctx為undefined, Uncaught TypeError: 參數(shù)應(yīng)當(dāng)均為number類型
fnProxy(1, 2, 3, '4');

// 10, ctx為window, log: execute fn getSum, args: 1,2,3,4
fnProxy.apply(window, [1, 2, 3, 4]);

// 6, ctx為window, log: execute fn getSum, args: 1,2,3
fnProxy.call(window, 1, 2, 3);

// 6, ctx為person, log: execute fn getSum, args: 1,2,3
fnProxy.apply(person, [1, 2, 3]);

5. 一些簡(jiǎn)單的應(yīng)用場(chǎng)景

我們知道 Vue3 里已經(jīng)用 Proxy 重寫了響應(yīng)式系統(tǒng)，mobx 也已經(jīng)用了 Proxy 模式。在可見(jiàn)的未來(lái)，會(huì)有更多的 Proxy 的應(yīng)用場(chǎng)景，我們這里也稍微講解幾個(gè)。

5.1 統(tǒng)計(jì)函數(shù)被調(diào)用的上下文和次數(shù)

這里我們用 Proxy 來(lái)代理函數(shù)，然后函數(shù)被調(diào)用的上下文和次數(shù)。

const countExecute = (fn) => {
  let count = 0;

  return new Proxy(fn, {
    apply(target, ctx, args) {
      ++count;
      console.log('ctx上下文：', ctx);
      console.log(`${fn.name} 已被調(diào)用 ${count} 次`);
      return Reflect.apply(target, ctx, args);
    },
  });
};

現(xiàn)在我們來(lái)代理下剛才的getSum()方法：

const getSum = (...args) => {
  if (!args.every((item) => typeof item === 'number')) {
    throw new TypeError('參數(shù)應(yīng)當(dāng)均為number類型');
  }
  return args.reduce((sum, item) => sum + item, 0);
};

const useSum = countExecute(getSum);

useSum(1, 2, 3); // getSum 已被調(diào)用 1 次

useSum.apply(window, [2, 3, 4]); // getSum 已被調(diào)用 2 次

useSum.call(person, 3, 4, 5); // getSum 已被調(diào)用 3 次

5.2 實(shí)現(xiàn)一個(gè)防抖功能

基于上面統(tǒng)計(jì)函數(shù)調(diào)用次數(shù)的功能，也給我們實(shí)現(xiàn)一個(gè)函數(shù)的防抖功能添加了靈感。

const throttleByProxy = (fn, rate) => {
  let lastTime = 0;
  return new Proxy(fn, {
    apply(target, ctx, args) {
      const now = Date.now();
      if (now - lastTime > rate) {
        lastTime = now;
        return Reflect.apply(target, ctx, args);
      }
    },
  });
};

const logTimeStamp = () => console.log(Date.now());
window.addEventListener('scroll', throttleByProxy(logTimeStamp, 300));

logTimeStamp()至少需要 300ms 才能執(zhí)行一次。

5.3 實(shí)現(xiàn)觀察者模式

我們?cè)谶@里實(shí)現(xiàn)一個(gè)最簡(jiǎn)單類 mobx 觀察者模式。

const list = new Set();
const observe = (fn) => list.add(fn);
const observable = (obj) => {
  return new Proxy(obj, {
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      list.forEach((observer) => observer());
      return result;
    },
  });
};
const person = observable({ name: 'wenzi', age: 20 });
const App = () => {
  console.log(`App -> name: ${person.name}, age: ${person.age}`);
};
observe(App);

person就是使用 Proxy 創(chuàng)建出來(lái)的代理對(duì)象，每當(dāng) person 中的屬性發(fā)生變化時(shí)，就會(huì)執(zhí)行 App()函數(shù)。這樣就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的響應(yīng)式狀態(tài)管理。