Уточнение области видимости JavaScript

Question

Я читал о каждой статье, о которой я могу рассказать о области JavaScript, чтобы лучше ее понять. Я бы хотел до конца понять это. В настоящее время я читаю эту статью: http://www.digital-web.com/articles/scope_in_javascript/, и я только что закончил читать раздел «Осложнения» (немного больше, чем на полпути вниз), и подумал, что это очень полезно, но недостаточно ясно.

Он использует следующий код и считает onclick поведение the_button:

function BigComputer(answer) { 
    this.the_answer = answer; 
    this.ask_question = function() { 
    alert(this.the_answer); 
    } 
} 

function addhandler() { 
    var deep_thought = new BigComputer(42), 
    the_button = document.getElementById('thebutton'); 

    the_button.onclick = deep_thought.ask_question; 
} 

window.onload = addhandler; 

В статье говорится ... an event handler[,] runs in a different context than when it’s executed as an object method. Итак, если я правильно понимаю, то вызов метода ask_question в контексте сценария объект способ deep_thought.ask_question, изготовление thisdeep_thought. Но когда инициируется событие в DOM, цепочка вызовов изменяется на DOMelement.eventHandler.deep_thought.ask_question, делая thisDOMelement?

Answer 1

Это правильно! «this» в обработчиках событий - это тот элемент, к которому вы привязались. В этом случае это будет the_button. Предупреждение будет «undefined», так как the_button не имеет свойства the_answer.

Вы можете увидеть пример на: http://jsfiddle.net/zG7KR/

Посмотрите, что это выходы:

this.ask_question = function() { 
    alert(this.the_answer); 
};