[TIL] this, call, apply, bind

⭐︎ What I learned today

• arrow function (화살표 함수)
• this 📌
• call
• apply
• bind

this

함수는 호출될 때, 매개변수로 전달되는 인자값 이외에,
arguments 객체와 this를 암묵적으로 전달 받는다.

function square(num) {

  console.log(arguments);
  console.log(this);
  
  return number + number;
}

square(2);    

this는 함수 실행시 호출방법에 의해 결정되는 특별한 객체이다.
함수 실행시 쓰임이 결정되므로, 실행되는 맥락에 따라 활용이 달라진다.
따라서 어떻게 함수가 어떻게 실행이 되는지가 중요하다.

• Global - 전역에서 this를 참고, 많이 사용하지 않음
• function 호출 - 권장 x, 굳이 사용하지 않음
• Method 호출 - obj.foo()
• 생성자 호출(new 키워드 활용) - new foo()
• .call 또는 .apply 호출 - foo.call() / foo.apply()

위의 사진처럼 this는 기본적으로 Window이다.

하지만 어디든 예외가 있듯이 this가 window가 아닐 때도 당연히 있다.
바로 method호출, 생성자 호출이다.

차례로 살펴보도록 하자.

1. Method 호출
   함수를 특정한 객체의 method로 호출하면 this의 값은 그 객체를 사용한다.

let apple = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(apple.f()); // 37

위의 예제처럼 apple.f()를 실행할 때 apple의 객체가 함수 내부의 this와 연결이 되는 걸 볼 수 있다.

2. 생성자 호출

함수를 new키워드와 함께 생성자로 사용하면, this는 새로 생긴 객체에 묶인다. 즉 객체가 new키워드를 이용해서 만들어진다. (객체의 생성자, 함수x, 인스턴트 => 인스턴트.메소드()형태로 호출이 됨.)

1.this는 new키워드로 만들어진 인스턴트에 맞춰진다.

function fruit() {
  this.a = 37;
}

let apple = new fruit () // 생성자 호출, 함수처럼 보이지만 함수가 x, new는 객체의 생성자
console.log(apple.a) // 37

만약 객체를 리턴하고 있는 return 을 가지고 있는 구문이라면
리턴되는 객체는 new의 결과가 될 것이다.

function fruit2() {
  this.a = 37;
  return {a: 38};
}
apple = new fruit2();  // 위와 동일하게 함수가 아닌 하나의 '객체'라는 것에 유의!!! 따라서 new fruit2() === apple === this
console.log(apple.a) // 38

ES6 화살표 함수를 쓴다. ES6 화살표 함수는 this로 window 대신 상위 함수의 this를 가져온다.(여기서는

[참고]

https://beomy.tistory.com/6
MDN