--- title: getter slug: Web/JavaScript/Reference/Functions/get tags: - ECMAScript 2015 - Functions - JavaScript translation_of: Web/JavaScript/Reference/Functions/get ---
get语法将对象属性绑定到查询该属性时将被调用的函数。
{get prop() { ... } }
{get [expression]() { ... } }
prop有时需要允许访问返回动态计算值的属性,或者你可能需要反映内部变量的状态,而不需要使用显式方法调用。在JavaScript中,可以使用 getter 来实现。
尽管可以结合使用getter和setter来创建一个伪属性,但是不可能同时将一个 getter 绑定到一个属性并且该属性实际上具有一个值。
使用get语法时应注意以下问题:
get 或具有相同属性的数据条目同时出现在一个对象字面量中(不允许使用 { get x() { }, get x() { } } 和 { x: ..., get x() { } })。这会为obj创建一个伪属性latest,它会返回log数组的最后一个元素。
const obj = {
log: ['example','test'],
get latest() {
if (this.log.length == 0) return undefined;
return this.log[this.log.length - 1];
}
}
console.log(obj.latest); // "test".
注意,尝试为latest分配一个值不会改变它。
delete操作符删除 getter只需使用 delete,就可删除 getter:
delete obj.latest;
defineProperty在现有对象上定义 getter要随时将 getter 添加到现有对象,使用 {{jsxref("Object.defineProperty()")}}.
var o = { a:0 }
Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)
var expr = 'foo';
var obj = {
get [expr]() { return 'bar'; }
};
console.log(obj.foo); // "bar"
Getters 给你一种方法来定义一个对象的属性,但是在访问它们之前不会计算属性的值。 getter 延迟计算值的成本,直到需要此值,如果不需要,您就不用支付成本。
一种额外的优化技术是用智能(或称记忆化)getters 延迟属性值的计算并将其缓存以备以后访问。该值是在第一次调用getter 时计算的,然后被缓存,因此后续访问返回缓存值而不重新计算它。这在以下情况下很有用:
这意味着你不应该为你希望更改其值的属性使用懒 getter,因为 getter 不会重新计算该值。
在以下示例中,对象具有一个 getter 属性。在获取属性时,该属性将从对象中删除并重新添加,但此时将隐式显示为数据属性。最后返回得到值。
get notifier() {
delete this.notifier;
return this.notifier = document.getElementById('bookmarked-notification-anchor');
},
对于Firefox代码,另请参阅定义defineLazyGetter()函数的XPCOMUtils.jsm代码模块。
get vs. defineProperty当使用 get 关键字时,它和{{jsxref("Object.defineProperty()")}} 有类似的效果,在{{jsxref("classes")}}中使用时,二者有细微的差别。
当使用 get 关键字时,属性将被定义在实例的原型上,当使用{{jsxref("Object.defineProperty()")}}时,属性将被定义在实例自身上。
class Example {
get hello() {
return 'world';
}
}
const obj = new Example();
console.log(obj.hello);
// "world"
console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
// undefined
console.log(
Object.getOwnPropertyDescriptor(
Object.getPrototypeOf(obj), 'hello'
)
);
// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }
| Specification |
|---|
| {{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}} |
{{Compat("javascript.functions.get")}}