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

当我在阅读Conway's Game of Life的一些Javascript源代码（here）时，我偶然发现了一些以前从未见过的东西（嗯，我在三周前开始使用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元素。

这很明显，正如小提琴上说的那样，但是，究竟发生了什么？更确切地说，通过使画布成为一个HTML元素对象，为什么我不会丢失它的所有其他属性，如context？

来源

2014-01-22 user2018675

@Alexander'this'内'Obj.canvas.init（）'点' Obj.canvas'，而不是'Obj' – Tibos

@Tibos哦，对了，我没有注意到嵌套在画布{}中。谢谢 – Alexander

这里有两个不同的对象叫做“画布”。一个是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.

来源

2014-01-22 12:20:24 georg

有点混淆模式。同名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>

Btw。只是提示和最佳实践（我知道那不是你的代码）：不要将其命名变量，如Obj，Object，Canvas :-)

来源

2014-01-22 12:33:58

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

回答

相关问题