[19-06-11] this, call, apply, bind

this

 

this는 일반적으로 OOP 개념에 밀접한 연관

   객체의 프로퍼티인 함수에서 의미가 있습니다.

   메서드를 호출하면 this는 호출한 메서드를 소유하는 객체가 됩니다.

 

const o = {
   name: 'Kim',
   speak() { return this.name }
}

o.speak(); // "Kim"

speak()를 호출하면 this는 o에 묶입니다.

 

this는 함수를 어떻게 선언했느냐가 아니라 어떻게 호출했느냐에 따라 달라집니다.

즉, this가 o에 묶인 이유는 speak가 o의 프로퍼티여서가 아니라 o에서 speak 호출 했기 때문입니다.

 

call

어디서 호출했는지 상관없이 this가 무엇인지 지정할 수 있습니다.

모든 함수에서 사용할 수 있으며 this를 특정 값으로 지정할 수 있습니다.

 

const NAME = { name: "Kim"};

const greet = () => this.name;

greet(); // undefined
greet.call(NAME); // "Kim" // this는 NAME 입니다.

call을 사용하고 this로 사용할 객체를 넘기면 해당 함수가 주어진 객체의 메서드인 것처럼 사용 가능합니다.

첫 번째 매개변수는 this로 사용할 값, 두 번째 매개변수 부터는 호출하는 함수로 전달 됩니다.

 

apply

매개변수를 배열로 받는다는 차이점.

const NAME = { name: "Kim"};

const update = (birthYear, age) => {
   this.birthYear = birthYear;
   this.age = age;
}

update.apply(NAME, [1993, 27]) // call과 마찬가지로 첫 번째 매개변수는 this
// { name: "Kim", birthYear: 1993, age: 27 }

this에 관계없이 동작하는 함수에는 ES6의 확산연산자 (...)를 사용해도 무방합니다.

 

bind

함수의 this값을 영구히 바꿀 수 있습니다.

call나, apply 다른 bind와 함께 호출하더라도 this 값이 고정 되게 할 수 있는 함수.