콜백에서 올바른 "this"에 액세스하는 방법

Question

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

으아악

하지만 생성된 객체를 참조하지 않고 다른 객체를 참조하는 콜백data 属性。看起来 this 내부에서 생성된 객체에 접근할 수 없습니다.

익명 함수 대신 객체 메서드를 사용해 보기도 했습니다.

으아악

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

올바른 개체에 액세스하는 방법은 무엇입니까?

Answer 1

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

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

1.bind()기능

을 이용해보세요 으아아아

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

으아아아

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

으아아아

3.화살표 기능

으아아아

Answer 2

소개此内容您应该了解

this(일명 "컨텍스트")는 함수가 정의된 방법/언제/어디가 아니라 함수가 호출되는 방법 에만 값이 달라지는 각 함수 내의 특수 키워드입니다. 다른 변수와 마찬가지로 어휘 범위의 영향을 받지 않습니다(화살표 함수 제외, 아래 참조). 다음은 몇 가지 예입니다:

으아아아

此에 대해 자세히 알아보려면 MDN 문서를 확인하세요.

---

올바른 인용 방법this

화살표 기능

을 사용하세요

ECMAScript 6에는 람다 함수로 생각할 수 있는 arrow 함수가 도입되었습니다. 그들만의 this 绑定。相反，this 就像普通变量一样在范围内查找。这意味着您不必调用 .bind 바인딩이 없습니다. 대신

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

으아아아 这个사용하지 마세요

this，而是访问它引用的对象。这就是为什么一个简单的解决方案是简单地创建一个也引用该对象的新变量。变量可以有任何名称，但常见的是 self 和 that실제로는 구체적으로 액세스

를 원하지 않지만

그것이 참조하는 개체에 액세스 self 是一个普通变量，因此它遵循词法范围规则并且可以在回调内部访问。这还有一个优点，即您可以访问回调本身的 this. 그렇기 때문에 간단한 해결책은 개체를 참조하는 새 변수를 만드는 것입니다. 변수의 이름은 무엇이든 가질 수 있지만 일반적인 이름은 self 및 that입니다.

으아아아

self는 일반 변수이므로 어휘 범위 지정 규칙을 따르며 콜백 내에서 액세스할 수 있습니다. 이는 콜백 자체의 this 값에 액세스할 수 있다는 장점도 있습니다.

명시적으로 콜백 설정 this - 1부

값은 자동으로 설정되므로 사용자가 제어할 수 없는 것처럼 보일 수 있지만 실제로는 그렇지 않습니다. .bind ^[docs]，它返回一个新函数，其中 this 绑定到一个值。该函数与您调用 .bind 的函数具有完全相同的行为，只是 this 是由您设置的。无论何时或如何调用该函数，this

모든 함수에는

.bind this 绑定到 MyConstructor 的 this

[docs]

메소드가 있는데, 이 메소드는 가 값에 바인딩된 새 함수를 반환합니다. 이 함수는 jQuery .proxy가 사용자에 의해 설정된다는 점을 제외하면 .bind를 호출하는 함수와 정확히 동일한 동작을 합니다. 함수가 언제 어떻게 호출되든 는 항상 전달된 값을 참조합니다. ^으아아아 이 예에서는 콜백의 를 MyConstructor의 값에 바인딩합니다.

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

콜백 설정 this - 2부

콜백을 허용하는 일부 함수/메서드는 콜백의 this 应该引用的值。这与您自己绑定它基本上相同，但是函数/方法会为您完成它。 Array#map이 참조해야 하는 값도 허용합니다. 이는 기본적으로 직접 바인딩하는 것과 동일하지만 함수/메서드가 대신 수행합니다. Array#map < em> ^[docs]이 방법입니다. 서명은 다음과 같습니다:

으아악

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

으아악

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

[docs]

---

컨텍스트라는 옵션을 설명합니다.

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

이 문제의 또 다른 일반적인 징후는 객체 메서드가 콜백/이벤트 핸들러로 사용될 때입니다. 함수는 JavaScript의 일급 시민이며 "메서드"라는 용어는 객체의 속성 값인 함수에 대한 구어체 용어일 뿐입니다. 그러나 함수에는 "포함" 개체에 대한 특정 링크가 없습니다. this.method被指定为点击事件处理程序，但如果点击document.body，记录的值将是未定义，因为在事件处理程序中，this 引用的是 document.body，而不是 Foo
다음 예를 고려해보세요: this 으아악 this.method 함수가 클릭 이벤트 핸들러로 지정되어 있지만 document.body를 클릭하면 기록된 값이 정의되지 않음이 됩니다. 이벤트 핸들러에서 는 Foo의 인스턴스가 아닌 document.body를 참조합니다. 이미 처음에 언급했듯이 이 가리키는 것은
가 어떻게 정의되는지

가 아니라 함수

가 어떻게 호출되는지 에 따라 달라집니다. 코드가 다음과 같다면 함수에 객체에 대한 암시적 참조가 없다는 것이 더 분명해질 수 있습니다. .bind将this 으아악

해결책 this은 위에서 언급한 것과 동일합니다. 가능한 경우 .bind를 사용하여

를 특정 값

에 명시적으로 바인딩합니다. 으아악

또는 익명 함수를 콜백/이벤트 핸들러로 사용하여 해당 함수를 개체의 "메서드"로 명시적으로 호출하고 개체(🎜)를 다른 변수에 할당합니다. 🎜 으아악 🎜또는 화살표 기능 사용: 🎜 으아악