JavaScript動(dòng)態(tài)代理的各種用法詳解

更新時(shí)間：2025年09月04日 08:41:20 作者：風(fēng)冷

動(dòng)態(tài)代理是ES6引入的強(qiáng)大功能,通過(guò)Proxy對(duì)象實(shí)現(xiàn),允許你攔截和自定義對(duì)目標(biāo)對(duì)象的操作,下面我將全面介紹JavaScript動(dòng)態(tài)代理的各種用法,需要的朋友可以參考下

引言

動(dòng)態(tài)代理是ES6引入的強(qiáng)大功能，通過(guò)Proxy對(duì)象實(shí)現(xiàn)，允許你攔截和自定義對(duì)目標(biāo)對(duì)象的操作。下面我將全面介紹JavaScript動(dòng)態(tài)代理的各種用法，包括空對(duì)象、get方法攔截等高級(jí)特性。

1. Proxy基礎(chǔ)

Proxy對(duì)象用于定義基本操作的自定義行為（如屬性查找、賦值、枚舉、函數(shù)調(diào)用等）。

const target = {};
const handler = {
  get: function(target, prop) {
    return prop in target ? target[prop] : 37;
  }
};

const proxy = new Proxy(target, handler);
proxy.a = 1;
console.log(proxy.a); // 1
console.log(proxy.b); // 37 (handler中定義的默認(rèn)值)

2. 空對(duì)象代理

創(chuàng)建一個(gè)"空對(duì)象"代理，可以攔截所有操作并返回默認(rèn)值：

const emptyObject = new Proxy({}, {
  get(target, prop) {
    return undefined; // 所有屬性訪問(wèn)返回undefined
  },
  set(target, prop, value) {
    return false; // 阻止所有賦值操作
  },
  has(target, prop) {
    return false; // 所有in操作返回false
  }
});

console.log(emptyObject.anyProperty); // undefined
emptyObject.a = 1; // 靜默失敗
console.log('a' in emptyObject); // false

3. Get方法攔截

get攔截器可以自定義屬性訪問(wèn)行為：

const person = {
  name: 'John',
  age: 30
};

const proxy = new Proxy(person, {
  get(target, prop) {
    if (prop === 'age') {
      return `Age is ${target[prop]}`;
    }
    return target[prop] || `Property "${prop}" does not exist`;
  }
});

console.log(proxy.name); // "John"
console.log(proxy.age); // "Age is 30"
console.log(proxy.job); // "Property "job" does not exist"

4. 完整的攔截器方法

Proxy支持?jǐn)r截多種操作：

const handler = {
  // 攔截屬性讀取
  get(target, prop, receiver) {
    console.log(`Getting ${prop}`);
    return Reflect.get(...arguments);
  },
  
  // 攔截屬性設(shè)置
  set(target, prop, value, receiver) {
    console.log(`Setting ${prop} to ${value}`);
    return Reflect.set(...arguments);
  },
  
  // 攔截in操作符
  has(target, prop) {
    console.log(`Checking if ${prop} exists`);
    return Reflect.has(...arguments);
  },
  
  // 攔截delete操作
  deleteProperty(target, prop) {
    console.log(`Deleting ${prop}`);
    return Reflect.deleteProperty(...arguments);
  },
  
  // 攔截Object.keys等操作
  ownKeys(target) {
    console.log('Getting own keys');
    return Reflect.ownKeys(...arguments);
  },
  
  // 攔截函數(shù)調(diào)用（當(dāng)代理目標(biāo)是函數(shù)時(shí)）
  apply(target, thisArg, argumentsList) {
    console.log('Function called with', argumentsList);
    return Reflect.apply(...arguments);
  },
  
  // 攔截new操作符
  construct(target, argumentsList, newTarget) {
    console.log('Constructor called with', argumentsList);
    return Reflect.construct(...arguments);
  }
};

const obj = new Proxy({}, handler);
obj.a = 1; // 日志: Setting a to 1
console.log('a' in obj); // 日志: Checking if a exists
delete obj.a; // 日志: Deleting a

5. 驗(yàn)證代理

使用Proxy實(shí)現(xiàn)數(shù)據(jù)驗(yàn)證：

const validator = {
  set(target, prop, value) {
    if (prop === 'age') {
      if (typeof value !== 'number' || value <= 0) {
        throw new TypeError('Age must be a positive number');
      }
    }
    target[prop] = value;
    return true;
  }
};

const person = new Proxy({}, validator);
person.age = 30; // 正常
person.age = 'thirty'; // 拋出TypeError

6. 自動(dòng)填充對(duì)象

實(shí)現(xiàn)一個(gè)自動(dòng)填充默認(rèn)值的代理：

const autoFiller = {
  get(target, prop) {
    if (!(prop in target)) {
      target[prop] = {};
    }
    return target[prop];
  }
};

const obj = new Proxy({}, autoFiller);
obj.a.b.c = 'value'; // 自動(dòng)創(chuàng)建嵌套結(jié)構(gòu)
console.log(obj); // { a: { b: { c: 'value' } } }

7. 負(fù)索引數(shù)組

使用Proxy實(shí)現(xiàn)類似Python的負(fù)索引數(shù)組：

function createNegativeArray(array) {
  return new Proxy(array, {
    get(target, prop, receiver) {
      if (typeof prop === 'string') {
        const index = parseInt(prop, 10);
        if (index < 0) {
          prop = target.length + index;
        }
      }
      return Reflect.get(target, prop, receiver);
    }
  });
}

const array = createNegativeArray([1, 2, 3, 4, 5]);
console.log(array[-1]); // 5
console.log(array[-2]); // 4

8. 方法鏈代理

實(shí)現(xiàn)一個(gè)流暢的方法鏈代理：

const chainable = {
  get(target, prop) {
    if (prop in target) {
      return target[prop];
    }
    
    return function(...args) {
      console.log(`Called ${prop} with args: ${args}`);
      return target; // 返回自身以實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用
    };
  }
};

const api = new Proxy({}, chainable);
api.method1().method2(1, 2).method3('a', 'b');
// 輸出:
// Called method1 with args: 
// Called method2 with args: 1,2
// Called method3 with args: a,b

9. 性能考慮

雖然Proxy功能強(qiáng)大，但需要注意：

Proxy操作比直接對(duì)象訪問(wèn)慢
某些操作無(wú)法被攔截（如Date.prototype.getTime()）
不是所有瀏覽器都完全支持所有Proxy特性

10. 實(shí)際應(yīng)用場(chǎng)景

?數(shù)據(jù)驗(yàn)證?：在設(shè)置屬性值時(shí)進(jìn)行驗(yàn)證
?日志記錄?：跟蹤對(duì)象的所有操作
?性能監(jiān)控?：測(cè)量方法調(diào)用時(shí)間
?自動(dòng)保存?：在數(shù)據(jù)變更時(shí)自動(dòng)保存到后端
?虛擬屬性?：動(dòng)態(tài)計(jì)算屬性值
?API封裝?：簡(jiǎn)化復(fù)雜API的使用
?權(quán)限控制?：限制對(duì)某些屬性的訪問(wèn)

Proxy是JavaScript元編程的強(qiáng)大工具，合理使用可以極大地增強(qiáng)代碼的靈活性和可維護(hù)性。

到此這篇關(guān)于JavaScript動(dòng)態(tài)代理用法的完整指南的文章就介紹到這了,更多相關(guān)JavaScript動(dòng)態(tài)代理用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: