有什么方法可以让下面的东西在JavaScript中工作?
var foo = {
a: 5,
b: 6,
c: this.a + this.b // Doesn't work
};
在当前的表单中，这段代码显然抛出了一个引用错误，因为它没有引用foo。但是有没有办法让对象字面量的属性值依赖于之前声明的其他属性呢?
当前回答
下面是对象中'this'行为的一个例子。
this.prop = 'external';
global.prop = 'global.prop';
const that = this;
const a = {
prop: 'internal',
prop1: this.prop, //external
log() {
return this.prop //internal
},
log1: () => {
return this.prop //external
},
log2: () => {
return function () {
return this.prop; //'global.prop' in node; 'external' in chrome
}()
},
log3: function () {
return (() => {
return this.prop; //internal
})()
},
}
其他回答
如果你想使用原生JS，其他答案提供了很好的解决方案。
但是如果你愿意写自引用对象，比如:
{
a: ...,
b: "${this.a + this.a}",
}
我写了一个叫做self- references -object的npm库，它支持这种语法并返回一个原生对象。
为了完成，在ES6中我们有类(在撰写本文时，只有最新的浏览器支持，但在Babel, TypeScript和其他编译器中可用)
class Foo {
constructor(){
this.a = 5;
this.b = 6;
this.c = this.a + this.b;
}
}
const foo = new Foo();
我唯一能告诉你的是getter
Var foo = { 5, b: 6, 获取c() { 返回。A + this.b; ｝ ｝ Console.log (foo.c) // 11
这是由ECMAScript第5版规范引入的一个语法扩展，大多数现代浏览器(包括IE9)都支持该语法。
现在在ES6中，你可以创建惰性缓存属性。在第一次使用时，该属性只计算一次，成为一个正常的静态属性。结果:第二次跳过数学函数开销。
神奇之处在于getter。
const foo = {
a: 5,
b: 6,
get c() {
delete this.c;
return this.c = this.a + this.b
}
};
在箭头getter中，这将拾取周围的词法作用域。
foo // {a: 5, b: 6}
foo.c // 11
foo // {a: 5, b: 6 , c: 11}
我使用下面的代码作为替代，它工作。变量也可以是array。(@福斯托R.)
var foo = {
a: 5,
b: 6,
c: function() {
return this.a + this.b;
},
d: [10,20,30],
e: function(x) {
this.d.push(x);
return this.d;
}
};
foo.c(); // 11
foo.e(40); // foo.d = [10,20,30,40]
