javaScript. call() / bind() / apply()

 

 

함수의 메소드 중 중요한 것은 call, apply, bind 이다.

원래 함수는 선언한 후 호출을 해야 실행된다.

 

 

 

💡  call과 apply

 

 

<호출>

• 함수 뒤에 ()를 붙임
• call 과 apply 

call은 보통 함수와 똑같이 인자를 넣음

apply는 인자를 하나의 배열로 묶어 넣음

 

let example = (a,b,c => a+b+c);  // example 함수 선언

example.call(null, 1, 2, 3);
example.apply(null, [1, 2, 3]);

 

** call과 apply가 공통적으로 가진 null인자의 역할은? 

 this를 대체하는 것.

 

var obj = {
  string: 'zero',
  yell: function() {
    alert(this.string);
  }
};
var obj2 = {
  string: 'what?'
};
obj.yell(); // 'zero';
obj.yell.call(obj2); // 'what?'

여기서 객체 두개를 선언하고 각 string값이 zero와 what?임을 주목하자.

분면 yell함수는 obj에 해당하는 메소드임에도 마지막 줄에서

obj.yell.call(obj2)는 what? (obj2의 string값)이 된다.

 

>> 즉 다른 객체의 함수를 자기 것마냥 사용할 수 있음!

 

 

this는 기본적으로 window객체를 의미함.

이 때 몇가지 방법으로 window를 다른 것으로 바꿀 수 있음

- call, apply, bind에서 첫번째 인자로 다른것을 넣어주기.

 

let example = (a,b,c => a+b+c);  // example 함수 선언

example.call(null, 1, 2, 3);
example.apply(null, [1, 2, 3]);

첫 번째 인자인 null은 this를 대체하므로 이 값을 바꿔주면 된다. 

 

 

argument는 함수(function)이면 처음부터 갖고 있는 속성으로,

함수에 들어온 인자를 배열 형식으로 반환한다. (배열은 아님.)

 

이 때, argument 자체는 배열이 아니라 배열 메소드 등을 쓰면 에러가 발생하지만

이 때 call이나 apply를 사용하면 제대로 동작한다.

 

>> 배열의 프로토타입에 있는 join 함수를 빌려씀. this는 argument를 가리키게 함.  (call의 첫번째 인자)

 

function example3() {
  console.log(Array.prototype.join.call(arguments));
}
example3(1, 'string', true); // '1,string,true'

Array.prototype.join.call(arguments)

 

** join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다.

 

 

💡  bind

 

bind 함수는 함수가 가리키는 this만 바꾸고 호출하지는 않음.

cf> apply, call은 함수의 호출에 사용 + 첫번째 인자(null)는 this를 대체

 

위의 zero와 what? 예제로 비교해보자.

 

var obj = {
  string: 'zero',
  yell: function() {
    alert(this.string);
  }
};
var obj2 = {
  string: 'what?'
};
var yell2 = obj.yell.bind(obj2);
yell2(); // 'what?'

 

마찬가지로 두 객체와 변수 string / 함수 yell을 선언한다.

call과 apply에서는 obj.yell.call(obj2); 와 같이 해서 결과가 'what?'이 나왔었다.

즉, 함수를 호출 한 것이고

 

bind에서는 호출은 하지 않지 않고 함수만 반환한다.

obj.yell.bind(obj2)를 했더니 yell 함수의 this가 obj2로 바뀐 것이므로

call(this, 1, 2, 3) = bind(this)(1, 2, 3)

라고 할 수 있다.

 

 

 

 

 

---

REFERENCE

 

https://www.zerocho.com/category/JavaScript/post/57433645a48729787807c3fd

(JavaScript) 함수의 메소드와 arguments - call, apply, bind

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!