有什么方法可以让下面的东西在JavaScript中工作?
var foo = {
a: 5,
b: 6,
c: this.a + this.b // Doesn't work
};
在当前的表单中,这段代码显然抛出了一个引用错误,因为它没有引用foo。但是有没有办法让对象字面量的属性值依赖于之前声明的其他属性呢?
有什么方法可以让下面的东西在JavaScript中工作?
var foo = {
a: 5,
b: 6,
c: this.a + this.b // Doesn't work
};
在当前的表单中,这段代码显然抛出了一个引用错误,因为它没有引用foo。但是有没有办法让对象字面量的属性值依赖于之前声明的其他属性呢?
当前回答
可维护性很好的替代语法:
let a = 5;
let b = 6;
let foo = {
a,
b,
c: a+b,
};
这是因为如果您没有显式地指定名称,JavaScript将使用变量名作为新创建的对象的属性名。对于像这样的短数组,如果在函数中,我个人会使用单行语法和return:
let a = 5;
let b = 6;
return { a, b, c:a+b };
其他回答
显而易见,简单的答案是缺失的,所以为了完整:
但是有没有办法让对象字面量的属性值依赖于之前声明的其他属性呢?
不。这里的所有解决方案都将它延迟到对象创建之后(以各种方式),然后分配第三个属性。最简单的方法就是这样做:
var foo = {
a: 5,
b: 6
};
foo.c = foo.a + foo.b;
其他的都是做同样事情的更间接的方式。(Felix的方法特别聪明,但需要创建和销毁临时函数,这增加了复杂性;并且要么在对象上留下额外的属性,要么[如果删除该属性]影响该对象上后续属性访问的性能。)
如果你需要它都在一个表达式中,你可以不使用temporary属性:
var foo = function(o) {
o.c = o.a + o.b;
return o;
}({a: 5, b: 6});
当然,如果你需要多次这样做:
function buildFoo(a, b) {
var o = {a: a, b: b};
o.c = o.a + o.b;
return o;
}
然后你需要使用它的地方:
var foo = buildFoo(5, 6);
有几种方法可以做到这一点;这是我要用的:
function Obj() {
this.a = 5;
this.b = this.a + 1;
// return this; // commented out because this happens automatically
}
var o = new Obj();
o.b; // === 6
只是为了思考-地点对象的属性的时间轴:
var foo = {
a: function(){return 5}(),
b: function(){return 6}(),
c: function(){return this.a + this.b}
}
console.log(foo.c())
上面也有更好的答案。这是我如何修改你质疑的示例代码。
更新:
var foo = {
get a(){return 5},
get b(){return 6},
get c(){return this.a + this.b}
}
// console.log(foo.c);
这里发布的其他答案更好,但这里有一个替代答案:
在初始化时设置值(不是getter或派生的,等等) 不需要任何类型的init()或对象字面量之外的代码 是一个对象文字,而不是一个工厂函数或其他对象创建机制。 不应该有任何性能影响(初始化时除外)
自动执行匿名函数和窗口存储
var foo = {
bar:(function(){
window.temp = "qwert";
return window.temp;
})(),
baz: window.temp
};
订单是有保证的(bar before baz)
它当然会污染window,但我无法想象有人会编写一个需要window的脚本。Temp是持久的。如果你偏执的话,可以试试tempMyApp。
它也很丑,但偶尔有用。一个例子是,当你使用一个具有严格初始化条件的API时,你不想重构,所以范围是正确的。
当然,它是干的。
下面是对象中'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
})()
},
}