Programing/JavaScript

js) 메서드 call,apply,bind 를 알아보자!

KingBini 2022. 9. 28. 19:55

자바스크립트에서 this는 일반적으로 객체에 속한메서드인경우는 그 객체를 가르킨다,

하지만 js의 특징으로 this를 함수를 통해서 따로 지정해줄 수도 있는데 이 (call,apply, bind)함수들을 알아보자.



call

  • 이 메서드는 모든 함수에서 사용가능하며, this를 지정해 줄 수있다.
    const bin = {
    money : 200,
    }
    

const jisu = {
money:100,
}

function UpDateSalary(salary){
this.money += +salary;
this.salary = salary;
}

UpDateSalary.call(bin,1000);

console.log(bin);
/* { money: 1200, salary: '1000' } */


UpDateSalary()의 this를 call함수로 bin객체로 지정해주고 <br>
1000을 인자값으로 전달해주어서 객체 bin의 money는 1200이되고
salary라는 속성을 추가해 주었다.

<br><br>


# apply
- 함스 매개변수를 배열로 처리한다는 점을 뺴고는 동작방식이 call함수와 똑같다고 볼 수 있다.
- apply는 매개변수를 배열로 받는다.
~~~js
const bin = {
  money : 200,
}

const jisu = {
    money:100,
}

function UpDateSalary(salary, performance_pay ){
  this.money += +salary;
   this.salary = salary;
   this.performance_pay = performance_pay;
}


UpDateSalary.apply(bin,[1000,300]);

console.log(bin); 

/* { money: 1200, salary: 1000, performance_pay: 300 }*/



bind

-bind함수는 this값을 다른 값으로 대체하여 고정으로 바꿔줄 수 있다.

const bin = {
  money : 200,
}


function UpDateSalary(salary, performance_pay ){
  this.money += +salary;
   this.salary = salary;
   this.performance_pay = performance_pay;
}

/* UpDateSalary메서드의 this를 bin으로 영구히 바꿔주어서 binUpDateSalary를
호출 할 떄마다 this= */
let binUpDateSalary = UpDateSalary.bind(bin);
binUpDateSalary(1000,500)
console.log(bin); 

js this는 불완전 하기때문에 bind수등을 이용해서 this를 잃어버리지않게 고정해주자