this 바인딩 call, apply, bind의 차이점

1. Function.prototype.call()

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

thisArg: func 호출에 제공되는 this가 될 값
arg1, arg2, ...: func이 호출되어야 하는 파라미터

첫번째 인자만 있는 경우

const duck = {
  age: 6 
}
function printDuckAge() {
  console.log(this.age)
}

//call
printDuckAge.call(duck) //6

첫번째 인자로 들어간 duck을 this로 인식하기 때문에 duck의 age인 6을 콘솔에 찍는다.

2번째 인자가 있는 경우

const duck = {
  age: 6 
}
function printDucksAge(duck1, duck2) {
  console.log(`${duck1}와 ${duck2}는 ${this.age}살 오리입니다.`) 
}

//call
printDucksAge.call(duck,'boo','bee') // boo와 bee는 6살 오리입니다.

2,3번째 인자로 들어간 'boo'와 'bee'를 파라미터인 duck1, duck2으로 인식하기 때문에 'boo와 bee는 6살 오리입니다.'을 콘솔에 찍는다.

2. Function.prototype.apply()

fun.apply(thisArg, [argsArray])

thisArg: func 호출에 제공되는 this가 될 값
argsArray: func이 호출되어야 하는 인수를 지정하는 유사 배열 객체

const duck = {
  age: 6 
}
function printDucksAge(duck1, duck2) {
  console.log(`${duck1}와 ${duck2}는 ${this.age}살 오리입니다.`) 
}

//apply
printDucksAge.apply(duck,['boo','bee']) // boo와 bee는 6살 오리입니다.

call()과 같은 기능을 구현하지만 call은 2번째 인자 이후로 여러개의 인자를 순서대로 printDuckAge의 파라미터로 인식하지만, apply()의 경우 이들을 묶어 유사배열객체로 받는다.

3. Function.prototype.bind()

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

thisArg: 바인딩 함수가 타겟 함수의 this가 될 값
arg1, arg2, ...: func이 호출되어야 하는 인수

const duck = {
  age: 6 
}
function printDucksAge(duck1, duck2) {
  console.log(`${duck1}와 ${duck2}는 ${this.age}살 오리입니다.`) 
}

//bind
const printDucksAgeAndName = printDucksAge.bind(duck,'boo','bee') // console 찍히는 것 없음
printDucksAgeAndName() //boo와 bee는 6살 오리입니다.

call과 유사하지만 즉시 호출하지는 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 한다.

요약하자면

	call	apply	bind
첫번째 인자	this로 바인딩될 값	this로 바인딩될 값	this로 바인딩될 값
2번째 인자 이후	(첫번째 인자,a,b,c,...)	(첫번째 인자,[a,b,c,...])	(첫번째 인자,a,b,c,...)
즉시 호출	O	O	X