JS是否可以具有与属性相同的getter和setter方法
Can JS have getters and setters methods named same as property?
我想在代码中实现类似的行为:
function Foo(name) {
this.name = name;
};
var myFoo = new Foo('myName');
myFoo.name('newMyName'); // sets myFoo.name = 'newMyName'
myFoo.name(); // returns 'myName'
但很明显,在这种情况下,我用 name 函数覆盖了 name 属性。是否有可能实现该功能?
在javascript中谈论getters和setters时,你可能会谈论以下两个概念之一:
1. Getters 和 setter 作为一个概念,就像任何其他 OO 语言一样。
这就是您问题中的代码所说明的情况。在这种情况下,对象的属性就是一个属性,它可以是对象或函数的属性。Javascript 在同一命名空间中跟踪两者。事实上,函数只是 JavaScript 中的对象,因此没有像 C 等语言那样为函数提供单独命名空间的概念。
在这种情况下,"getters"和"setters"只是常规函数,因此需要单独存储值。围绕这一点有几种策略。
一种是使用隐式getSomething()
和 Java 中常见的setSomething()
样式函数。这允许您将 getter 和 setter 与属性名称消除歧义,因为 getter 和 setter 在名称中添加了单词"get"和"set"。
第二种策略是你在问题中写的策略。在这种情况下,您需要将属性存储在另一个名称中,以免与 getter/setter 共享相同的名称。
第三种策略是将值存储在闭包中:
function Foo (name) {
var name = name;
this.name = function (str) {
if (str !== undefined) name = str;
return name;
}
}
请注意,在上面的代码中,值存储在name
但 getter/setter 是this.name
这是一个完全不同的变量。这允许您的示例代码按预期工作:
var me = new Foo('Mark');
me.name(); // returns Mark
me.name('Andy'); // sets name to Andy
2. Getters 和 setter 作为 JavaScript 中的一种机制。
这是遵循 ECMAscript 5 规范的较新版本 javascript 的一个功能。此功能允许属性在读取或写入代码时执行代码,类似于 DOM 对象的 .innerHTML
属性在为其分配某些内容时调用 HTML 解析器的方式。
getter 和 setter 的语法类似于函数,但引入了 get
和 set
关键字来代替 function
。
一个带有 getter 和 setter 的属性的简单示例:
var me = {
first_name : "",
last_name : "",
get name() {
return this.first_name + " " + this.last_name;
},
set name(str) {
var n = str.split(/'s+/);
this.first_name = n.shift();
this.last_name = n.join(' ');
}
}
上面的代码允许您将获取和设置first_name
和last_name
的函数视为变量而不是函数。要使用name
getter和setter,您只需执行以下操作:
me.name = "James Bond";
alert(me.first_name); // should alert James
alert(me.last_name); // should alert Bond
me.last_name = "Dean";
alert(me.name); // should alert James Dean
使用 javascript get/set 机制,不能使用相同的名称将值存储在对象中。例如:
var foo = {
set bar(x) {this.bar=x}
}
上面的代码将编译,但尝试设置 bar: foo.bar = 1
会导致堆栈溢出,因为无限循环 - setter 内部的this.bar=
将再次调用 setter。
如果你想使用与属性同名的JavaScript getter/setter,例如拦截某些setters来实现副作用,你可以为你的对象创建一个Proxy
。
function editableProxy (myObj) {
return new Proxy(myObj, {
toJSON: () => myObj,
get: function (target, prop) {
return Reflect.get(myObj, prop);
},
set: function (target, prop, receiver) {
if (prop === 'billTo') {
myObj.billToId = receiver?.id;
}
return Reflect.set(myObj, prop, receiver);
},
});
};
所有吸气剂都正常工作。设置器正常工作,但如果您设置了billTo
它也会设置一个 billToId。
let da = {id:123}
let wrapped = editableProxy(da)
let id = wrapped.id // 123
wrapped.id=234
wrapped.id===da.id // true
wrapped.billTo={id:567,name:'Big Bad Bill'} // triggers setter side effect
wrapped.billToId // 567
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- 数组在递归方法中设置为null
- 如何防止在javascript中执行继承属性的getter-setter方法
- localStorage-对象的getter-, setter-方法的目的是什么?
- 使用getter和setter实现函数链接的方法
- 在标准ES6类中添加getter方法有意义吗
- JS是否可以具有与属性相同的getter和setter方法
- 任何重写参数的方法'getter/setter性质
- 如何使用getter和setter方法创建一个Angular工厂而不遇到竞争条件
- 具有自身内在价值的对象.另一种做getter的方法
- JS能够覆盖对象的Getter方法
- 从Sequelize getter方法访问关联表
- 构造函数、getter和setter方法中的Object.defineProperty
- 在getter之后调用Jquery方法
- 应该在JavaScript中使用setter/getter方法吗?
- 私有属性的通用setter/getter方法
- 为什么jquery getter css()方法和javascript返回不同的样式变量值
- 数组属性的JavaScript getter方法
- 在Vuex getter中使用组件道具的正确方法是什么