콜백 함수에서 `this` 객체에 올바르게 액세스하는 방법

Question

이벤트 핸들러를 등록하는 생성자가 있습니다.

<code>function MyConstructor(데이터, 전송) {
    this.data = 데이터;
    Transport.on('데이터', 함수 () {
        경고(this.data);
    });
}

//전송 객체 시뮬레이션
var 운송 = {
    on: 함수(이벤트, 콜백) {
        setTimeout(콜백, 1000);
    }
};

// 호출 방법
var obj = new MyConstructor('foo', Transport);</code>

그러나 콜백 함수 내에서는 생성된 개체의 data 속성에 액세스할 수 없습니다. this는 생성된 객체를 가리키는 것이 아니라 다른 객체를 가리키는 것 같습니다.

또한 익명 함수 대신 객체 메서드를 사용해 보았습니다.

function MyConstructor(데이터, 전송) {
    this.data = 데이터;
    Transport.on('데이터', this.alert);
}

MyConstructor.prototype.alert = function() {
    경고(this.name);
};

하지만 역시 같은 문제가 있었습니다.

올바른 개체에 어떻게 액세스하나요?

Answer 1

다음은 하위 컨텍스트에서 상위 컨텍스트에 액세스하는 몇 가지 방법입니다.

1. bind() 기능을 사용할 수 있습니다.
2. context/this에 대한 참조를 다른 변수에 저장합니다(아래 예 참조).
3. ES6의 arrow 기능을 사용하세요.
4. 코드, 기능 디자인 및 아키텍처 수정 - 이를 위해서는 JavaScript의 디자인 패턴을 마스터해야 합니다.

1. bind()기능

을 사용하세요. 으아악

Underscore.js를 사용하는 경우 - http://underscorejs.org/#bind

으아악

2. context/this의 참조를 다른 변수에 저장하세요

으아악

3. 화살표 기능

으아악

Answer 2

this

에 대한 지식

this("컨텍스트"라고도 함)은 정의 방법이 아니라 함수 호출 방법에만 값이 달라지는 모든 함수 내부의 특수 키워드입니다. 다른 변수와 달리 어휘 범위의 영향을 받지 않습니다(화살표 함수 제외, 아래 참조). 다음은 몇 가지 예입니다:

으아악

this에 대해 자세히 알아보려면 MDN 설명서를 참조하세요.

---

올바른 인용 방법 this

화살표 기능

을 사용하세요

ECMAScript 6에는 람다 함수로 생각할 수 있는 arrow 함수가 도입되었습니다. 자체 this绑定。相反，this在作用域中查找，就像普通变量一样。这意味着你不需要调用.bind 바인딩이 없습니다. 대신

는 일반 변수처럼 범위에서 조회됩니다. 즉, .bind를 호출할 필요가 없습니다. 또한 다른 특별한 동작도 있습니다. 자세한 내용은 MDN 설명서를 참조하세요.

으아악 this사용되지 않음

this，而是需要访问它所指的对象。因此，一个简单的解决方案是创建一个新变量，也指向该对象。变量可以有任何名称，但常见的是self和that실제로는 구체적으로 액세스

할 필요가 없고, 오히려 그것이 참조하는 개체에 액세스할 필요가 있습니다. 따라서 간단한 해결책은 개체를 가리키는 새 변수를 만드는 것입니다. 변수의 이름은 무엇이든 가질 수 있지만 일반적인 이름은 self 및 that입니다.

으아악 self是一个普通变量，它遵循词法作用域规则，并且可以在回调函数内部访问。这还有一个优点，即可以访问回调函数本身的thisself는 일반 변수이므로 어휘 범위 지정 규칙을 따르며 콜백 함수 내에서 액세스할 수 있습니다. 이는 콜백 함수 자체의

값에 액세스할 수 있다는 장점도 있습니다.

this콜백 함수를 명시적으로 설정

- 1부

this값이 자동으로 설정되므로

값을 제어할 수 없는 것처럼 보일 수도 있지만 실제로는 그렇지 않습니다.

모든 함수에는 .bind ^[文档]，它返回一个将this绑定到一个值的新函数。该函数的行为与你调用.bind时的函数完全相同，只是this由你设置。无论如何或何时调用该函数，this를 값에 바인딩하는 새 함수를 반환하는

.bind

this绑定到MyConstructor的this[docs]

메서드가 있습니다. 이 함수의 동작은 사용자가 설정한다는 점을 제외하면 .bind를 호출할 때와 정확히 동일합니다. 함수가 호출되거나 호출될 때 는 항상 전달된 값을 참조합니다. 으아악 jQuery.proxy이 경우 콜백 함수의 를 MyConstructor의 ^{값에 바인딩합니다.} 참고:

jQuery의 바인딩 컨텍스트를 보려면 🎜🎜 🎜🎜[문서]🎜🎜🎜을 사용하세요. 그 이유는 이벤트 콜백을 바인딩 해제할 때 함수에 대한 참조를 저장할 필요가 없기 때문입니다. jQuery는 이를 내부적으로 처리합니다. 🎜

콜백 기능 설정this - 2부

콜백 함수를 허용하는 일부 함수/메서드는 콜백 함수의 this。这与手动绑定相同，但是函数/方法会为你执行绑定。例如，Array#map로 사용해야 하는 값도 허용합니다. 이는 수동 바인딩과 동일하지만 함수/메서드가 바인딩을 수행합니다. 예를 들어 Array#map [문서]이 방법입니다. 서명은 다음과 같습니다:

으아악

첫 번째 매개변수는 콜백 함수이고, 두 번째 매개변수는 this참조해야 하는 값입니다. 다음은 인위적인 예입니다:

으아악

참고: 에 this的值通常在函数/方法的文档中提到。例如，jQuery的$.ajax方法 ^[文档]描述了一个名为context 값을 전달할 수 있는지 여부는 일반적으로 함수/메서드 문서에 언급되어 있습니다. 예를 들어 jQuery의 $.ajax 메서드

---

[Documentation]

설명 컨텍스트라는 옵션:

FAQ: 객체 메서드를 콜백/이벤트 핸들러로 사용

this.method被分配为点击事件处理程序，但是如果点击document.body，记录的值将是undefined，因为在事件处理程序内部，this指的是document.body，而不是Foo이 문제의 또 다른 일반적인 징후는 객체 메서드를 콜백/이벤트 핸들러로 사용하는 것입니다. JavaScript에서 함수는 일급 시민이며 "메서드"라는 용어는 단순히 객체의 속성 값인 함수를 나타냅니다. 그러나 함수와 해당 "포함" 개체 사이에는 특정 링크가 없습니다.
this다음 예를 고려해보세요: 으아악 this.method 함수가 클릭 이벤트 핸들러로 할당되어 있지만, document.body를 클릭하면 기록된 값이 정의되지 않음이 됩니다. 이벤트 핸들러 내부에서 는 Foo의 인스턴스가 아닌 document.body를 참조합니다. 앞서 언급했듯이
는

이 정의되는 방식

이 아니라 함수 가 호출되는 방식 을 나타냅니다. .bind将this 코드가 다음과 같다면 더 분명할 것입니다:

으아악

🎜해결책 🎜은 위에서 언급한 것과 동일합니다. 가능한 경우 .bind를 사용하여 🎜를 특정 값 🎜에 명시적으로 바인딩합니다. 으아악 🎜또는 익명 함수를 콜백/이벤트로 사용