JavaScript에서 \'var self = this\'를 사용하는 이유는 무엇입니까?

JavaScript 관용어: "var self = this" 이해

"var self = this;" 관용구는 JavaScript 코드, 특히 이벤트 핸들러에서 흔히 볼 수 있습니다. 이를 통해 중첩된 함수 내 또는 이벤트 핸들러 클로저 내에서 원래 "this" 개체에 대한 참조를 유지할 수 있습니다.

생성자 또는 개체 내에서 함수를 정의하면 실행 컨텍스트가 변경되고 "this"는 참조합니다. 엄격하지 않은 모드에서는 전역 개체(창)에 연결됩니다. 엄격 모드에서는 "this"가 정의되지 않습니다. 이를 방지하기 위해 개발자는 "var self = this"를 사용하여 원본 개체에 대한 참조를 보존합니다.

"var self = this"를 사용하는 이유는 무엇입니까?

다음을 고려하세요. WebKit HTML5 SQL Storage Notes 데모의 다음 예:

function Note() {
  var self = this;

  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
  note.addEventListener('click', function() { return self.onNoteClick() }, false);
  this.note = note;
  // ...
}

이 코드에서 "self"는 "this"에 할당됩니다. 생성자 내에서. 이렇게 하면 이벤트 핸들러가 호출될 때(예: 'note' div 클릭) "this"가 여전히 원래 Note 개체를 참조하여 "onMouseDown"과 같은 메서드를 올바르게 호출할 수 있습니다.

"var self = this"가 흔한가요?

예, 이 관용구는 JavaScript 애플리케이션에서 널리 사용됩니다. 특히 다음을 다룰 때 더욱 그렇습니다. 클로저 및 이벤트 핸들러. 이를 통해 개발자는 중첩된 함수 내에서 원래 컨텍스트에 대한 참조를 유지할 수 있습니다.

대체 접근 방식

"var self = this"는 효과적이지만 다음과 같은 경우 혼란스러울 수 있습니다. 읽다. 또 다른 접근 방식은 주변 컨텍스트의 "this" 바인딩을 유지하는 화살표 기능(ES6에 도입됨)을 사용하는 것입니다.

예:

function Note() {
  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', (e) => { this.onMouseDown(e) });
  note.addEventListener('click', () => { this.onNoteClick() });
  this.note = note;
  // ...
}

참고:

이제 "var self = this"를 사용하면 잠재적으로 오류가 발생할 수 있으므로 사용하지 않는 것이 좋습니다. "window.self". "이" 바인딩을 유지하려면 화살표 기능이나 다른 대안을 사용하는 것이 좋습니다.

위 내용은 JavaScript에서 \'var self = this\'를 사용하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!