get
语法将对象属性绑定到查询该属性时将被调用的函数。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
语法
{get prop() { ... } } {get [expression]() { ... } }
参数
-
prop
- 要绑定到给定函数的属性名。
- expression
- 从 ECMAScript 2015 开始,还可以使用一个计算属性名的表达式绑定到给定的函数。
描述
有时需要允许访问返回动态计算值的属性,或者你可能需要反映内部变量的状态,而不需要使用显式方法调用。在JavaScript中,可以使用 getter 来实现。虽然可以使用 getter 和 setter 来创建一个伪属性类型,但是不可能同时将一个 getter 绑定到一个属性并且该属性实际上具有一个值。
使用get
语法时应注意以下问题:
- 可以使用数值或字符串作为标识;
- 必须不带参数(请参考Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments);
- 它不能与另一个
get
或具有相同属性的数据条目同时出现在一个对象字面量中(不允许使用{ get x() { }, get x() { } }
和{ x: ..., get x() { } }
)。
可通过 delete
操作符删除 getter。
示例
在新对象初始化时定义一个getter
这会为obj
创建一个伪属性latest
,它会返回log
数组的最后一个元素。
var 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 添加到现有对象,使用 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"
Smart / self-overwriting / lazy getters
Getters 给你一种方法来定义一个对象的属性,但是在访问它们之前不会计算属性的值。 getter 延续计算值的成本,直到需要值,如果不需要,您就不用支付成本。
一种额外的优化技术是用智能或记忆化 getters 延迟属性值的计算并将其缓存以备以后访问。该值是在第一次调用getter 时计算的,然后被缓存,因此后续访问返回缓存值而不重新计算它。这在以下情况下很有用:
- 如果属性值的计算是昂贵的(占用大量RAM或CPU时间,产生工作线程,检索远程文件等)。
- 如果现在不需要该值。它将在稍后使用,或在某些情况下它根本不使用。
- 如果被使用,它将被访问几次,并且不需要重新计算该值将永远不会被改变,或者不应该被重新计算。
这意味着你不应该为你希望更改其值的属性使用懒 getter,因为 getter 不会重新计算该值。
在以下示例中,对象具有一个 getter 属性。在获取属性时,该属性将从对象中删除并重新添加,但此时将隐式显示为数据属性。最后返回得到值。
get notifier() { delete this.notifier; return this.notifier = document.getElementById('bookmarked-notification-anchor'); },
对于Firefox代码,另请参阅定义defineLazyGetter()
函数的XPCOMUtils.jsm代码模块。
规范
Specification | Status | Comment |
---|---|---|
ECMAScript 5.1 (ECMA-262) Object Initializer |
Standard | Initial definition. |
ECMAScript 2015 (6th Edition, ECMA-262) Method definitions |
Standard | Added computed property names. |
ECMAScript Latest Draft (ECMA-262) Method definitions |
Draft |
浏览器兼容
Desktop | Mobile | Server | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
get |
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 2 | IE Full support 9 | Opera Full support 9.5 | Safari Full support 3 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 | nodejs Full support Yes |
Computed property names | Chrome Full support 46 | Edge Full support 12 | Firefox Full support 34 | IE No support No | Opera Full support 47 | Safari No support No | WebView Android Full support 46 | Chrome Android Full support 46 | Firefox Android Full support 34 | Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support 5.0 | nodejs Full support Yes |
Legend
- Full support
- Full support
- No support
- No support