JavaScript 对象属性可以引用同一对象的另一个属性吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3173610/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can a JavaScript object property refer to another property of the same object?
提问by Bungle
I recently tried to create an object like this:
我最近尝试创建一个这样的对象：
var carousel = {
$slider: $('#carousel1 .slider'),
panes: carousel.$slider.children().length
};
My intentions were to improve jQuery's selector performance by caching the results of $('#carousel1 .slider')in an object property, and to keep the code concise and relatively DRY.
我的意图是通过缓存$('#carousel1 .slider')对象属性中的结果来提高 jQuery 选择器的性能，并保持代码简洁和相对干燥。
However, this didn't work. When the code executed, it threw an exception when trying to parse the value of panes, complaining that carouselwas undefined.
然而，这并没有奏效。当代码执行时，它在尝试解析 的值时抛出异常panes，抱怨carousel未定义。
This makes sense, since I'd assume that carouselisn't fully declared until the assignment statement has been fully executed. However, I'd like to avoid resorting to this:
这是有道理的，因为我认为carousel在完全执行赋值语句之前不会完全声明它。但是，我想避免诉诸于此：
var carousel = {};
carousel.$slider = $('#carousel1 .slider');
carousel.panes = carousel.$slider.children().length;
That's not too much worse, but the carouselobject will have several more properties that rely on the values of other properties, so that could quickly become verbose.
这还不算太糟糕，但carousel对象将有更多的属性依赖于其他属性的值，因此很快就会变得冗长。
I tried using this, but to no avail. I may well not have been using it correctly, or that may not be a valid approach anyway.
我尝试使用this，但无济于事。我可能没有正确使用它，或者无论如何这可能不是一种有效的方法。
Is there a way for properties of an object to refer to other properties of the same object, while that object is still being declared?
有没有办法让对象的属性引用同一对象的其他属性，而该对象仍在声明中？
Based on Matthew Flaschen and casablanca's answers (thanks, guys!), I think these are the versions of my actual code that I'd end up with, based on each approach:
基于 Matthew Flaschen 和 casablanca 的回答（谢谢，伙计们！），我认为这些是我最终得到的实际代码的版本，基于每种方法：
// Matthew Flaschen
var carousel = new (function() {
this.$carousel = $('.carousel');
this.$carousel_window = this.$carousel.find('.window');
this.$carousel_slider = this.$carousel.find('.slider');
this.$first_pane = this.$carousel.find('.slider').children(':first-child');
this.panes = this.$carousel_slider.children().length;
this.pane_gap = this.$first_pane.css('margin-right');
})();
and
和
// casablanca
var $carousel = $('.carousel'),
$carousel_slider = $carousel.find('.slider'),
$first_pane: $carousel.find('.slider').children(':first-child');
var properties = {
$carousel_window: $carousel.find('.window'),
panes: $carousel_slider.children().length,
pane_gap: $first_pane.css('margin-right')
};
properties.$carousel = $carousel;
properties.$carousel_slider = $carousel_slider;
properties.$first_pane = $first_pane;
Assuming those are both correct (I haven't tested them), it's kind of a tough call. I think I slightly prefer Matthew Flaschen's approach, since the code is contained to a structure that more closely resembles an object declaration. There's also ultimately only one variable created. However, there's a lot of thisin there, which seems repetitive - although that may be just the price to pay.
假设这些都是正确的（我还没有测试过），这有点困难。我想我稍微喜欢 Matthew Flaschen 的方法，因为代码包含在一个更类似于对象声明的结构中。最终也只创建了一个变量。然而，里面有很多this，似乎是重复的——尽管这可能只是要付出的代价。
采纳答案by Matthew Flaschen
Not with object literals (thishas the same value during constructing of the literal that it did before-hand). But you can do
不适用于对象字面量（this在构造字面量期间具有与之前相同的值）。但是你可以做
var carousel = new (function()
{
this.$slider = $('#carousel1 .slider');
this.panes = this.$slider.children().length;
})();
This uses an object created from an anonymous function constructor.
这使用从匿名函数构造函数创建的对象。
Note that $sliderand panesare public, so can be accessed as carousel.$slider, etc.
请注意，$slider和panes是公共的，因此可以作为carousel.$slider等访问。
回答by casablanca
Unfortunately, no. The {}syntax initiates creation of a new object, but until the object is created, it is not assigned to the carouselvariable. Also, the thisvalue can only change as a result of a function call. If your "several more properties" are all going to depend only on slider, then you could get around with something like this:
抱歉不行。该{}语法发起新对象的创建，但直到被创建的对象，它没有分配给carousel变量。此外，该this值只能作为函数调用的结果而改变。如果您的“更多属性”都将仅依赖于slider，那么您可以解决以下问题：
var slider = $('.slider');
var carousel = {
panes: slider.children.length(),
something: slider.something_else,
// ...
};
carousel.slider = slider;
