[JS] Javascript call , apply ,bind 예시 코드

자바스크립트 call , apply ,bind 예시 코드

javascript 함수호출시 사양되는 call, apply, bind를 코드예시를 통해 알아보겠습니다.

@ call 사용예시

const mike = {
  name: "Mike",
};

function showThisName() {
  console.log(this.name);
}

function update(birthYear, occupation) {
  this.birthYear = birthYear;
  this.occupation = occupation;
} 

showThisName.call(mike); // this에 mike를 할당해준다.

update.call(mike,1999,"singer") // 매개변수를 순서대로 받는다.
console.log(mike) 


/* 출력
Mike
{
    birthYear: 1999
    name: "Mike"
    occupation: "singer"
}
*/

@ apply 사용예시

const tom = {
  name: "Tom",
};

function update(birthYear, occupation) {
  this.birthYear = birthYear;
  this.occupation = occupation;
} 

update.apply(tom, [1990, "dancer"]); // 두번빼 매개변수로 배열을 넣어주면 차례대로 인수로 사용한다.
console.log(tom) 


/* 출력
Mike
{
    birthYear: 1990
    name: "Tom"
    occupation: "dancer"
}
*/

@ bind 사용예시 - 1

const mike = {
  name: "Mike",
};

function update(birthYear, occupation) {
  this.birthYear = birthYear;
  this.occupation = occupation;
} 

const updateMike = update.bind(mike);
updateMike(1980, "police");
console.log(mike);


/* 출력
Mike
{
    birthYear: 1980
    name: "Mike"
    occupation: "police"
}
*/

@ bind 사용예시 - 2

const user = {
  name: "Mike",
  showName: function () {
    console.log(`hello, ${this.name}`);
  },
};

user.showName();  // hello, Mike

let fn = user.showName;  // . 이전이 this 값이다.

fn(); // hello, -> 재할당되면서 this값을 잃었다.   
let boundFn = fn.bind(user); // this값을 user로 bind해준다.
boundFn(); // hello, Mike