ES6 中的處理程式方法詳解
ES6 指的是 ECMAScript 6。ES6 是 ECMAScript 的第六版,於 2015 年釋出,有時也稱為 ECMAScript 2015。ECMAScript 旨在標準化 JavaScript。在本文中,我們將詳細討論 ES6 中的處理程式方法。
ES6 簡介
眾所周知,ES6(ECMAScript 6)是為了標準化 JavaScript 而引入的。它是一種程式語言,在 ES6 中,我們不需要編寫大量程式碼,或者可以說,我們需要編寫更少的程式碼來完成更多的事情。JavaScript 遵循 ES6 標準,該標準概述了 JavaScript 實現中必須包含的所有要求、細節和規則。
ES6 有許多很棒的新特性,例如模組、模板字串、類解構、箭頭函式等。
ES6 中的處理程式方法
在上面我們討論了 ES6,現在我們將討論處理程式。處理程式是一個物件,其屬性是函式。這裡的函式定義了在代理上執行任務時代理操作的行為。
實際上,空處理程式將提供一個行為與目標完全相同的代理。可以透過在處理程式物件上定義預定義函式組中的任何一個來更改代理行為的某些部分。例如,透過指定 get(),可以為目標提供自定義的屬性訪問器。
處理程式語法
我們已經瞭解了 ES6 處理程式方法的基礎知識,現在讓我們來看一下處理程式方法的語法。
new Proxy(target, handler)
這裡我們使用 Proxy 建構函式(),它用於建立代理物件並接收兩個引數,即 Target 和 Handler。這裡的 Target 定義為 Proxy 將包裝的物件。任何型別的物件,例如原生陣列、函式,甚至另一個代理,都可以是該物件。Handler 定義為一個物件,其屬性是操作,這些操作指定代理如何響應請求。
ES6 中不同型別的處理程式方法
ES6(ECMAScript 6)中有很多處理程式方法。現在我們將討論其中的一些。處理程式方法通常被稱為陷阱,因為處理程式方法會阻止對底層目標物件的呼叫。
handler.apply()
透過代理,函式呼叫的結果只不過是此方法返回的值,這就是為什麼此函式也稱為函式呼叫的陷阱的原因。
此函式的語法為:
const cur = new Proxy(target_object, { apply: function(target_ojbect, thisArg, list_of_arguments){ … // body of function } });
這裡 target_object 是儲存目標物件的引數,thisArg 用於呼叫,list_of_arguments 是引數列表。
handler.construct()
此函式的語法為:
const cur = new Proxy(target_object, { apply: function(target_ojbect, thisArg, list_of_arguments){ … // body of function } });
這裡 target_object 是儲存目標物件的引數,thisArg 用於呼叫,list_of_arguments 是引數列表。
handler.construct()
此函式的語法為:
const cur = new Proxy(target_object, { construct: function(target_ojbect, list_of_arguments, newTarget){ … // body of function } });
handler.defineProperty()
此函式的語法為:
const cur = new Proxy(target_object, { defineProperty: function(target_ojbect, property, newTarget){ … // body of function } });
handler.deleteProperty()
此函式的語法為:
const cur = new Proxy(target_object, { deleteProperty: function(target_ojbect, property){ … // body of function } });
handler.get()
此函式的語法為:
const cur = new Proxy(target_object, { get: function(target_ojbect, property, getter){ … // body of function } });
handler.getOwnPropertyDescriptor()
此函式的語法為:
const cur = new Proxy(target_object, { getOwnPropertyDescriptor: function(target_ojbect, property){ … // body of function } });
handler.getPrototypeOf()
此函式的語法為:
const cur = new Proxy(target_object, { getPrototypeOf: function(target_ojbect){ … // body of function } });
handler.has()
此函式的語法為:
const cur = new Proxy(target_object, { has: function(target_ojbect, property){ … // body of function } });
handler.isExtensible()
此函式的語法為:
const cur = new Proxy(target_object, { isExtensible: function(target_ojbect){ … // body of function } });
handler.ownKeys()
此函式的語法為:
const cur = new Proxy(target_object, { ownKeys: function(target_ojbect){ … // body of function } });
handler.preventExtensions()
此函式的語法為:
const cur = new Proxy(target_object, { preventExtensions: function(target_ojbect){ … // body of function } });
handler.set()
此函式的語法為:
const cur = new Proxy(target_object, { set: function(target_ojbect, prop, value, getter){ … // body of function } });
handler.setPrototypeOf()
此函式的語法為:
const cur = new Proxy(target_object, { setPrototypeOf: function(target_ojbect, prot){ … // 函式體 } });示例
在上面,我們看到了 ES6 中不同型別的處理程式方法。現在讓我們來看一個 ES6 中處理程式的示例,以便我們能夠更好地理解 ES6 中的處理程式。
這裡我們將定義目標函式和處理程式函式。目標函式有兩個屬性 integer 和 string。處理程式函式允許對目標進行額外訪問,同時為 num 返回不同的值。
const target = { string: "This is the string", num: 567 }; const handler = { get: function (target, prop, receiver) { if (prop === "string") { return "This is the string"; // returning the value } return Reflect.get(...arguments); // returning the value } }; const obj = new Proxy(target, handler); console.log(obj.string); // "This is the string" console.log(obj.num); // "567"
在上面的程式碼中,首先我們定義了一個物件 target,它將包含字串和數字。然後,我們定義了另一個物件 handler,它將包含處理程式事件 get 和一個函式。在 handler 物件之後,我們定義了一個物件,該物件將包含 Proxy 的物件,並嘗試列印物件中包含的值,即字串和數字。
結論
在本文中,我們學習了 ES6(ECMAScript 6)是為了標準化 JavaScript 而引入的。它是一種程式語言,在 ES6 中,我們不需要編寫大量程式碼,或者可以說,我們需要編寫更少的程式碼來完成更多的事情。處理程式方法通常被稱為陷阱,因為處理程式方法會阻止對底層目標物件的呼叫。