콜백 함수에서 `this` 객체에 올바르게 액세스하는 방법
P粉608647033
2023-08-20 16:11:32
<p>이벤트 핸들러를 등록하는 생성자가 있습니다. </p>
<p><br /></p>
<pre class="snippet-code-js lang-js Prettyprint-override"><code>function MyConstructor(데이터, 전송) {
this.data = 데이터;
Transport.on('데이터', 함수 () {
경고(this.data);
});
}
//전송 객체 시뮬레이션
var 운송 = {
on: 함수(이벤트, 콜백) {
setTimeout(콜백, 1000);
}
};
// 호출 방법
var obj = new MyConstructor('foo', Transport);</code></pre>
<p><br /></p>
<p>그러나 콜백 함수 내에서는 생성된 개체의 <code>data</code> 속성에 액세스할 수 없습니다. <code>this</code>는 생성된 객체를 가리키는 것이 아니라 다른 객체를 가리키는 것 같습니다. </p>
<p>또한 익명 함수 대신 객체 메서드를 사용해 보았습니다. </p>
<pre class="brush:php;toolbar:false;">function MyConstructor(데이터, 전송) {
this.data = 데이터;
Transport.on('데이터', this.alert);
}
MyConstructor.prototype.alert = function() {
경고(this.name);
};</pre>
<p>하지만 역시 같은 문제가 있었습니다. </p>
<p>올바른 개체에 어떻게 액세스하나요? </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
다음은 하위 컨텍스트에서 상위 컨텍스트에 액세스하는 몇 가지 방법입니다.
bind()기능을 사용할 수 있습니다.1.
을 사용하세요. 으아악bind()기능Underscore.js를 사용하는 경우 - http://underscorejs.org/#bind
으아악2. context/this의 참조를 다른 변수에 저장하세요
으아악3. 화살표 기능
으아악
에 대한 지식this
으아악this("컨텍스트"라고도 함)은 정의 방법이 아니라 함수 호출 방법에만 값이 달라지는 모든 함수 내부의 특수 키워드입니다. 다른 변수와 달리 어휘 범위의 영향을 받지 않습니다(화살표 함수 제외, 아래 참조). 다음은 몇 가지 예입니다:this에 대해 자세히 알아보려면 MDN 설명서를 참조하세요.올바른 인용 방법
this화살표 기능
을 사용하세요ECMAScript 6에는 람다 함수로 생각할 수 있는 arrow 함수가 도입되었습니다. 자체
는 일반 변수처럼 범위에서 조회됩니다. 즉,this绑定。相反，this在作用域中查找，就像普通变量一样。这意味着你不需要调用.bind바인딩이 없습니다. 대신.bind를 호출할 필요가 없습니다. 또한 다른 특별한 동작도 있습니다. 자세한 내용은 MDN 설명서를 참조하세요.으아악
this사용되지 않음
할 필요가 없고, 오히려 그것이 참조하는 개체에 액세스할 필요가 있습니다. 따라서 간단한 해결책은 개체를 가리키는 새 변수를 만드는 것입니다. 변수의 이름은 무엇이든 가질 수 있지만 일반적인 이름은this，而是需要访问它所指的对象。因此，一个简单的解决方案是创建一个新变量，也指向该对象。变量可以有任何名称，但常见的是self和that실제로는 구체적으로 액세스self및that입니다.으아악
값에 액세스할 수 있다는 장점도 있습니다.self是一个普通变量，它遵循词法作用域规则，并且可以在回调函数内部访问。这还有一个优点，即可以访问回调函数本身的thisself는 일반 변수이므로 어휘 범위 지정 규칙을 따르며 콜백 함수 내에서 액세스할 수 있습니다. 이는 콜백 함수 자체의
- 1부this콜백 함수를 명시적으로 설정
값을 제어할 수 없는 것처럼 보일 수도 있지만 실제로는 그렇지 않습니다.this값이 자동으로 설정되므로모든 함수에는
.bind[文档]，它返回一个将this绑定到一个值的新函数。该函数的行为与你调用.bind时的函数完全相同，只是this由你设置。无论如何或何时调用该函数，this를 값에 바인딩하는 새 함수를 반환하는.bindthis绑定到MyConstructor的this[docs]메서드가 있습니다. 이 함수의 동작은 사용자가 설정한다는 점을 제외하면
jQuery의 바인딩 컨텍스트를 보려면 🎜🎜 🎜🎜[문서]🎜🎜🎜을 사용하세요. 그 이유는 이벤트 콜백을 바인딩 해제할 때 함수에 대한 참조를 저장할 필요가 없기 때문입니다. jQuery는 이를 내부적으로 처리합니다. 🎜.bind를 호출할 때와 정확히 동일합니다. 함수가 호출되거나 호출될 때 는 항상 전달된 값을 참조합니다. 으아악jQuery.proxy이 경우 콜백 함수의 를MyConstructor의 값에 바인딩합니다. 참고:콜백 기능 설정
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를 사용하여 🎜를 특정 값 🎜에 명시적으로 바인딩합니다. 으아악 🎜또는 익명 함수를 콜백/이벤트로 사용