Почему это выражение равно NaN, но равно действительному ответу, когда определено где-то еще?

Question

Итак, я пишу игру на JS Canvas и создаю свой собственный графический интерфейс с нуля. Для этого я создал объект button с полями x, y, width, height и intersects(click_event). По какой-то причине, когда я непосредственно помещаю это выражение для x, оно возвращает NaN, хотя выражение работает везде.

Это простая игра на холсте. Я знаю, что, возможно, мог бы использовать какой-то подвох, чтобы обойти это, но я хочу сохранить свой код в чистоте. Я просто не понимаю, почему это не сработает.

var button = {
    height:80, 
    width:200, 
    x:canvas.width/2 - this.width/2, //this is the problem
    y:200, 
    //other stuff
};



console.log(button.x);  //this prints "NaN"
console.log(canvas.width/2 - button.width/2);  //prints correct num

Ширина холста равна 1000, поэтому 1000/2 - 200/2 должны равняться 400, что и происходит при вызове внутри console.log.

Но когда я помещаю его внутрь button.x, оно оценивается как NaN.

Answer 1

Это может быть достигнуто с помощью функции конструктора

var button = new function() {
    this.height=80; 
    this.width=200;
    this.x = canvas.width/2 - this.width/2;
    this.y=200; 
}

Answer 2

Вы не можете получить доступ / ссылаться на свойство внутри объекта во время инициализации.

Так что это никогда не сработает:

var myObject = {
  height: 2
  doubleHeight: 2 * this.height 
}

Одним из решений будет добавление poperty после инициализации объекта.Ваш код будет выглядеть так:

var button = {
    height:80, 
    width:200, 
    y:200, 
    //other stuff
};
button.x = canvas.width/2 - button.width/2

Другим решением было бы обернуть внутри функцию

function createButton(height, width, canvasWidth) {
  return {
    height: height,
    width: width,
    y: width,
    x: canvasWidth/2 - width/2
  }
}