Javascript + 基本对象文字范围问题答案

【问题标题】：Javascript + Basic Object Literal Scope IssueJavascript + 基本对象文字范围问题
【发布时间】：2013-03-25 14:23:43
【问题描述】：

我知道这是非常基本的，但是为什么 x 在这个代码块中返回 undefined 呢？有没有办法定义一个属性并立即使用它来设置另一个属性？

    var grid = {
        x : 75,
        y : 75,
        location : [grid.x, grid.y],                
        init : function () {
            console.log(grid.location[0]);
        }
    }

【问题讨论】：

如果你需要支持 IE8 或 location: function() { return [this.x, this.y] },。初始化相同。然后在网格之外调用它，你使用grid.location()

标签： javascript object-literal

【解决方案1】：

在将对象分配给变量之前，您不能使用该变量访问对象的属性。创建对象时，变量grid 仍未定义。在创建对象时，您没有对它的任何引用。

一旦将对象分配给变量，您就可以使用属性：

var grid = {
    x : 75,
    y : 75,
    init : function () {
        console.log(grid.location[0]);
    }
}

grid.location = [grid.x, grid.y];

您还可以将其包装在函数表达式中以获取返回完整对象的代码：

var grid =
  (function(){

    var obj = {
      x : 75,
      y : 75,
      init : function () {
        console.log(grid.location[0]);
      }
    };
    obj.location = [obj.x, obj.y];

    return obj;

  })();

【讨论】：

在您的第一个示例中，为什么不将this.location = [this.x, this.y]; 放入.init() 方法中，而不是从对象外部手动调用它？
@insertusernamehere：这是一种选择，但只有在 location 属性仅在 init 方法内访问或仅在调用 init 后访问时才有效。如果init 被多次调用，它也会重新分配属性，这可能是不可取的。
确实如此。我以为我忽略了其他一些魔法。 :) 在这种情况下，我认为.init()-method 将像某种构造函数一样，并且只会被调用一次。
@Guffa：我在 init 函数中设置了我的位置数组，因为它只有在调用 init 后才能访问。对所有这些好评如潮。

【解决方案2】：

有没有办法定义一个属性并立即使用它来设置另一个属性？

No. 但是，您可以use a getter，这或多或少是函数的语法糖：

var grid = {
    x : 75,
    y : 75,
    get location() {
        return [this.x, this.y];
    },                
    init : function () {
        console.log(grid.location[0]);
    }
}

http://jsfiddle.net/mattball/erUJj

这个答案总结了各种选项：https://stackoverflow.com/a/15486618

【讨论】：

注意：IE8 不支持此项。
@JeffShaver 我强烈建议您阅读我的回答中链接的文档。 developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/…
@MattBall 但是，根据您的链接文档，正如 Guffa 所说，直到版本 9 才与 IE 兼容。
@JeffShaver 这是真的。我的链接答案和 Guffa 的评论都说了这么多。
另请注意，这会改变行为，因为该属性每次使用时都会返回一个包含当前值的新数组，而不是在创建对象时分配值的副本。