[자바스크립트] call, apply, bind

Binding이란?

JS this는 '자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수'  

라는 정의를 가집니다.

 

참고 : https://programjy.tistory.com/69

[자바스크립트] this객체

즉, this는 고정된 값에 바인드되는것이 아닌 객체 내부, 메서드 호출시, 생성자 new 호출시 등등 상황에 따라 바뀌는 것을 Binding이라고 합니다.

명시적으로 이 this를 다른 객체로 바꿔주는 함수가 call, apply, bind 입니다. (함수호출방법이기도하다.)

 

함수호출

function sum(a, b, c) {
          console.log('sum = ' + (a + b + c))
        }
sum(1,2,3)
sum.call(null, 1, 2, 3)
sum.apply(null, [1, 2, 3])

 

결과물

각기 함수 호출 방식은 다르지만, 같은 결과를 보여준다. 

그럼 이제 call, apply가 무슨차이가 있는지 확인해보자.

 

call 과 apply

let person1 = {
	name: 'Shin'
}

let person2 = {
	name: 'Jang',
    study: function() {
    	console.log(this.name + '이/가 공부를 하고 있습니다.')
    }
}

let person3 = {
	name: 'Son'
}

person2.study() // Jang이/가 공부를 하고 있습니다.

// call() 함수로 this의 바인딩을 바꿔주는 것이다. 
person2.study.call(person1); // Shin이/가 공부를 하고 있습니다.

// apply() 함수로 this 바인딩을 바꿔준다.
person2.study.apply(person3);

결과

 

call을 이용하여 person2의 함수를 호출하고 있지만 call 메소드 첫번째 매개변수에 person1을 받고 있기 때문에 this는 첫번째 인자인 person1을 가리키게 되는 것이다.

 

apply를 이용하여 person2의 함수를 호출하지만 첫번째 매개변수인 person3을 받고 있기 때문에, this는 이제 첫번째 인자인 person3을 가리키게 되는 것이다.

 

※ call, apply의 차이점은?

첫번째 인자인 person을 제외하고, 이후 parameter를 입력하는 방식의 차이점만 있다.

call은 파라미터 개수만큼 / apply는 첫번째 이후는 배열로

 

bind 함수

let person1 = {
	name: 'Shin'
}

let person2 = {
	name: 'Jang',
    study: function() {
    	console.log(this.name + '이/가 공부를 하고 있습니다.')
    }
}

person2.study() // Jang이/가 공부를 하고 있습니다.

// bind함수
let student = person2.study.bind(person1);

student();

bind()는 this 바인딩을 바꾸는건 call, apply와 동일하지만 호출되지는 않는다는 차이점이 있다. 

즉, 새로운 함수를 직접 실행해야 원본 함수가 실행되는 것이다.

 

정리

call : 함수를 실행하고, 첫번째 인자에 this를 바인딩 이후 파라미터는 개수에 맞게
apply : 함수를 실행하고, 첫번째 인자에 this를 바인딩 이후 파라미터는 배열로
bind : 첫번째 인자에 this를 바인딩하고, 함수를 실행하지 않고 새로운 함수를 반환한다.