對嵌套對象文字屬性感到困惑

當我在閱讀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

對嵌套對象文字屬性感到困惑

回答

相關問題