JS 개체 리터럴 범위 및 참조

Question

변수를 기준으로 참조 할 수 있기 때문에 동적으로 추가하는 다양한 DOM 요소를 수집하기 위해 개체 리터럴을 사용합니다 (아래의 코드는 단순화되어 있으며 훨씬 더 많은 이벤트가있을 것입니다.) :

ui = { 
    header : $('<div id="header"></div>').appendTo('body').css('color','#009'), 
    footer : $('<div id="footer"></div>').appendTo('body').css('color','#990') 
} 

지금 난 그냥 여기에 다른 개체를 추가 할 수 있지만,이 오류가 발생합니다 소원 :

ui = { 
    header : $('<div id="header"></div>').appendTo('body').css('color','#009'), 
    footer : $('<div id="footer"></div>').appendTo('body').css('color','#990'), 
    headerSpecial : $('<span>some header</span>').appendTo(ui.header) // this line will cause an error "ui is not defined" 
} 

나는 이것이 겠지 '하는 UI 오브젝트를 닫을 때까지, 내가 할 수 있기 때문에 아직 안에는 아무것도 참조하지 마라. 그래서 나는이 것들을 분리 된 객체들로 분리해야 할 것입니다. 그러나 단일 객체에서이 모든 것을 수행 할 수있는 방법이 있습니까? 익명의 함수로 몇 가지 내용을 싸서 호출해야합니까?

Answer 1

개체 리터럴을 사용하는 대신 익명 함수를 인스턴스화하지 않는 이유는 무엇입니까?

ui = new function() { 
    this.header = $('<div id="header"></div>').appendTo('body').css('color','#009'); 
    this.footer = $('<div id="footer"></div>').appendTo('body').css('color','#990'); 
    this.headerSpecial = $('<span>some header</span>').appendTo(this.header); 
}; 

Answer 2

참조를 보유하기 위해 하나의 동일한 객체를 사용하는 것은 문제가되지 않지만 하나의 동일한 리터럴 표현에서 자체 참조를 사용할 수는 없습니다. 다음 두 단계로 수행하십시오.

// create the object 
ui = { 
    header : $('<div id="header"></div>').appendTo('body').css('color','#009'), 
    footer : $('<div id="footer"></div>').appendTo('body').css('color','#990') 
} 

// add a new property to the object 
ui.headerSpecial = $('<span>some header</span>').appendTo(ui.header);