对嵌套对象文字属性感到困惑

Question

当我在阅读Conway的生命游戏的一些Javascript源代码(这里)时,我偶然发现了一些我以前从未见过的东西(好吧,我在三周前开始使用Javascript.为了上下文,我是来自C++背景,我正在使用专业JavaScript for Web Developers作为尝试理解JS的指南)

这是情况(小提琴):

var Obj = {
    canvas: {
        context : null,
        init : function() {
            this.canvas = document.getElementById('canvas');
            this.canvas.width = 50;
            this.context = this.canvas.getContext('2d');
            /* ... */
        }
    }
}

Obj.canvas.init();

我确实理解这是一个具有嵌套对象文字属性的对象文字.我不明白的是这 this.canvas = document.getElementById('canvas');部分.我以为我需要声明一个变量,例如context上面声明的变量,以获取canvas元素.

这显然有效,正如小提琴上所述,然而,发生了什么？更确切地说,通过使canvas成为HTML元素对象,为什么我不会丢失所有其他属性,例如context？

Answer 1

这里有两个不同的对象叫做"画布".一个是成员,Obj另一个是成员Obj.canvas.Obj.canvas是一个通用对象,Obj.canvas.canvas是一个HTML元素.console.dir(Obj)在"init"行之后添加时,可以看到.

命名这样的事情是否是一个好习惯是另一个问题.我宁愿这样写:

var Obj = {
    canvas: {
        context : null,
        element: null,
        init : function() {
            this.element = document.getElementById('canvas');
            this.element.width = 50;
            this.context = this.element.getContext('2d');
            etc.