【ES6】改變 JS 內置行為的代理與反射
代理(Proxy)可以攔截並改變 JS 引擎的底層操作,如數據讀取、屬性定義、函數構造等一系列操作。ES6 通過對這些底層內置對象的代理陷阱和反射函數,讓開發者能進一步接近 JS 引擎的能力。
一、代理與反射的基本概念
什麽是代理和反射呢?
代理是用來替代另一個對象(target),JS 通過new Proxy()
創建一個目標對象的代理,該代理與該目標對象表面上可以被當作同一個對象來對待。
當目標對象上的進行一些特定的底層操作時,代理允許你攔截這些操作並且覆寫它,而這原本只是 JS 引擎的內部能力。
如果你對些代理&反射的概念比較困惑的話,可以直接看後面的應用示例,最後再重新看這些定義就會更清晰!
攔截行為使用了一個能夠響應特定操作的函數( 被稱為陷阱),每個代理陷阱對應一個反射(Reflect)方法。
ES6 的反射 API 以 Reflect
對象的形式出現,對象每個方法都與對應的陷阱函數同名,並且接收的參數也與之一致。以下是 Reflect
對象的一些方法:
代理陷阱 | 覆寫的特性 | 方法 | |
---|---|---|---|
get | 讀取一個屬性的值 | Reflect.get() | |
set | 寫入一個屬性 | Reflect.set() | |
has | in 運算符 | Reflect.has() | |
deleteProperty | delete 運算符 | Reflect.deleteProperty() | |
getPrototypeOf | Object.getPrototypeOf() | Reflect.getPrototypeOf() | |
isExtensible | Object.isExtensible() | Reflect.isExtensible() | |
defineProperty | Object.defineProperty() | Reflect.defineProperty | |
apply | 調用一個函數 | Reflect.apply() | |
construct | 使用 new 調用一個函數 | Reflect.construct() |
每個陷阱函數都可以重寫 JS 對象的一個特定內置行為,允許你攔截並修改它。
綜合來說,想要控制或改變JS的一些底層操作,可以先創建一個代理對象
二、開始一個簡單的代理
當你使用 Proxy 構造器來創建一個代理時,需要傳遞兩個參數:目標對象(target)以及一個處理器( handler),
先創建一個僅進行傳遞的代理如下:
// 目標對象
let target = {};
// 代理對象
let proxy = new Proxy(target, {});
proxy.name = "hello";
console.log(proxy.name); // "hello"
console.log(target.name); // "hello"
target.name = "world";
console.log(proxy.name); // "world"
console.log(target.name); // "world
上例中的 proxy 代理對象將所有操作直接傳遞給 target 目標對象,代理對象 proxy 自身並沒有存儲該屬性,它只是簡單將值傳遞給 target 對象,proxy.name 與 target.name 的屬性值總是相等,因為它們都指向 target.name。
此時代理陷阱的處理器為空對象,當然處理器可以定義了一個或多個陷阱函數。
2.1 set 驗證對象屬性的存儲
假設你想要創建一個對象,並要求其屬性值只能是數值,這就意味著該對象的每個新增屬性
都要被驗證,並且在屬性值不為數值類型時應當拋出錯誤。
這時需要使用 set 陷阱函數來攔截傳入的 value,該陷阱函數能接受四個參數:
- trapTarget :將接收屬性的對象( 即代理的目標對象)
- key :需要寫入的屬性的鍵( 字符串類型或符號類型)
- value :將被寫入屬性的值;
- receiver :操作發生的對象( 通常是代理對象)
set 陷阱對應的反射方法和默認特性是Reflect.set()
,和陷阱函數一樣接受這四個參數,並會基於操作是否成功而返回相應的結果:
let targetObj = {};
let proxyObj = new Proxy(targetObj, {
set: set
});
/* 定義 set 陷阱函數 */
function set (trapTarget, key, value, receiver) {
if (isNaN(value)) {
throw new TypeError("Property " + key + " must be a number.");
}
return Reflect.set(trapTarget, key, value, receiver);
}
/* 測試 */
proxyObj.count = 123;
console.log(proxyObj.count); // 123
console.log(targetObj.count); // 123
proxyObj.anotherName = "proxy" // TypeError: Property anotherName must be a number.
示例中set 陷阱函數成功攔截傳入的 value 值,你可以嘗試一下,如果註釋或不return Reflect.set()
會發生什麽?,答案是攔截陷阱就不會有反射響應。
需要註意的是,直接給 targetObj 目標對象賦值時是不會觸發 set 代理陷阱的,需要通過給代理對象賦值才會觸發 set 代理陷阱與反射。
2.2 get 驗證對象屬性的讀取
JS 非常有趣的特性之一,是讀取不存在的屬性時並不會拋出錯誤,而會把undefined
當作該屬性的值。
對於大型的代碼庫,當屬性名稱存在書寫錯誤時(不會拋錯)會導致嚴重的問題。這時使用 get 代理陷阱驗證對象結構(Object Shape),訪問不存在的屬性時就拋出錯誤,使對象結構驗證變得簡單。
get 陷阱函數會在讀取屬性時被調用,即使該屬性在對象中並不存在,它能接受三個參數:
- trapTarget :將會被讀取屬性的對象( 即代理的目標對象)
- key :需要讀取的屬性的鍵( 字符串類型或符號類型)
- receiver :操作發生的對象( 通常是代理對象)
Reflect.get()
方法接受與之相同的參數,並返回默認屬性的默認值。
let proxyObj = new Proxy(targetObj, {
set: set,
get: get
});
/* 定義 get 陷阱函數 */
function get(trapTarget, key, receiver) {
if (!(key in receiver)) {
throw new TypeError("Property " + key + " doesn‘t exist.");
}
return Reflect.get(trapTarget, key, receiver);
}
console.log(proxyObj.count); // 123
console.log(proxyObj.newcount) // TypeError: Property newcount doesn‘t exist.
這段代碼允許添加新的屬性,並且此後可以正常讀取該屬性的值,但當讀取的屬性並
不存在時,程序拋出了一個錯誤,而不是將其默認為undefined
。
還可以使用 has 陷阱驗證in
運算符,使用 deleteProperty 陷阱函數避免屬性被delete
刪除。
註:in
運算符用於判斷對象中是否存在某個屬性,如果自有屬性或原型屬性匹配這個名稱字符串或Symbol,那麽in
運算符返回 true。
targetObj = {
name: ‘targetObject‘
};
console.log("name" in targetObj); // true
console.log("toString" in targetObj); // true
其中 name 是對象自身的屬性,而 toString 則是原型屬性( 從 Object 對象上繼承而來),所以檢測結果都為 true。
has 陷阱函數會在使用in
運算符時被調用,並且會傳入兩個參數(同名反射Reflect.has()
方法也一樣):
- trapTarget :需要讀取屬性的對象( 代理的目標對象)
- key :需要檢查的屬性的鍵( 字符串類型或
Symbol
符號類型)
deleteProperty 陷阱函數會在使用delete
運算符去刪除對象屬性時下被調用,並且也會被傳入兩個參數(Reflect.deleteProperty()
方法也接受這兩個參數):
- trapTarget :需要刪除屬性的對象( 即代理的目標對象) ;
- key :需要刪除的屬性的鍵( 字符串類型或符號類型) 。
一些思考:分析過 Vue 源碼的都了解過,給一個 Vue 實例中掛載的 data,是通過Object.defineProperty
代理 vm._data 中的對象屬性,實現雙向綁定...... 同理可以考慮使用 ES6 的 Proxy 的 get 和 set 陷阱實現這個代理。
三、對象屬性陷阱
3.1 數據屬性與訪問器屬性
ES5 最重要的特征之一就是引入了 Object.defineProperty()
方法定義屬性的特性。屬性的特性是為了實現javascript引擎用的,屬於內部值,因此不能直接訪問他們。
屬性分為數據屬性和訪問器屬性。使用Object.defineProperty()
方法修改數據屬性的特性值的示例如下:
let obj1 = {
name: ‘myobj‘,
}
/* 數據屬性*/
Object.defineProperty(obj1,‘name‘,{
configurable: false, // default true
writable: false, // default true
enumerable: true, // default true
value: ‘jenny‘ // default undefined
})
console.log(obj1.name) // ‘jenny‘
其中[[Configurable]]
表示能否通過 delete 刪除屬性從而重新定義為訪問器屬性;[[Enumerable]]
表示能否通過for-in
循環返回屬性;[[Writable]]
表示能否修改屬性的值; [[Value]]
包含這個屬性的數據值。
對於訪問器屬性,該屬性不包含數據值,包含一對getter和setter函數,定義訪問器屬性必須使用Object.defineProperty()
方法:
let obj2 = {
age: 18
}
/* 訪問器屬性 */
Object.defineProperty(obj2,‘_age‘,{
configurable: false, // default true
enumerable: false, // default true
get () { // default undefined
return this.age
},
set (num) { // default undefined
this.age = num
}
})
/* 修改訪問器屬性調用 getter */
obj2._age = 20
console.log(obj2.age) // 20
/* 輸出訪問器屬性 */
console.log(Object.getOwnPropertyDescriptor(obj2,‘_age‘))
// { get: [Function: get],
// set: [Function: set],
// enumerable: false,
// configurable: false }
[[Get]]
在讀取屬性時調用的函數, [[Set]]
再寫入屬性時調用的函數。使用訪問器屬性的常用方式,是設置一個屬性的值導致其他屬性發生變化。
3.2 檢查屬性的修改
代理允許你使用 defineProperty 同名函數陷阱函數攔截Object.defineProperty()
的調用,defineProperty 陷阱函數接受下列三個參數:
- trapTarget :需要被定義屬性的對象( 即代理的目標對象);
- key :屬性的鍵( 字符串類型或符號類型);
- descriptor :為該屬性準備的描述符對象。
defineProperty 陷阱函數要求在操作後返回一個布爾值用於判斷操作是否成功,如果返回了 false 則拋出錯誤,故可以使用該功能來限制哪些屬性可以被Object.defineProperty() 方法定義。
例如,如果想阻止定義Symbol
符號類型的屬性,你可以檢查傳入的屬性值,若是則返回 false:
/* 定義代理 */
let proxy = new Proxy({}, {
defineProperty(trapTarget, key, descriptor) {
if (typeof key === "symbol") {
return false;
}
return Reflect.defineProperty(trapTarget, key, descriptor);
}
});
Object.defineProperty(proxy, "name", {
value: "proxy"
});
console.log(proxy.name); // "proxy"
let nameSymbol = Symbol("name");
// 拋出錯誤
Object.defineProperty(proxy, nameSymbol, {
value: "proxy"
})
四、函數代理
4.1 構造函數 & 立即執行
函數的兩個內部方法:[[Call]]
與[[Construct]]
會在函數被調用時調用,通過代理函數來為這兩個內部方法設置陷阱,從而控制函數的行為。
[[Construct]]
會在函數被使用new
運算符調用時執行,代理觸發construct()
陷阱函數,並和Reflect.construct()
一樣接收到下列兩個參數:
- trapTarget :被執行的函數( 即代理的目標對象) ;
- argumentsList :被傳遞給函數的參數數組。
[[Call]]
會在函數被直接調用時執行,代理觸發apply()
陷阱函數,它和Reflect.apply()
都接收三個參數:
- trapTarget :被執行的函數( 代理的目標函數) ;
- thisArg :調用過程中函數內部的 this 值;
- argumentsList :被傳遞給函數的參數數組。
每個函數都包含call()
和apply()
方法,用於重置函數運行的作用域即 this 指向,區別只是接收參數的方式不同:call()
的參數需要逐個列舉、apply()
是參數數組。
顯然,apply 與 construct 要求代理目標對象必須是一個函數,這兩個代理陷阱在函數的執行方式上開啟了很多的可能性,結合使用就可以完全控制任意的代理目標函數的行為。
4.2 驗證函數的參數
看到apply()
和construct()
陷阱的參數都有被傳遞給函數的參數數組argumentsList
,所以可以用來驗證函數的參數。
例如需要保證所有參數都是某個特定類型的,並且不能通過 new 構造使用,示例如下:
/* 定義 sum 目標函數 */
function sum(...values) {
return values.reduce((previous, current) => previous + current, 0);
}
/* 定義 apply 陷阱函數 */
function applyRef (trapTarget, thisArg, argumentList) {
argumentList.forEach((arg) => {
if (typeof arg !== "number") {
throw new TypeError("All arguments must be numbers.");
}
});
return Reflect.apply(trapTarget, thisArg, argumentList);
}
/* 定義 construct 陷阱函數 */
function constructRef () {
throw new TypeError("This function can‘t be called with new.");
}
/* 定義 sumProxy 代理函數 */
let sumProxy = new Proxy(sum, {
apply: applyRef,
construct: constructRef
});
console.log(sumProxy(1, 2, 3, 4)); // 10
// console.log(sumProxy(1, "2", 3, 4)); // TypeError: All arguments must be numbers.
// let result = new sumProxy() // TypeError: This function can‘t be called with new.
sum() 函數會將所有傳遞進來的參數值相加,此代碼通過將 sum() 函數封裝在 sumProxy() 代理中,如果傳入參數的值不是數值類型,該函數仍然會嘗試加法操作,但在函數運行之前攔截了函數調用,觸發apply
陷阱函數以保證每個參數都是數值。
出於安全的考慮,這段代碼使用 construct
陷阱拋出錯誤,以確保該函數不會被使用 new 運算符調用
實例對象 instance 對象會被同時判定為 proxy 與 target 對象的實例,是因為 instanceof 運算符使用了原型鏈來進行推斷,而原型鏈查找並沒有受到這個代理的影響,因此 proxy 對象與 target 對象對於 JS 引擎來說就有同一個原型。
4.3 調用類的構造函數
ES6 中新引入了class
類的概念,類使用constructor
構造函數封裝數據,並規定必須始終使用 new 來調用,原因是類構造器的內部方法 [[Call]] 被明
確要求拋出錯誤。
代理可以攔截對於 [[Call]] 方法的調用,你可以借助代理調用的類構造器。例如在缺少 new 的情況下創建一個新實例,就使用 apply 陷阱函數實現:
class Person {
constructor(name) {
this.name = name;
}
}
let PersonProxy = new Proxy(Person, {
apply: function(trapTarget, thisArg, argumentList) {
return new trapTarget(...argumentList);
}
});
let me = PersonProxy("Jenny");
console.log(me.name); // "Jenny"
console.log(me instanceof Person); // true
console.log(me instanceof PersonProxy); // true
類構造器即類的構造函數,使用代理時它的行為就像函數一樣,apply
陷阱函數重寫了默認的構造行為。
關於類的更多有趣的用法,可參考 【ES6】更易於繼承的類語法
總結來說,代理的用途非常廣泛,因為它提供了修改 JS 內置對象的所有行為的入口。上述例子只是簡單的一些應用入門,還有更多復雜的示例,推薦閱讀《深入理解ES6》。
繼續加油鴨少年!!!
來源:https://segmentfault.com/a/1190000018100035
【ES6】改變 JS 內置行為的代理與反射