call
과 apply
메소드는 기본적으로 함수를 호출하는 역할을 합니다. 그렇다면 기존 함수 호출과 차이점은 무엇일까요? 바로 해당 메소드를 사용해 함수를 '실행'하면, 함수의 첫 번째 인자로 전달하는 객체에 this
를 '바인딩'할 수 있다는 것입니다. 이를 통해 유사 배열 arguments
객체에 배열 메서드를 사용할 수 있습니다. 반면, bind
는 첫 번째 인자를 this
에 바인딩하지만 함수를 '실행하지 않으며', 새로운 함수를 반환합니다.
call
call
을 사용하면 함수를 실행하고 함수의 첫 번째 인자로 전달하는 값에 this
를 바인딩합니다.
function logName (a, b, c) {
console.log(this.name);
console.log(a + b + c);
}
const person = {
name: 'Hwi'
};
logName.call(person, 1, 2, 3);
// Hwi
// 6
apply
apply
을 사용하면 함수를 실행하고 함수의 첫 번째 인자로 전달하는 값에 this
를 바인딩합니다. call
과의 차이점이라면 인자를 배열의 형태로 전달한다는 것입니다. 이때, 인자로 배열 자체가 전달하는 것이 아니라 배열의 요소들이 값으로 전달됩니다.
function logName (a, b, c) {
console.log(this.name);
console.log(a + b + c);
}
const person = {
name: 'Hwi'
};
logName.apply(person, [1, 2, 3]);
// Hwi
// 6
bind
bind
는함수의 첫 번째 인자에 this
를 바인딩한다는 점은 같지만, 함수를 실행하지 않으며 새로운 함수를 반환합니다. 즉, 반환된 새로운 함수를 실행해야 원본 함수가 실행됩니다.
function logAge (a, b, c) { // 원본 함수
console.log(this.age);
console.log(a + b + c);
}
const person = {
age: 31
};
const myAge = logAge.bind(person, 1); // 새로운 함수
myAge(2, 3);
// 31
// 6
마치며
call
메소드는 함수를 실행하고, 첫 번째 인자에 this
를 바인딩하며, 이후의 값을 함수의 인자로 전달합니다. b
ind 메소드는 함수를 실행하고, 첫 번째 인자에 this
를 바인딩하며, 이후의 값을 배열의 형태로 받아 차례로 함수의 인자로 전달합니다. bind
메소드는 함수를 실행하지 않으며, 첫 번째 인자에 this
를 바인딩한 새로운 함수를 반환합니다. 각 메소드를 통해 전달할 수 있는 인자의 갯수에는 제한이 없습니다.
'개발 > JavaScript' 카테고리의 다른 글
객체 지향 프로그래밍이란? (0) | 2020.10.29 |
---|---|
자바스크립트 this 의 개념과 바인딩 설명 (0) | 2020.10.25 |
자바스크립트 객체 생성자 함수란? (0) | 2020.10.24 |