ES6之Proxy的使用詳解

更新時間：2025年01月15日 11:35:25 作者：Cshaosun

Proxy是ES6新增的內(nèi)置對象,用于攔截并自定義對象的各種操作,通過定義攔截器,可以實現(xiàn)數(shù)據(jù)校驗和保護、日志記錄、數(shù)據(jù)綁定和觀察等功能

什么是Proxy

JavaScript 中的 Proxy 是 ES6 中新增的對象，

Proxy是JavaScript中的內(nèi)置對象，它提供了一種機制，可以攔截并自定義各種操作，如屬性訪問、函數(shù)調(diào)用、構(gòu)造函數(shù)調(diào)用等。

Proxy的構(gòu)造函數(shù)接受兩個參數(shù)：目標對象（被代理的對象）和一個處理器對象（用于定義攔截器）。

// 寫法:target是目標對象，handler是處理器對象
const proxy = new Proxy(target, handler);

Proxy的攔截器【處理器對象】（handler）

攔截器是一個包含各種攔截方法的對象，用于定義在代理對象上執(zhí)行的操作。

常用的攔截方法包括：get、set、apply、construct、deleteProperty、has、getOwnPropertyDescriptor等?！具@些攔截方法會在代理對象進行對應(yīng)操作時自動觸發(fā)】

get(target, property, receiver)：攔截對目標對象屬性的讀取操作
set(target, property, value, receiver)：攔截對目標對象屬性的賦值操作。
apply(target, thisArg, argumentsList)：攔截對目標對象的函數(shù)調(diào)用。
construct(target, argumentsList, newTarget)：攔截對目標對象的構(gòu)造函數(shù)調(diào)用。

Proxy的應(yīng)用場景

數(shù)據(jù)校驗和保護

在屬性訪問和賦值操作中校驗數(shù)據(jù)的合法性。

// 定義待驗證的對象
const user = {
  name: '',
  age: 0
};

// 創(chuàng)建代理對象
const userProxy = new Proxy(user, {
  set(target, property, value) {
    // 進行數(shù)據(jù)合法性驗證
    if (property === 'name') {
      if (typeof value !== 'string' || value === '') {
        throw new Error('姓名必須是非空字符串');
      }
    } else if (property === 'age') {
      if (typeof value !== 'number' || value < 0 || !Number.isInteger(value)) {
        throw new Error('年齡必須是非負整數(shù)');
      }
    }

    // 合法性驗證通過，設(shè)置屬性值
    target[property] = value;
    return true;
  }
});

// 使用代理對象進行屬性訪問和賦值
userProxy.name = 'John';
console.log(userProxy.name); // 輸出: "John"

userProxy.age = 25;
console.log(userProxy.age); // 輸出: 25

// 非法賦值會觸發(fā)異常
try {
  userProxy.name = '';
} catch (error) {
  console.log(error.message); // 輸出: "姓名必須是非空字符串"
}

try {
  userProxy.age = '30';
} catch (error) {
  console.log(error.message); // 輸出: "年齡必須是非負整數(shù)"
}

日志記錄

攔截對對象的操作以記錄日志。

// 定義待記錄日志的對象
const person = {
  name: 'John',
  age: 30
};

// 創(chuàng)建代理對象
const personProxy = new Proxy(person, {
  get(target, property) {
    // 記錄屬性訪問日志
    console.log(`訪問屬性: ${property}`);
    
    // 返回屬性值
    return target[property];
  },
  set(target, property, value) {
    // 記錄屬性賦值日志
    console.log(`設(shè)置屬性: ${property}，值: ${value}`);

    // 設(shè)置屬性值
    target[property] = value;
    return true;
  },
  deleteProperty(target, property) {
    // 記錄屬性刪除日志
    console.log(`刪除屬性: ${property}`);

    // 刪除屬性
    delete target[property];
    return true;
  }
});

// 使用代理對象進行屬性訪問、賦值和刪除
console.log(personProxy.name); // 輸出：訪問屬性: name -> "John"

personProxy.age = 35; // 輸出：設(shè)置屬性: age，值: 35
console.log(personProxy.age); // 輸出：訪問屬性: age -> 35

delete personProxy.age; // 輸出：刪除屬性: age
console.log(personProxy.age); // 輸出：訪問屬性: age -> undefined

數(shù)據(jù)綁定和觀察

通過攔截器實現(xiàn)數(shù)據(jù)綁定和觀察模式。

// 創(chuàng)建數(shù)據(jù)對象
const data = {
  name: 'John',
  age: 30
};

// 創(chuàng)建觀察者對象，用于監(jiān)聽數(shù)據(jù)變化
const observer = {
  notify(target, property) {
    console.log(`屬性 ${property} 發(fā)生變化，新值為: ${target[property]}`);
  }
};

// 創(chuàng)建代理對象
const dataProxy = new Proxy(data, {
  set(target, property, value) {
    // 設(shè)置屬性值
    target[property] = value;

    // 通知觀察者屬性變化
    observer.notify(target, property);

    return true;
  }
});

// 修改代理對象的屬性值
dataProxy.name = 'Alice'; // 輸出：屬性 name 發(fā)生變化，新值為: Alice
dataProxy.age = 35; // 輸出：屬性 age 發(fā)生變化，新值為: 35

通過使用Proxy對象，我們可以輕松地通過攔截器實現(xiàn)數(shù)據(jù)綁定和觀察模式。

在修改數(shù)據(jù)時，我們可以自動通知觀察者，并做出相應(yīng)的響應(yīng)。這樣可以實現(xiàn)數(shù)據(jù)與界面的自動同步、實時更新等功能。