[JavaScript] 호출한 객체를 가리키는 this 용법

⚠️ strict 모드에서 전역객체의 this는 undefined로 나오므로 모드 해제 후 실습해야 동일한 결과를 얻을 수 있습니다.

✅ this란? 

this는 함수를 호출한 객체입니다.

예를 들어보겠습니다.

우리가 전역에서 sum()이라는 함수를 만들면 전역객체(window)의 함수가 만들어집니다.

이 함수는 window.sum() 으로 사용해야 합니다.

하지만 우리는 sum()으로 함수를 사용합니다. 왜냐하면 전역객체(window)는 생략이 가능하기 때문입니다.

여기서! window가 sum() 함수의 this가 됩니다.

요약하면 함수는 함수를호출한객체.sum() 이렇게 사용하고, this는 함수를호출한객체를 의미합니다.

그래서 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this가 의미하는 객체가 동적으로 결정됩니다.

✅ 함수를 호출하는 방법에 따라 달라지는 this

1. 전역 함수의 this :  window

2. 메소드의 this : 메소드를 호출한 객체

3. 생성자 함수의 this : 생성자

4. apply, bind, call 의 this : 직접 바인딩한 객체

function sum() {
 console.log("this : ", this );
}

// 1. 함수 호출
sum(); // this : window

// 2. 메소드 호출
let obj = { sum: sum };
obj.sum(); // this : obj

// 3. 생성자 함수 호출
let instance = new sum(); // this : instance;

// 4. call / apply / bind 호출
let cab = { name : "홍길동" };
sum.call(cab); // this : cab;
sum.apply(cab); // this : cab;
sum.bind(cab)(); // this : cab;

 ✅ 내부함수의 this

내부함수의 this는 항상 window를 바인딩합니다.

apply, bind, call을 이용해서 직접 this에 바인딩하지 않는 한 내부함수의 this는 window입니다.

JS 설계상의 오류로 전역 스코프 외의 스코프에서 호출된 함수는 this가 선언은 되었지만 값이 없습니다.

이런 상황에서 this는 window를 바인딩하게 됩니다.

// 1. 전역 함수의 내부함수
function outer() {
  console.log(this); // window
 // outer 함수 안에서 선언된 inner 함수
  function inner() {
   console.log(this); // window
  }
}

// 2. 메소드의 내부함수
let obj = {
  outer : function() {
    console.log(this); // obj
    function inner() {
      console.log(this); // window
    }
  }
}

 

⭐ 요약

1. this는 함수를 호출한 객체에 바인딩된다.

2. 대부분의 상황에서 this는 전역객체(window)

3. 메소드, 생성자함수, call / apply / bind 인 경우에 this는 특정 객체!

🛠️ 용어 사전

⚙️ 전역함수 : this가 전역객체(window)에 바인딩 된 함수를 의미

⚙️ 메소드 : this가 객체에 바인딩된 함수를 의미

⚙️ 바인딩 : this가 참조하는 객체를 결정하는 과정