JavaScript 이벤트 핸들러에서 \'this\'가 예기치 않게 작동하는 이유는 무엇입니까?

이벤트 핸들러 내의 모호한 "this"

JavaScript로 작업할 때 addEventListener 메소드를 사용하여 이벤트 핸들러를 생성하는 것이 일반적입니다. 그러나 이러한 핸들러 내에서 개체 속성에 액세스하려고 하면 특이한 동작이 발생합니다. "this"는 개체를 참조하는 것이 아니라 이벤트를 트리거한 요소를 참조하는 것입니다.

문제 시나리오

이 문제를 보여주는 다음 코드를 고려하세요.

function ticketTable(ticks) {
  this.tickets = ticks;
}

ticketTable.prototype.render = function(element) {
  // Render table...
  cell1.addEventListener("click", this.handleCellClick, false);
};

ticketTable.prototype.handleCellClick = function() {
  // "this" refers to the clicked cell element, not the ticketTable object
  // ...
};

handleCellClick 함수에서 "this"는 ticketTable 인스턴스가 아니라 클릭된 셀을 참조하기 때문에 this.tickets에 액세스하지 못합니다.

해결책: Bind 사용

이 문제를 해결하려면 주어진 함수에 대해 "this" 값을 명시적으로 정의할 수 있는 바인딩 메서드를 활용할 수 있습니다. .

function ticketTable(ticks) {
  this.tickets = ticks;
}

ticketTable.prototype.render = function(element) {
  // Render table...
  cell1.addEventListener("click", this.handleCellClick.bind(this), false);
};

bind(this)를 사용하면 나중에 handlerCellClick 함수가 호출될 때 "this"가 ticketTable 객체를 올바르게 참조하여 this.tickets와 같은 해당 속성에 액세스할 수 있도록 보장합니다. .

대체 솔루션

바인딩 외에도 대체 접근 방식에는 "this"(onclick 속성이 아님)를 사용하도록 명시적으로 정의된 이벤트 핸들러 함수를 사용하거나 특수 핸들 이벤트를 생성하는 것이 포함됩니다. 모든 이벤트를 처리하는 함수입니다.

위 내용은 JavaScript 이벤트 핸들러에서 \'this\'가 예기치 않게 작동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!