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 中,我们不需要编写大量代码,或者可以说,我们需要编写更少的代码来完成更多的事情。处理程序方法通常被称为陷阱,因为处理程序方法会阻止对底层目标对象的调用。