this 이해하기

Posted on May 22, 2020

코어자바스크립트 책을 보고 기억할 부분만 쓴 글입니다.

javascript에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정 됨
= 함수를 호출할 때 결정된다.

상황에 따른 this

전역 공간에서의 this
```
 전역 객체 (window or global)
```

메서드로서 호출할 때 그 메서드 내부에서의 this

 함수 vs 메서드
 함수 : 자체로 독립적 기능을 수행
 메서드 : 호출한 대상 객체에 관한 동작을 수행
 함수와 메서드 구분 쉽게 하는 법 : 함수 앞에 점(.)이 있는 지 확인하라!
 없으면 함수 있으면 메서드

 // 메서드 내부에서의 this는 호출할 주체에 대한 정보다.
 const obj = {
     methodA : function () { console.log(this); } // this는 methodA
     inner : {
         methodB: function () { console.log(this); } // this는 methodB
     }
 }

함수로서 호출할 때 그 함수 내부에서의 this

 함수 내부에서의 this

 함수 내부에서는 this가 지정되지 않는다. 
 함수 내부에서 호출한 것은 호출 주체를 명시하지 않고 
 개발자가 코드에 관여해서 실행한 것.
 따라서 호출 주제 정보를 알 수 없다.  

 // this가 지정되지 않은 경우 this = 전역 객체
 const obj = function () {
     console.log(this); // window or global
     const obj2 = function() {
         console.log(this); // window or global
     }
 }
 // this 바인딩은 함수 실행 당시 주변 환경 
 // (메서드 내부인지 외부인지)은 중요하지 않다.
 // 그냥 호출하는 구문 앞에 점인지 체크하는 것.

 내부 함수에서 this 우회 방법

 // 1. const self = this;
 const obj = {
     refer_this : function() {
         const self = this;
         const obj2 = function() {
             console.log(self); // refer_this
             console.log(this); // window or global
         }
     }
 }
 // 2. arrow function 
 const obj = {
     refer_this : function() {
         const obj2 = () => {
             console.log(this); // 상위 스코프 this 그대로 활용 가능 : refer_this
         }
     }
 }

콜백 함수 호출할 때 그 함수 내부에서의 this

 기본적으로는 this = 전역객체
 그러나, 콜백 함수에 별도로 this가 될 대상을 지정한 경우
 제어권 받은 함수에서 그 대상을 참조.
 (bind, call, apply, addEventListener)
    
 addEventListener는 점(.) 앞의 element를 this를 상속.

생성자 함수 내부에서의 this

 생성자 : 구체적인 인스턴스를 만들기 위한 인종의 **틀**
 this는 새로만들 구체적인 인스턴스 자신이 됨
 생성자 prototype 프로퍼티를 참조하는 __proto__라는 
 프로퍼티가 있는 객체(인스턴스)를 만들고 
 해당 객체에 this를 부여.

 // person 정의 함수 표현식
 const person = function(name, age) {
     this.name = name;
     this.age = age;
 }
 // 생성자 => 인스턴스 생성
 const kim = new person('kim', 20);
 const lee = new person('lee', 30);
 console.log(kim, lee);
 /* person { name: 'kim', age: 20}, person { name: 'lee', age: 30}*/

참고

함수 선언식 vs 함수 표현식

Tags: javascript corejavascript