[javascript] 이 JavaScript 관용구의 기초는 무엇입니까? var self = this?
WebKit HTML 5 SQL Storage Notes Demo 의 소스에서 다음을 보았습니다 .
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;
// ...
}저자는 사용 자기 곳곳 (함수 본문) 및 예약 이 다른 장소에서 (방법 인수리스트에 정의 된 함수의 몸). 무슨 일이야? 이제 한 번 알아 차렸으니 어디서나 볼 수 있을까요?
답변
alistapart.com 에서이 기사를 참조하십시오 . (Ed : 기사는 원래 링크 된 이후로 업데이트되었습니다)
selfthis컨텍스트가 변경되는 경우에도 원본에 대한 참조를 유지하는 데 사용됩니다 . 이벤트 처리기 (특히 클로저)에서 자주 사용되는 기술입니다.
편집 :self 이제는 사용하는 것이 권장 window.self되지 않으며 조심하지 않으면 오류가 발생할 수 있습니다.
변수라고 부르는 것은 특별히 중요하지 않습니다. var that = this;괜찮지 만 이름에 대한 마법은 없습니다.
컨텍스트 내에서 선언 된 함수 (예 : 콜백, 클로저)는 동일한 범위 이상에서 선언 된 변수 / 함수에 액세스 할 수 있습니다.
예를 들어, 간단한 이벤트 콜백 :
function MyConstructor(options) {
let that = this;
this.someprop = options.someprop || 'defaultprop';
document.addEventListener('click', (event) => {
alert(that.someprop);
});
}
new MyConstructor({
someprop: "Hello World"
});답변
현대 브라우저 는 일반 창이나 WebWorker의 전역 객체를 가리키는 전역 변수를self 제공하기 때문에 변수 이름 ‘self’는 더 이상 이런 식으로 사용해서는 안됩니다 .
혼란과 잠재적 충돌을 피하기 위해 글을 var thiz = this쓰거나 var that = this대신 사용할 수 있습니다 .
답변
예, 어디서나 볼 수 있습니다. 종종 that = this;입니다.
self이벤트에서 호출하는 함수 내부에서 어떻게 사용 되는지 확인하십시오 . 사람들은 자신의 컨텍스트를 할 것이다, 그래서 self보류하는 데 사용됩니다 this에 와서 그 Note().
self함수 실행 Note()이 완료된 후에 만 실행할 수 있지만 함수가 여전히 사용할 수 있는 이유 는 내부 함수가 클로저 로 인해 외부 함수의 컨텍스트를 가져 오기 때문 입니다.
답변
또한 이디엄 this을 싫어하는 경우 콜백 에서 원본 에 대한 참조를 유지하기위한 대체 프록시 패턴 이 있습니다 var self = this.
함수를 사용하여 지정된 컨텍스트로 호출 할 수있는 것처럼 function.apply또는 function.call, 당신이 래퍼를 작성할 수 반환로 함수를 호출하는 기능 apply이나 call주어진 컨텍스트를 사용하여. proxy이 패턴의 구현에 대해서는 jQuery의 함수를 참조하십시오 . 사용 예는 다음과 같습니다.
var wrappedFunc = $.proxy(this.myFunc, this);
wrappedFunc그런 다음 호출 할 수 this있으며 컨텍스트 버전을 갖습니다 .
답변
다른 사람들이 설명했듯이 클로저의var self = this; 코드 가 부모 범위를 다시 참조하도록 허용합니다 .
그러나 현재 2018 년이며 ES6는 모든 주요 웹 브라우저에서 널리 지원됩니다. var self = this;관용구는 예전과 같이 확실히 필요는 없다.
이제 화살표 함수를var self = this; 사용 하여 피할 수 있습니다 .
우리가 사용한 경우 var self = this:
function test() {
var self = this;
this.hello = "world";
document.getElementById("test_btn").addEventListener("click", function() {
console.log(self.hello); // logs "world"
});
};이제 화살표 기능을 사용할 수 없습니다 var self = this:
function test() {
this.hello = "world";
document.getElementById("test_btn").addEventListener("click", () => {
console.log(this.hello); // logs "world"
});
};화살표 함수에는 고유 한 기능이 없으며 this단순히 포함 범위를 가정합니다.
답변
변수는 메소드에 정의 된 인라인 함수로 캡처됩니다. this함수에서 다른 객체를 참조합니다. 이런 식으로 함수를 this외부 범위 의 참조로 유지할 수 있습니다 .
답변
자바 스크립트 문제입니다. 함수는 객체의 속성 인 경우, 더 적절하게, 메소드 호출 이 객체를 의미한다. 이벤트 핸들러의 예에서 포함 오브젝트는 이벤트를 트리거 한 요소입니다. 표준 함수가 호출 될 때, 이 전역 객체를 참조합니다. 당신이 당신의 예에서와 같이 중첩 된 기능이있을 때, 이 모두에서 외부 함수의 컨텍스트에 관련되지 않습니다. 개발자의 변형을 사용할 수 있도록 내부 기능은 포함하는 기능을 가진 공유 범위를 할 var that = this보존하기 위해 이 그들이 내부 기능에 필요합니다.
