提问人:kpozin 提问时间:1/6/2011 最后编辑:T.J. Crowderkpozin 更新时间:9/13/2023 访问量:208305
对象文字/初始值设定项中的自引用
Self-references in object literals / initializers
问:
有没有办法让类似以下内容的东西在 JavaScript 中工作?
var foo = {
a: 5,
b: 6,
c: this.a + this.b // Doesn't work
};
在当前形式中,此代码显然会引发引用错误,因为它不引用 .但是有没有办法让对象文字属性中的值依赖于之前声明的其他属性?this
foo
答:
好吧,我唯一能告诉你的是 getter:
var foo = {
a: 5,
b: 6,
get c() {
return this.a + this.b;
}
}
console.log(foo.c) // 11
这是 ECMAScript 第 5 版规范引入的语法扩展,大多数现代浏览器(包括 IE9)都支持该语法。
评论
foo.a
foo.b
foo.c
this
... x: { get c () { /*this is x, not foo*/ } } ...
foo
c
foo
c
this
你可以做这样的事情:
var foo = {
a: 5,
b: 6,
init: function() {
this.c = this.a + this.b;
return this;
}
}.init();
这将是对象的某种一次性初始化。
请注意,您实际上是在为 的返回值赋值,因此您必须 。init()
foo
return this
评论
delete this.init
return this
foo
init()
有几种方法可以实现此目的;这是我会使用的:
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: 5,
b: 6
};
foo.c = foo.a + foo.b;
所有其他方法都只是做同样事情的更间接的方法。(Felix 的方法特别聪明,但需要创建和销毁一个临时函数,这增加了复杂性;并且要么在对象上留下一个额外的属性,要么 [如果你的那个属性] 影响了对该对象的后续属性访问的性能。delete
如果你需要它全部位于一个表达式中,你可以在没有临时属性的情况下做到这一点:
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);
评论
this
您可以使用模块模式来完成此操作。就像:
var foo = function() {
var that = {};
that.a = 7;
that.b = 6;
that.c = function() {
return that.a + that.b;
}
return that;
};
var fooObject = foo();
fooObject.c(); //13
使用此模式,您可以根据需要实例化多个 foo 对象。
评论
}();
foo.c
fooObject.c()
只需实例化一个匿名函数:
var foo = new function () {
this.a = 5;
this.b = 6;
this.c = this.a + this.b;
};
评论
new Point(x, y)
var foo = function() { this.…; return this; }.call({});
new
你可以这样做
var a, b
var foo = {
a: a = 5,
b: b = 6,
c: a + b
}
当我不得不引用最初声明函数的对象时,这种方法已被证明对我有用。以下是我如何使用它的最小示例:
function createMyObject() {
var count = 0, self
return {
a: self = {
log: function() {
console.log(count++)
return self
}
}
}
}
通过将 self 定义为包含 print 函数的对象,可以允许该函数引用该对象。这意味着,如果您需要将打印函数传递到其他位置,则不必将打印函数“绑定”到对象。
如果您愿意,请改为如下图所示使用this
function createMyObject() {
var count = 0
return {
a: {
log: function() {
console.log(count++)
return this
}
}
}
}
然后下面的代码将记录 0、1、2,然后给出错误
var o = createMyObject()
var log = o.a.log
o.a.log().log() // this refers to the o.a object so the chaining works
log().log() // this refers to the window object so the chaining fails!
通过使用 self 方法,可以保证无论函数在何种上下文中运行,print 都将始终返回相同的对象。上面的代码运行良好,并在使用 self 版本的 时记录 0、1、2 和 3。createMyObject()
一些关闭应该处理这个问题;
var foo = function() {
var a = 5;
var b = 6;
var c = a + b;
return {
a: a,
b: b,
c: c
}
}();
正如您对任何函数声明所期望的那样,其中声明的所有变量都是私有的,并且因为它们都在范围内,因此它们都可以相互访问,而无需引用 ,就像您对函数所期望的那样。不同之处在于,此函数返回一个对象,该对象公开私有变量并将该对象分配给 。最后,您只返回要作为语句的对象公开的接口。foo
foo
this
foo
return {}
然后,该函数在末尾执行,导致整个 foo 对象被计算,实例化中的所有变量,并将返回对象添加为 的属性。()
foo()
评论
这一切的关键是 SCOPE。
您需要将要定义的属性的“父对象”(父对象)封装为其自己的实例化对象,然后可以使用关键字引用同级属性this
非常非常重要的一点是,如果你没有先这样做就引用,那么就会引用外部范围......这将是对象。this
this
window
var x = 9 //this is really window.x
var bar = {
x: 1,
y: 2,
foo: new function(){
this.a = 5, //assign value
this.b = 6,
this.c = this.a + this.b; // 11
},
z: this.x // 9 (not 1 as you might expect, b/c *this* refers `window` object)
};
在对象字面上创建新函数并调用构造函数似乎与原始问题完全不同,而且没有必要。
不能在对象文本初始化期间引用同级属性。
var x = { a: 1, b: 2, c: a + b } // not defined
var y = { a: 1, b: 2, c: y.a + y.b } // not defined
计算属性的最简单解决方案如下(无堆、无函数、无构造函数):
var x = { a: 1, b: 2 };
x.c = x.a + x.b; // apply computed property
此处发布的其他答案更好,但这里有一个替代方案:
- 在初始化时设置值(不是 getter 或派生等)
- 不需要对象文本之外的任何类型或代码
init()
- 是对象文本,而不是工厂函数或其他对象创建机制。
- 不应对性能产生任何影响(初始化时除外)
自执行匿名函数和窗口存储
var foo = {
bar:(function(){
window.temp = "qwert";
return window.temp;
})(),
baz: window.temp
};
订单是有保证的(之前)。bar
baz
它当然会污染,但我无法想象有人会写一个需要坚持不懈的剧本。也许如果你是偏执行狂。window
window.temp
tempMyApp
它也很丑陋,但偶尔有用。例如,当您使用具有严格初始化条件的 API 并且不想重构时,因此范围是正确的。
当然,它是干燥的。
只是为了思考 - 将对象的属性放在时间轴之外:
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);
评论
var foo = { get a(){return 5}, get b(){return 6}, get c(){return this.a + this.b} }
foo.c
foo.c()
foo.c
为了完成,在 ES6 中,我们有类(在编写本文时,只有最新的浏览器支持,但在 Babel、TypeScript 和其他转译器中可用)
class Foo {
constructor(){
this.a = 5;
this.b = 6;
this.c = this.a + this.b;
}
}
const foo = new Foo();
我使用以下代码作为替代方法,它可以工作。变量也可以是数组。(@ 福斯托 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]
如果你的对象被写成一个返回对象的函数,并且你使用了 ES6 对象属性的“methods”,那么这是可能的:
const module = (state) => ({
a: 1,
oneThing() {
state.b = state.b + this.a
},
anotherThing() {
this.oneThing();
state.c = state.b + this.a
},
});
const store = {b: 10};
const root = module(store);
root.oneThing();
console.log(store);
root.anotherThing();
console.log(store);
console.log(root, Object.keys(root), root.prototype);
现在在 ES6 中,您可以创建延迟缓存属性。首次使用时,该属性的计算结果为一次,成为普通的静态属性。结果:第二次跳过数学函数开销。
魔力在于吸气剂。
const foo = {
a: 5,
b: 6,
get c() {
delete this.c;
return this.c = this.a + this.b
}
};
在箭头 getter 中拾取周围的词法范围。this
foo // {a: 5, b: 6}
foo.c // 11
foo // {a: 5, b: 6 , c: 11}
评论
Object.defineProperty(foo, 'c', {get:function() {...}})
get
delete this.c
delete
get c
foo.c
a
b
foo.c
delete this.c
foo.c
return
foo.c
get c() { return this.a + this + b }
foo.c
这个解决方案怎么样,这也适用于带有数组的嵌套对象
Object.prototype.assignOwnProVal
= function (to,from){
function compose(obj,string){
var parts = string.split('.');
var newObj = obj[parts[0]];
if(parts[1]){
parts.splice(0,1);
var newString = parts.join('.');
return compose(newObj,newString);
}
return newObj;
}
this[to] = compose(this,from);
}
var obj = { name : 'Gaurav', temp :
{id : [10,20], city:
{street:'Brunswick'}} }
obj.assignOwnProVal('street','temp.city.street');
obj.assignOwnProVal('myid','temp.id.1');
抛出一个选项,因为我没有看到这个确切的场景。如果您不想在更新时更新,那么 ES6 IIFE 可以很好地工作。c
a
b
var foo = ((a,b) => ({
a,
b,
c: a + b
}))(a,b);
为了满足我的需要,我有一个与数组相关的对象,该数组最终将在循环中使用,所以我只想计算一次一些常见的设置,所以这就是我所拥有的:
let processingState = ((indexOfSelectedTier) => ({
selectedTier,
indexOfSelectedTier,
hasUpperTierSelection: tiers.slice(0,indexOfSelectedTier)
.some(t => pendingSelectedFiltersState[t.name]),
}))(tiers.indexOf(selectedTier));
由于我需要为 设置一个属性,并且在设置该属性时需要使用该值,因此我首先计算该值并将其作为参数传递给 IIFEindexOfSelectedTier
hasUpperTierSelection
这里有一个简洁的 ES6 方法:
var foo = (o => ({
...o,
c: o.a + o.b
}))({
a: 5,
b: 6
});
console.log(foo);
我用它来做这样的事情:
const constants = Object.freeze(
(_ => ({
..._,
flag_data: {
[_.a_flag]: 'foo',
[_.b_flag]: 'bar',
[_.c_flag]: 'oof'
}
}))({
a_flag: 5,
b_flag: 6,
c_flag: 7,
})
);
console.log(constants.flag_data[constants.b_flag]);
注意:此解决方案使用 Typescript(如果需要,您可以使用 TS 编译的 vanilla JS)
class asd {
def = new class {
ads= 'asd';
qwe= this.ads + '123';
};
// this method is just to check/test this solution
check(){
console.log(this.def.qwe);
}
}
// these two lines are just to check
let instance = new asd();
instance.check();
这里使用类表达式来获取我们想要的嵌套对象文字接口。恕我直言,这是能够在创建过程中引用对象属性的下一个最佳方法。
需要注意的主要一点是,在使用此解决方案时,您的界面与从对象字面量中获得的界面完全相同。语法非常接近对象文字本身(与使用函数等相比)。
比较以下内容
我提出的解决方案
class asd {
def = new class {
ads= 'asd';
qwe= this.ads + '123';
};
如果对象文字就足够了,则解决方案
var asd = {
def : {
ads:'asd',
qwe: this.ads + '123';, //ILLEGAL CODE; just to show ideal scenario
}
}
另一个例子
在这个类中,您可以在它们之间组合多个相对路径,这在对象字面上是不可能的。
class CONSTANT {
static readonly PATH = new class {
/** private visibility because these relative paths don't make sense for direct access, they're only useful to path class
*
*/
private readonly RELATIVE = new class {
readonly AFTER_EFFECTS_TEMPLATE_BINARY_VERSION: fs.PathLike = '\\assets\\aep-template\\src\\video-template.aep';
readonly AFTER_EFFECTS_TEMPLATE_XML_VERSION: fs.PathLike = '\\assets\\aep-template\\intermediates\\video-template.aepx';
readonly RELATIVE_PATH_TO_AFTER_EFFECTS: fs.PathLike = '\\Adobe\\Adobe After Effects CC 2018\\Support Files\\AfterFX.exe';
readonly OUTPUT_DIRECTORY_NAME: fs.PathLike = '\\output';
readonly INPUT_DIRECTORY_NAME: fs.PathLike = '\\input';
readonly ASSETS_DIRECTORY_NAME: fs.PathLike = '\\assets';
};
}
}
评论
如果你想使用原生 JS,其他答案提供了很好的解决方案。
但是,如果您愿意编写自引用对象,例如:
{
a: ...,
b: "${this.a + this.a}",
}
我编写了一个名为 self-referenced-object 的 npm 库,它支持该语法并返回一个本机对象。
评论
b
${this.a + this.a}
parseInt
this
另一种方法是先声明对象,然后再向对象分配属性:
const foo = {};
foo.a = 5;
foo.b = 6;
foo.c = foo.a + foo.b; // Does work
foo.getSum = () => foo.a + foo.b + foo.c; // foo.getSum() === 22
这样,您可以使用对象变量名称来访问已分配的值。
最适合文件。config.js
评论
foo
var x = {
a: (window.secreta = 5),
b: (window.secretb = 6),
c: window.secreta + window.secretb
};
这与 @slicedtoad 的答案几乎相同,但没有使用函数。
该属性运行良好,您还可以将绑定闭包用于只运行一次的“昂贵”函数(这仅适用于 var
,不适用于 const
或 let
)get
var info = {
address: (function() {
return databaseLookup(this.id)
}).bind(info)(),
get fullName() {
console.log('computing fullName...')
return `${this.first} ${this.last}`
},
id: '555-22-9999',
first: 'First',
last: 'Last',
}
function databaseLookup() {
console.log('fetching address from remote server (runs once)...')
return Promise.resolve(`22 Main St, City, Country`)
}
// test
(async () => {
console.log(info.fullName)
console.log(info.fullName)
console.log(await info.address)
console.log(await info.address)
console.log(await info.address)
console.log(await info.address)
})()
两种惰性解决方案
这里已经有很好的答案,我不是这方面的专家,但我是懒惰的专家,在我的专家眼中,这些答案似乎还不够懒惰。
第一:从匿名函数返回对象
T.J. Crowder、Henry Wrightson 和 Rafael Rocha 的回答略有不同:
var foo = (() => {
// Paste in your original object
const foo = {
a: 5,
b: 6,
};
// Use their properties
foo.c = foo.a + foo.b;
// Do whatever else you want
// Finally, return object
return foo;
})();
console.log(foo);
这里的小优势是只是按原样粘贴您的原始对象,而不必担心参数等(恕我直言,包装器函数以这种方式变得非常透明)。
第二种:使用 setTimeout
如果您不需要立即,这里可能会起作用:foo.c
var foo = {
a: 5,
b: 6,
c: setTimeout(() => foo.c = foo.a + foo.b, 0)
};
// Though, at first, foo.c will be the integer returned by setTimeout
console.log(foo);
// But if this isn't an issue, the value will be updated when time comes in the event loop
setTimeout( () => console.log(foo), 0);
下面是对象中“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
})()
},
}
只供大家娱乐:
var foo = ( (This={
a: 5,
b: 6, })=>({...This,
c: This.a + This.b }))(
);
console.log(foo);
评论
var
let
This
This
This
This
好的,我想出了另一个解决方案。在这里,我想初始化一个对象,表示每个时间单位的毫秒数。 事实证明,打字稿中的枚举在我的情况下不能使用,所以我声明了分配给对象的多个变量,如下所示:
const SECOND = 1000
const MINUTE = 60 * SECOND
const HOUR = 60 * MINUTE
const DAY = 24 * HOUR
const WEEK = 7 * DAY
export const TimeInMS = {
SECOND,
MINUTE,
HOUR,
DAY,
WEEK
}
这种方法的缺点是:
- 变量被定义为常量,即使我们不需要它们。因此,它需要无用的内存。
- 对象的每个值都必须声明为独立变量
我认为以下是可维护性的最佳代码,即使它不是对象文字语法:
var foo = function() {
this.a = 5;
this.b = 6;
this.c = this.a + this.b;
return this;
}.call({});
这将创建一个新的空对象,然后使用匿名函数设置其属性(使用 执行)。我认为唯一不好的部分是需要感觉像是一行额外的代码。不幸的是,我无法想出任何更好的方法来将对新创建的匿名对象的引用移动到 。{}
call()
return this
foo
我认为这比语法更好,因为这个语法不会在原型链中创建一个额外的级别,正如现有答案之一的评论中@Bergi所解释的那样。var foo = new function() {...}
但是,如果这真的是字面意思,除了一个补充之外没有任何其他逻辑,那么只写会更有意义
const foo = {
a:5,
b:6,
c:11, // sum of a + b
};
因为没有必要在运行时甚至编译时计算该总和。
具有相当好可维护性的替代语法:
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 };
尽管对象声明不允许引用先前的属性,但函数声明中的默认值允许引用。
因此,您可以这样做:
const foo = ((a=5, b=6, c=a+b) => ({a,b,c}))()
console.log(foo)
如果你想避免使用这个关键词,你可以在下面使用我的 ES6 方法this
const MEASUREMENT = {
device_width: 124,
canvas_padding: 24,
full_width: () => MEASUREMENT.device_width - MEASUREMENT.canvas_padding,
};
评论