Confused о свойствах литералов вложенных объектов

Question

Пока я читал исходный код Javascript (here) 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.

Это, очевидно, работает, как указано на скрипке, однако, что происходит? Точнее, сделав холст объектом 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. 

Answer 2

Kinda запутанный шаблон. С таким же именем canvas называются 4 разные вещи: свойство объекта, элемент HTML, метод и идентификатор элемента.

Может быть, этот пример может также поможет вам понять, архитектуры и соглашения об именах:

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 :-)