Question

当我在阅读here的一些Javascript源代码（Conway's Game of Life）时，我偶然发现了一些我以前从未见过的东西（好吧，我开始使用Javascript三周了以前。为了上下文，我来自C ++背景，并且我使用Professional JavaScript for Web Developers作为指导来尝试理解JS）

情况如此（fiddle）：

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元素。当您在“init”行之后添加console.dir(Obj)时，您可以看到。

将这样的事情命名为一个好习惯是另一个问题。我宁愿这样写：

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.

Answer 2

有点令人困惑的模式。同名canvas被命名为4个不同的东西：对象属性，HTML元素，方法和元素ID。

也许这个示例也可以帮助您理解体系结构和命名约定：

http://jsfiddle.net/ondrek/FLPmL/

<强>使用Javascript：

var workingWithCanvas = {

    _canvasVariable : document.getElementById('IDcanvas'),

    init : function () {
        this._canvasVariable.width = 500;
        this._canvasVariable.context = this._canvasVariable.getContext('2d');
    },

    changeWidth : function (newWidth) {
        this._canvasVariable.width = newWidth;
    }

}; 

workingWithCanvas.init();
workingWithCanvas.changeWidth(10);

HTML：

<canvas id="IDcanvas"></canvas>

顺便说一下。只是暗示和最佳实践（我知道它不是你的代码）：不要命名Obj，Object，Canvas等变量： - ）

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

2 个答案: