자 바스 크 립 트 의 this 포인터 에 대한 새로운 이해 공유

지금까지 this 에 대한 이 해 는 쓸 수 있 고 쓸 수 있 을 뿐 그 본질 을 깊이 연구 하지 않 았 다.이번 에는 '자 바스 크 립 트 더 굿 파 트' 를 빌려 깊 은 이 해 를 했다.(모든 디 버 깅 은 콘 솔 에서 볼 수 있 습 니 다. 브 라 우 저 F12 키)
다음은 우리 함께 이것 을 보 자.
우리 가 함 수 를 설명 할 때, 모든 함 수 는 정 의 된 parameters (형 삼) 를 제외 하고, 자신 에 게 는 두 개의 인자 가 추가 로 있 습 니 다. 하 나 는 this 이 고, 하 나 는 arguments (실 삼) 입 니 다.arguments 는 함수 가 실제 적 으로 받 아들 인 매개 변수 로 클래스 배열 입 니 다.arguments 저 는 간략하게 소개 하 겠 습 니 다. 중점 은 this 지침 에 두 겠 습 니 다.
대상 을 향 한 변환 에서 this 는 매우 중요 하 며, 그 값 은 호출 모드 에 달 려 있다.자 바스 크 립 트 에 서 는 모두 4 개의 호출 모드 가 있 습 니 다. 방법 호출 모드, 함수 호출 모드, 구조 함수 호출 모드, apply 호출 모드 입 니 다.
방법 호출 모드
함수 가 하나의 대상 으로서 의 속성 일 때, 우 리 는 통상 적 으로 이 함 수 를 이 대상 의 한 방법 이 라 고 부른다.이 방법 이 호출 될 때 this 는 이 방법 이 속 한 대상 을 가리킨다.

 
  
  
  <br>     var people = { 
  <br>         name : "Yika", 
  <br>         sayName : function(){ 
  <br>             console.log(this.name);   //"Yika" 
  <br>                         //this      people     
  <br>         } 
  <br>     } 
  <br>     people.sayName(); 
  <br>  
  
 
 

밤 에서 보 듯 이 this 는 sayName 대상 을 가리 키 는데 this 를 통 해 소속 대상 의 상하 문 을 얻 는 방법 이 바로 공공 방법 이다.(publice method)
함수 호출 모드
함수 가 호출 될 때 대상 의 방법 이 아 닙 니 다. 그러면 함수 로 호출 됩 니 다.
이 모드 호출, this 는 window 대상 을 가리 키 며, 이 함수 가 외부 함수 에서 호출 되 더 라 도 밤 을 보 겠 습 니 다.

 
  
  
  <br>     var name = "window-Yika"; 
  <br>     var people = { 
  <br>         name : "people-Yika", 
  <br>         student : function(){ 
  <br>             console.log(this);   //   this      people 
  <br>             function sayName(){ 
  <br>                 var name = "sayName-Yika"; 
  <br>                 console.log(this.name); //window-Yika 
  <br> 　　　　　　　　　　//  sayName         people    name ，  this   window  
  <br>             }; 
  <br>             sayName(); 
  <br>         } 
  <br>     } 
  <p></p> 
  <p>    people.student();<br> 
  
 

그 러 고 보 니 자 바스 크 립 트 라 는 '디자인 오류' 를 어떻게 해결 해 야 할 지 대충 알 고 있 지 않 을 까.
예, student 함수, 즉 여섯 번 째 줄 에 this 를 캐 시 합 니 다. 그리고 this 를 변 수 를 통 해 sayName 함수 로 옮 기 면 해결 할 수 있 습 니 다!

 
  
 var people = { 
  
         name : "people-Yika", 
  
         student : function(){ 
  
             var self = this; // this     
  
             function sayName(){ 
  
                 var name = "sayName-Yika"; 
  
                 console.log(self.name);  //"people-Yika"，   self    people   
  
             }; 
  
             sayName(); 
  
         } 
  
     } 
  
 
 

