首页 > web前端 > js教程 > 正文

JavaScript 代理能否为未定义的属性创建动态 Getter 和 Setter?

Patricia Arquette
发布: 2024-10-29 04:49:02
原创
972 人浏览过

 Can JavaScript Proxies Create Dynamic Getters and Setters for Undefined Properties?

JavaScript 中的动态 Getter 和 Setter

简介:

JavaScript 提供了灵活的机制,通过 getter 和 setter 来访问和修改属性设置器。虽然如何为预先确定的属性名称定义 getter 和 setter 是众所周知的,但出现了一个问题:是否可以实现适用于未定义属性名称的动态 getter 和 setter?

动态 Getters使用代理的 Setters (ES6):

从 ES2015 开始,JavaScript 引入了代理,它允许创建充当其他对象的“外观”的对象。这可以拦截和修改属性操作,包括 getter 和 setter。

示例:

以下代码片段演示了使用代理的动态 getter 和 setter:

<code class="javascript">"use strict";
if (typeof Proxy == "undefined") {
    throw new Error("This browser doesn't support Proxy");
}
let original = {
    example: "value",
};
let proxy = new Proxy(original, {
    get(target, name, receiver) {
        if (Reflect.has(target, name)) {
            let rv = Reflect.get(target, name, receiver);
            if (typeof rv === "string") {
                rv = rv.toUpperCase();
            }
            return rv;
        }
        return "missing";
    }
});

console.log(`original.example = ${original.example}`); // "original.example = value"
console.log(`proxy.example = ${proxy.example}`);       // "proxy.example = VALUE"
console.log(`proxy.unknown = ${proxy.unknown}`);       // "proxy.unknown = missing"
original.example = "updated";
console.log(`original.example = ${original.example}`); // "original.example = updated"
console.log(`proxy.example = ${proxy.example}`);       // "proxy.example = UPDATED"</code>
登录后复制

在此示例中:

  • 原始对象包含一个值为“value”的属性示例。
  • 代理被创建为原始对象的外观,具有get() 处理程序。
  • get() 处理程序拦截属性访问。如果该属性在原始版本中存在,则返回其值。如果未找到该属性,则返回“missing”。
  • 如果访问的属性值为字符串,则将其转换为大写。
  • 通过代理修改属性会反映在原始内容中。
  • 创建代理后在原始文件上定义的属性也可以通过代理访问。

以上是JavaScript 代理能否为未定义的属性创建动态 Getter 和 Setter?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板