[TIL] JavaScript - This (bind, call, apply)

call

call()은 이미 할당되어있는 다른 객체의 함수/메소드를 호출하는 해당 객체에 재할당할때 사용됩니다. 
this는 현재 객체(호출하는 객체)를 참조합니다. 메소드를 한번 작성하면 새 객체를 위한 메소드를 재작성할 필요 없이 call()을 이용해 다른 객체에 상속할 수 있습니다.

 

구문

func.call(thisArg[, arg1[, arg2[, ...]]])

• thisArg : func 호출에 제공되는 this 의 값입니다.

 

예제

const pokemon = {
  firstName: "Pika",
  lastName: "Chu",
  getPokemonName: function () {
    const fullName = this.firstName + " " + this.lastName;
    return fullName;
  },
};

// 또 하나의 객체
const getName = function () {
  console.log(this.getPokemonName());
};

const favorites = function (snack, hobby) {
  console.log(this.getPokemonName() + " likes " + snack + " and " + hobby);
  
favorites.call(pokemon, "sushi", "javascript");
//"Pika Chu likes sushi and javascript"

---

apply란?

이미 존재하는 함수를 호출할 때 다른 this 객체를 할당할 수 있습니다. this 는 현재 객체, 호출하는 객체를 참조합니다. apply 를 사용해, 새로운 객체마다 메소드를 재작성할 필요없이 한 번만 작성해 다른 객체에 상속시킬 수 있습니다.

apply 는 지원되는 인수의 타입만 제외하면 call() 과 매우 유사합니다. 인수(파라미터)의 리스트 대신 인수들의 배열을 사용할 수 있습니다. 또한 apply 를 사용해, 배열 리터럴이나 (예, func.apply(this, ['eat', 'bananas']), Array 객체 (예, func.apply(this, new Array('eat', 'bananas'))) 를 사용할 수 있습니다.

argsArray 파라미터를 위한 arguments 를 사용할 수도 있습니다. arguments 는 함수의 지역 변수입니다. 이는 호출된 객체의 지정되지 않은 모든 인수에 대해 사용할 수 있습니다. 따라서, apply 메소드를 사용할 때 호출된 객체의 인수를 알 필요가 없습니다. arguments 를 사용해 모든 인수들을 호출된 객체로 전달할 수 있습니다. 그럼 호출된 객체는 그 인수들을 처리할 수 있게 됩니다.

 

구문

func.apply(thisArg, [argsArray])

• thisArg : func 를 호출하는데 제공될 this 의 값. this는 메소드에 의해 실제로 보여지는 값이 아닐 수 있음을 유의. 메소드가 non-strict-mode 코드의 함수일 경우, null 과 undefined 가 전역 객체로 대체되며, 기본 값은 제한됩니다.
• argsArray : func 이 호출되어야 하는 인수를 지정하는 유사 배열 객체, 함수에 제공된 인수가 없을 경우 null 또는 undefined가 대체됩니다.

 

예제

const pokemon = {
  firstName: "Pika",
  lastName: "Chu",
  getPokemonName: function () {
    const fullName = this.firstName + " " + this.lastName;
    return fullName;
  },
};

// 또 하나의 객체
const getName = function () {
  console.log(this.getPokemonName());
};

const favorites = function (snack, hobby) {
  console.log(this.getPokemonName() + " likes " + snack + " and " + hobby);
  
favorites.call(pokemon, ["sushi", "javascript"]);
//"Pika Chu likes sushi and javascript"

---

Bind란?

bind 함수는 함수가 가리키는 this만 바꾸고 호출하지 않는 것 입니다.
정확히 말하자면 this를 정의하고 나서 그 함수를 복사해 새로운 함수를 만드렁 리턴하는 것 입니다.

 

구문

func.bind(thisArg[, arg1[, arg2[, ...]]])

• thisArg : 바인딩 함수가 대상 함수(target function)의 this에 전달하는 값입니다. 바인딩 함수를 new 연산자로 생성한 경우 무시됩니다. bind를 사용하여 setTimeout 내에 콜백 함수를 만들 때, thisArg로 전달된 원시 값은 객체로 변환됩니다. bind할 인수(argument)가 제공되지 않으면 실행 스코프 내의 this는 새로운 함수의 thisArg로 처리됩니다.
• arg1 , arg2 , ... : 대상 함수의 인수 앞에 사용될 인수입니다.

 

예제

const pokemon = {
  firstName: "Pika",
  lastName: "Chu",
  getPokemonName: function () {
    const fullName = this.firstName + " " + this.lastName;
    return fullName;
  },
};

// 또 하나의 객체
const getName = function () {
  console.log(this.getPokemonName());
};

// bind 는 this 가 가르키는것을 지정해줌
const boundGetName = getName.bind(pokemon); // => 반환되는게 함수

console.log(boundGetName());
//"Pika Chu"
//undefined