call

• call 메소드를 통해 함수를 호출하면 call의 인자로 주어지는 것이 실행하고자하는 함수의 this 값이 된다.
• 다양한 인자를 줌으로서 다양한 객체에서 함수를 호출할 수 있다.
• 실행될 때마다 함수의 this, 객체를 새롭게 부여해줄 수 있다.

<script>
const kim =  {
  name : 'kim',
  first:10, second:20,
}
const min = {
  name : 'min',
  first:10, second:10,
}
function sum(prefix){
  //this = kim 
  //sum의 파라미터가 존재할 경우
  return prefix + (this.first+this.second);
}
console.log(sum.call(kim, 10));
//sum(); call메소드는 모든 함수가 가지고 있는 메소드이다.
//첫 번째 인자로 그 함수의 this를 무엇으로 할지 넣어준다.
//두 번째 인자로 호출할려는 함수의 파라미터에 들어갈 인자값이 들어간다.
console.log(sum.call(min, 10));
</script>

bind

• bind는 함수의 내부적으로 사용할 this값을 영구적으로 바꾸는 새로운 함수를 만든다.
• 새롭게 사용할 객체, this를 고정시켜줄 수 있다.

<script>
const kim =  {
  name : 'kim',
  first:10, second:20,
}
const min = {
  name : 'min',
  first:10, second:10,
}
function sum(prefix){
  //this = kim 
  //sum의 파라미터가 존재할 경우
  return prefix + (this.first+this.second);
}
const kimSum = sum.bind(kim, '->');
// 내부적으로 this를 kim으로 하는 새로운 함수 
// sum은 변하지 않고 취지에 맞게 변경된 새로운 함수를 리턴한 것
console.log(kimSum());
</script>

call, bind 공통점, 차이점

-call과 bind 공통점 : 모두 함수를 호출하는 역할을 하며 첫번째 인자로 this 값을 받는다.
-call 과 bind 차이점 :
1>call은 결과값을 나타내며 bind는 새로운 함수로 나타낸다.
2>call은 this 값을 바꾼 후 호출하지만, bind는 this값을 고정시키는 새로운 함수 만든다.