Given
var obj = {};
var _a = 1;
obj._a = 1;
obj.aGetter = function() {
return _a;
}
obj.aSetter = function(val) {
_a = val;
}
Object.defineProperty(obj, 'a', {
enumerable: true,
get: function () {
return _a;
},
set: function(val) {
_a = val;
}
});
使用 getter/setter 函数
obj.aSetter(2);
obj.aGetter();
与直接属性访问相比,Chrome/V8 性能会有所下降(约 3 倍):
obj._a = 2;
obj._a;
这是可以理解的。并使用描述符 getter/setter
obj.a = 2;
obj.a;
会引发Chrome 减少约 30 倍(41 到最新)性能 - 几乎和Proxy
。虽然 Firefox 和旧版 Chrome 使用描述符 getter/setter,但没有显着的性能损失。
最近的 Chrome/V8 版本中描述符 getter/setter 性能的确切问题是什么?这是一个可以监控的已知问题吗?
测量是使用 Benchmark.js(jsPerf 引擎)完成的。我无法提供 jsPerf 测试的链接来可视化差异,因为 jsPerf 的反 DDoS 措施已被严重搞砸,但我确信现有的措施可以证明这一点。
业绩变化与这个铬问题 https://codereview.chromium.org/714883003(致谢@VyacheslavEgorov)。
为了避免性能问题,应该使用原型。这是单例类可用于一次实例化对象的少数原因之一。
使用 ES5:
var _a = 1;
function Obj() {}
Object.defineProperty(Obj.prototype, 'a', {
enumerable: true,
get: function () {
return _a;
},
set: function(val) {
_a = val;
}
});
var obj = new Obj();
// or
var obj = Object.create(Obj.prototype);
或者使用 ES6 语法糖:
class Obj {
constructor() {
this._a = 1;
}
get a() {
return this._a;
}
set a(val) {
this._a = val;
}
}
let obj = new Obj();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)