JS对象内获取Canvas上下文报undefined错误的原因是什么

这个错误的本质是对对象字面量初始化阶段的this指向存在认知偏差：

1. JavaScript中this的指向是代码执行时动态绑定的，不会在书写对象字面量时，自动绑定到正在创建的目标对象上。
2. 这段代码运行在全局作用域时，全局下的this在非严格模式指向window、严格模式下值为undefined，两种场景下这个this上都不存在你定义的canvas属性，自然会抛出“读取undefined的canvas属性”的错误。
3. 对象字面量的属性是按书写顺序逐行初始化的，执行到ctx赋值语句时，room对象本身还未创建完成，不可能通过this访问到同个对象字面量里刚声明的canvas属性。

修正方案 #

最直观的实现方式是分步赋值：

let room = {
  canvas: document.getElementById("room")
}
room.ctx = room.canvas.getContext("2d")

如果需要在初始化阶段一次性完成赋值，也可以用构造函数/类的写法，这类写法中构造逻辑内部的this会直接指向新创建的实例：

class Room {
  constructor(canvasId) {
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext("2d");
  }
}
const room = new Room("room");

内容的提问来源于stack exchange，提问作者Tamas Nyari