먼저 두 계층의 함수가 중첩된 JavaScript 코드를 살펴보겠습니다.
var me = {
name : 'Jimbor',
blog : 'http://jmedia.cn/',
sayMyName : function(){
var pre = '내 이름은: ';
function displayName(){
alert(pre this.name)
displayName(); me.sayMyName();
코드 관점에서 보면 sayMyName() 호출을 통해 내 이름 속성이 표시되기를 바랍니다. 즉, 내 이름은 Jimbor입니다. 그런데 브라우저의 실행 결과는
코드 복사
이름 속성이 올바르게 표시되지 않는 이유는 무엇인가요? JavaScript는 전역 함수 내에서 이것을 전역 개체에 바인딩하고 중첩된 함수에도 동일한 설명이 사용되는 것으로 나타났습니다. 이 오류의 결과는 중첩된 함수가 특정 특수 작업을 완료하는 데 쉽게 사용될 수 없다는 것입니다. 왜냐하면 이러한 함수는 이것이 가리키는 개체를 다르게 해석하기 때문입니다.
물론 이 예에서는 중첩된 함수 없이 해당 함수를 완성할 수 있습니다. 그러나 일부 애플리케이션의 경우 이 구조가 필요할 수 있습니다. 다행히도 이 실수를 바로잡을 수 있는 방법이 있습니다.
방법 1: apply() 함수 사용
코드 복사
apply() 함수는 함수 호출 시 this가 가리키는 객체를 다시 작성할 수 있습니다. 첫 번째 this_obj는 원하는 객체입니다. 이것을 다시 작성하십시오. 가리키는 객체인 params_array는 호출 함수에 전달하는 데 사용되는 매개변수 배열입니다. 원본 코드를 다음과 같이 다시 작성합니다.
코드 복사
blog : 'http://jmedia.cn/',
sayMyName : function(){
var pre = '내 이름은 : ';
function displayName(){
alert(pre this.name);
}
displayName.apply(me);
}
}
me.sayMyName();
브라우저 실행 결과를 보세요:
My name is: Jimbor
유사한 함수로는 call()이 있습니다. 차이점은 call()이 매개변수를 배열로 묶는 대신 매개변수를 하나씩 전달한다는 것입니다.
방법 2: this를 that으로 대체
즉, 내부 함수가 this를 호출해야 하는 경우 가장 바깥쪽 함수에 변수를 정의하여 이 정의된 변수를 사용할 수 있습니다. . 일반적으로 관례에 따라 이 변수의 이름은 다음과 같습니다. 그런 다음 원본 코드를 다음과 같이 변경할 수 있습니다.
코드 복사
blog : 'http://jmedia.cn/',
sayMyName : function(){
var pre = '내 이름은 입니다 : ';
var that = this;
function displayName(){
alert(pre that.name)
displayName(); 🎜>me.sayMyName ();
정말 유용하지 않나요? 특정 객체 지정을 포함하지 않기 때문에 두 번째 방법이 더 권장됩니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
