Question

在下面的代码中，centerX的值不是数字（NAN）。我假设当计算属性centerX的值时，属性“x”和“width”是有效的。看来情况并非如此。属性初始化的顺序是什么。

var some_object = { x: 50,
                    width: 100,
                    centerX: this.x + this.width / 2 // This prints centerX as NAN
                  };

Answer 1

this是function execution context的属性，取决于函数的调用方式。在您的情况下，由于没有功能，this将默认为window，并且这些属性不存在，如下所示：

undefined + undefined / 2 == NaN

你可以创建一个getter：

var obj = {
  x: 50,
  width: 100,
  center: function(){
    return this.x + this.width / 2;
  }
};

obj.center(); // `this` is the receiver

或者，您可以在声明后将属性分配给对象：

var obj = {
  x: 50,
  width: 100
};

obj.center = obj.x + obj.width / 2;

这取决于您希望如何使用对象。第一个是便携式的，您可以在方便时计算属性。

Answer 2

在您的代码中，当计算centerX的值时，this并不像您期望的那样代表对象some_object。

如果您在浏览器控制台中键入代码，则this是浏览器窗口。

根据您的语句在代码中的位置，this可以是任何内容。这个任何东西都没有名为x的属性，或者是名为width的属性（或者两者都不是）：

this.x === undefined

或

this.width === undefined

所以

this.x + this.width / 2 === NaN

相反，您可以创建对象

var some_object = { 
  x: 50,
  width: 100
}

并添加一个函数

some_object.foo = function() { 
    // Here, 'this' exists and represents 'some_object'
    this.centerX = this.x + this.width / 2;
 }

// call the function
some_object.foo();

然后你会得到预期的

some_object.centerX === 50

属性初始化和属性依赖的顺序

2 个答案: