IT/자바스크립트

Javacript - call , apply , bind 차이점 정리

차가운남자 2020. 2. 27. 17:26

함수를 호출하는 방법:
   -함수이름.call(객체, 인수,인수....) , 함수이름.apply(객체, [인수,인수,...]) , 함수이름.bind(객체,인수,인수 ...)

Call - 모든 함수에서 사용할 수 있으며, this를 특정 값으로 지정할 수 있다.
뭔소리지? 밑에와 같이 person1의 객체에 매개변수 'Hello'을 담아서 함수를 즉시 호출 할 수 있다.
즉!! say함수 안에서 this는 person1 또는 person2로 지정된다.

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

say.call(person1, 'Hello'); // Hello Jon Kuperman
say.call(person2, 'Hello'); // Hello Kelly King

Apply - Call 함수와 같은데 매개변수를 배열로 받는다. apply도 즉시 호출 할 수 있다.

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

say.apply(person1, ['Hello']); // Hello Jon Kuperman
say.apply(person2, ['Hello']); // Hello Kelly King

Bind - bind 함수는 call, apply와는 조금 다르다. this의 값을 바꿀 수 있는 마지막 함수는 bind이다. bind를 사용하면 함수의 this 값을 영구히 바꿀 수 있다. 
즉!! 바로 실행이 되지 않고 밑에 sayHelloJon처럼 bind된 함수를 변수에 담은 후에 호출을 할 수 있다.

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say() {
    console.log('Hello ' + this.firstName + ' ' + this.lastName);
}

var sayHelloJon = say.bind(person1);
var sayHelloKelly = say.bind(person2);

sayHelloJon(); // Hello Jon Kuperman
sayHelloKelly(); // Hello Kelly King