Javascript 对象字面量：值初始化？

Question

我正在使用对象文字来创建带有方法的对象。
这是一个简单的例子。

var SizeManager = {
    width : 800,
    height : 600,
    ratio : this.width / this.height,
    resize : function (newWidth) {
        width = newWidth;
        height = newWidth / ratio;
    }
}

我的问题是 SizeManager.ratio 返回“NaN”。我很确定这是一个初始化问题。
有没有办法获得正确的比率值？
有没有办法将构造函数或初始值设定项分配给对象文字？
定义构造函数对象是唯一的方法吗？

编辑：当然 SizeManager 理想情况下是一个单例（只有一个对象），这就是我使用对象文字的方式。

Answer 1

是的，这是一个初始化问题。 this 在您使用它时并不引用您的 SizeManager 对象。 （对象初始值设定项不会更改 this 的值。）this 由您调用函数的方式设置，并且在整个函数调用过程中具有相同的值。您没有调用那里的任何函数，因此this具有该代码开始之前的任何值。

（我在本文最后从您的具体示例中指出了一些有关比率的内容，但首先让我们针对您提出的一般情况介绍一些选项。）

Daniel 给了你关于使 ratio 成为函数的良好指导，但他没有似乎没有意识到你想要改变宽度。或者，如果 width 和 height 不会改变，只需稍后计算即可：（

var SizeManager = {
    width : 800,
    height : 600,
    resize : function (newWidth) {
        this.width = newWidth;
        this.height = newWidth / this.ratio;
    }
};
SizeManager.ratio = SizeManager.width / SizeManager.height;

旁注：我已将 this. 添加到您在 resize 中引用的属性在您的原始版本中缺失，但如果没有它们，您将处理 隐式全局变量的恐怖，这是一件坏事^(tm)。）

当然，您可以将所有这些封装到工厂中：

function makeSizeManager(width, height) {
    return {
        width : width,
        height : height,
        ratio : width / height,
        resize : function (newWidth) {
            this.width = newWidth;
            this.height = newWidth / this.ratio;
        }
    };
}
var SizeManager = makeSizeManager(800, 600);

...但是您也可以将其作为实际的构造函数，这样您就不会创建大量重复（但相同）的 resize 函数：（

function SizeManager(width, height) {
    this.width = width;
    this.height = height;
    this.ratio = width / height;
}
SizeManager.prototype.resize = function (newWidth) {
    this.width = newWidth;
    this.height = newWidth / this.ratio;
};
var aSizeManagerInstance = new SizeManager(800, 600);

请注意，我对最后一个名称进行了一些更改。）

最后一点是：在您的具体示例中，您实际上根本不需要存储 ratio ，您可以这样做：

var SizeManager = {
    width : 800,
    height : 600,
    resize : function (newWidth) {
        var ratio = this.width / this.height;
        this.width = newWidth;
        this.height = newWidth / ratio;
    }
};

但这只是针对特定示例，因此上面的讨论讨论的是一般情况。

Answer 2

如果您希望它根据 width 和 height 的变化而变化，您的 ratio 属性实际上应该是一个方法：

var SizeManager = {
    width : 800,
    height : 600,
    ratio : function() {
      return this.width / this.height;
    },
    resize : function (newWidth) {
        width = newWidth;
        height = newWidth / ratio;
    }
}

另外，您可能想参考到 this.width 和 this.height 而不是 resize 中的 width 和 height > 方法。

Answer 3

在对象字面量中，this 仅在函数内部时引用对象字面量本身。你可以尝试这样的东西而不是对象文字； this 将引用您在函数内部和外部创建的对象。

var SizeManager = new function(){
    this.width = 800;
    this.height = 600;
    this.ratio = this.width / this.height;
    this.resize = function (newWidth) {
        this.width = newWidth;
        this.height = newWidth / this.ratio;
    }
}

这适用于单例模式。如果您需要多个 SizeManager，请将其设为构造函数而不是对象。

function SizeManager (w, h){
  w && (this.width=w);
  h && (this.height=h);
  this.ratio = this.width / this.height;
}
SizeManager.prototype={ 
  width: 800,
  height: 600,
  resize: function (newWidth) {
    this.width = newWidth;
    this.height = newWidth / this.ratio;
  }
}