구조 함수 호출 모드
JavaScript 에서 구조 함수 에 대해 말 하면 머 릿 속 에 '함수 명 대문자! 호출 할 때 new 연산 자 를 사용 해 야 합 니 다!'함수 이름 은 대문자 로 이해 하기 쉽 습 니 다. 통 일 된 구조 함수 의 이름 을 규범화 하기 위해 서 입 니 다. 그런데 왜 new 를 사용 하 는 지 깊이 연구 해 본 적 이 있 습 니까? 함수 앞 에 new 를 가지 고 호출 하면 함수 배경 에 이 함수 prototype 을 가리 키 는 새로운 대상 을 만 들 고 this 도 새로운 대상 에 연결 합 니 다. 자바 스 크 립 트 는 원형 계승 을 기반 으로 하 는 언어 로 원형 prototype 을 만 듭 니 다.잘 모 르 는 학생 은 스스로 자 료 를 찾 아 볼 수 있 습 니 다. 저 는 this 에 중점 을 두 었 습 니 다.
구조 함수 가 어떻게 생 겼 는 지 먼저 살 펴 보 자.

 
  
  
  <br>     function People(name){ 
  <br>         this.name = name;    //   this， new          Yika　　　　 
  <br> 　　　　 this.sayName = function(){ 
  <br>         　　console.log(this.name);  //   
  <br>     　　} 
  <br>     } 
  <br> 　　var Yika = new People("Yika");  
  <br>    Yika.sayName();  //  “Yika" ，  Yika   new     ，this     Yika   。 
  <br>  
  
 
 

언뜻 보기 에는 잘 모 르 는 것 같 습 니 다. 왜 방금 함수 에 있 던 this 는 window 를 가리 키 고 있 습 니까? 지금 은 캐 시 없 이 People 함 수 를 가리 킬 수 있 습 니까?
괜 찮 습 니 다. 방금 함수 가 new 호출 을 통 해 뒤에서 스스로 나 쁜 짓 을 한다 고 하지 않 았 습 니까? 우 리 는 도대체 어떤 일 을 했 는 지 함께 봅 시다.

 
  
  
  <br>     function People(name){ 
  <br>         var that = {};   //   ：         
  <br>         that.name = name; 
  <br>         that.sayName = function(){ 
  <br>             console.log(that.name); 
  <br>         }; 
  <br>         return that;    //   ，     return   ，return       
  <br>     } 
  <br>     var Yika = People("Yika"); //      new，    new    
  <br>     Yika.sayName(); //       "Yika" 
  <br>  
  
 
 

이렇게 보면 알 겠 죠? new 는 하나의 대상 을 만 들 뿐만 아니 라 자동 으로 return 이라는 대상 을 만 들 수 있 습 니 다. 그러면 자 연 스 럽 게 this 는 이 새로운 대상 을 가리 키 게 됩 니 다.
구조 함 수 를 new 로 호출 해 야 합 니 다. 그렇지 않 으 면 문제 가 생 겼 습 니 다. 경고 가 없 는 것 입 니 다. 모든 대문자 약속 이 필요 합 니 다.
Apply 호출 모드
apply 방법 은 호출 함수 에 매개 변수 배열 을 구축 하고 this 값 을 바 꿀 수 있 도록 합 니 다.
function. apply (this 바 인 딩 값, arguments 매개 변수 배열)
apply 는 말 할 수 있 는 것 이 너무 많 습 니 다. 저 는 여기 서 밤 만 들 어 이 해 를 돕 겠 습 니 다.

 
  
  
  <br>     function People(name){ 
  <br>         this.name = name; 
  <br>         this.sayName = function(){ 
  <br>             console.log(this.name);   //sayName       People      
  <br>         } 
  <br>     } 
  <br>     function Student(name){ 
  <br>         People.apply(this, arguments);//           ，   Student     ，  apply  People    ，   People this  
  <br>                                       //      Student   ，    People     
  <br>     } 
  <br>     var student = new Student("Yika"); 
  <br>     student.sayName(); //  “Yika” 
  <br>  
  
 
 

우 리 는 apply 를 통 해 함수 의 this 바 인 딩 대상 을 쉽게 수정 할 수 있 습 니 다. apply 와 비슷 한 방법 인 call 도 같은 효과 가 있 습 니 다. 관심 이 있 는 학생 들 은 스스로 검색 하여 공부 할 수 있 습 니 다.
자, 드디어 this 의 네 가지 호출 모델 을 바 꾸 었 습 니 다. 방법 호출 모델 과 구조 함수 호출 모델 은 더 많이 사용 되 고 더 중요 할 것 입 니 다. 함수 호출 모델 은 그 중의 함정 을 피 하 는 것 을 배 워 야 합 니 다.
만약 잘못 이 있 으 면 제때에 반영 해 주 십시오. 저 는 가능 한 한 빨리 바로 잡 아서 다른 사람 을 오도 하지 않도록 하 겠 습 니 다. 감사합니다!