this

✅ this

💡 this는 함수를 호출할 때 결정된다!

1️⃣ 전역공간에서의 this

❗️ 전역공간에서 this는 전역객체를 가르킨다. 개념상 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문이다.

var a = 1;
console.log(a);        //1
console.log(window.a); //1
console.log(this.a);   //1 

자바스크립트의 모든 변수는 특정객체의 프로퍼티로서 동작하기때문에 var연산자를 사용해 변수를 선언하면 window.a와 this.a 모두 1로 출력된다.

2️⃣ 메서드 내부에서의 this

메서드로서 호출하는 경우 호출 주체는 바로 함수명 앞의 객체이다. ❗️마지막 점 앞에 명시된 객체가 곧 this이다.

3️⃣ 콜백함수 내부에서의 this

• 콜백 함수에서의 this는 콜백함수의 제어권을 가지는 함수가 콜백 함수에서의 this를 무엇으로 할지 결정하며
• 특별히 정의하지 않은 경우에는 기본적으로 함수와 마찬가지고 전역객체를 바라본다.

4️⃣ 생성자 함수 내부에서의 this

생성자는 구체적인 인스턴스를 만들기 위한 일종의 틀이다. 여기에 구체적인 인스턴스의 개성을 더해 개별 인스턴스를 만들 수 있다.
생성자 함수로서 호출된 경우 내부에서의 this는 곧 새로 만들 구체적인 인스턴스 자신이 된다.

let Cat = function(name, age) {
  this.bark = '야옹';
  this.name = name;
  this.age = age;
}

let nabi = new Cat('나비', 3)

console.log(nabi)

/*
[object Object] {
  age: 3,
  bark: "야옹",
  name: "나비"
} 
*/

---

✅ this를 바인딩하는 방법

1️⃣ call 메서드

첫번째 인자를 this로 바인딩하고 이후의 인자들을 호출할 함수의 매개변수로 지정한다.

let func = function(a,b,c){
  console.log(this, a,b,c)
}

func(1,2,3) //{window...}, 1, 2, 3
func.call({a:1}, 2, 3, 4) //{a:1}, 2, 3, 4

2️⃣ apply 메서드

call과 기능적으로 완전히 동일하고,
두번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다.

let func = function(a,b,c){
  console.log(this, a,b,c)
}

func.apply({a:1}, 2, 3, 4) //{a:1}, 2, 3, 4

3️⃣ bind 메서드

넘겨 받은 this 및 인수들을 바탕으로 새로운 함수를 반환하는 메서드이다.

let user = {
  firstName: "John"
};

function func() {
  alert(this.firstName);
}

let funcUser = func.bind(user);
funcUser(); // John

추가적으로 bind 메서드를 적용해서 새로 만든 함수는 name 프로퍼티에 bound라는 접두어가 붙는다. -> 코드를 추적하기에 더 수월해짐

---

✅ 화살표 함수의 예외사항

화살표 함수 내부에는 this가 아예 없으며 접근하고자 하면 스코프체인상 가장 가까운 this에 접근하게 된다.
화살표 함수를 사용하면 별도의 변수로 this를 우회하거나 call/apply/bind를 사용할 필요가 없어 더욱 간결하고 편리하다.