bind, call, apply

ZeroCho 블로그 - '함수의 메소드와 arguments' 글을 바탕으로 작성한 글입니다.

call, apply

함수를 호출하는 3가지 방법

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

여기서 호출하는 방법에는 3가지가 있다.
1. () 붙이기
2. call
3. apply

let example = function(a, b, c) {
  return a + b + c;
};

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

null 인자의 역할

여기서 call과 apply가 공통적으로 갖는 null인자의 역할은 무엇일까?

바로 this를 대체하는 것이다.

let obj = {
  string: 'frenchkebab',
  yell: function() {
    alert(this.string);
  }
};

let obj2 = {
  string: 'what?'
};

obj.yell(); // 'frenchkebab' (alert)
obj.yell.call(obj2); // 'what?'

마지막 줄에서 obj.yell.call(obj2)로 this가 가리키는 것을 obj에서 obj2로 바꾸었다.
yell은 obj의 메서드 인데도 obj2의 string이 alert되었다.

즉, 다른 객체의 함수를 자기 것처럼 사용할 수 있는 것이다.

arguments는 무엇인가?

function example() {
  console.log(arguments);
}
example(1, 'string', true); // [1, 'string', true]

arguments는 함수라면 원래 갖고 있는 숨겨진 속성이다.
함수에 들어온 인자를 유사 배열 형식으로 반환한다.

arguments는 유사배열이다.

arguents 유사 배열 이기 때문에, 배열의 메소드는 사용할 수 없다.

function example2() {
  console.log(arguments.join());
}
example2(1, 'string', true); // 에러 발생

배열이 아닌 유사배열 이므로 배열의 메서드를 사용하니 에러가 나는 경우이다.

이 때 바로 call 과 apply 가 진가를 발휘한다.

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

배열의 프로토타입에 있는 join 함수를 빌려쓰는 것이다.
(this는 arguments를 가리키게 한다.)

bind 함수는 무엇인가?

bind는 함수가 가리키는 this만 바꾸고 호출은 하지 않는 것이다.

let obj = {
  string: 'frenchkebab',
  yell: function() {
    alert(this.string);
  }
};

let obj2 = {
  string: 'what?'
};

let yell2 = obj.yell.bind(obj2); // 위에서는 'what?'이 실행되었다.
yell2(); // 'what?'

obj.yell.bind(obj2)를 해 주었더니, yell 함수의 this가 obj2로 바뀌었다.
즉, call, apply와는 비슷하지만, 호출은 하지 않고 함수만 반환 하는 것이다!

call(this, 1, 2, 3) 은 bind(this)(1, 2, 3)과 같다

bind, call, apply를 정리하면

1. Function.prototype.bind()

함수.bind(this, arg1, arg2, ...)
※ arg1, arg2, ... : 함수에 전달될 인수

• 새롭게 바인딩한 함수를 반환한다. 새롭게 바인딩한 함수는 원본 함수 객체를 감싸는 함수이다.
• call(), apply()와는 다르게 함수가 가리키고 있는 this를 바꾸지만 호출은 하지 않는다.

2. Function.prototype.call()

함수.call(this, arg1, arg2, ...)

3. Function.prototype.apply()

함수.apply(this, [argsArray])

• call과 똑같지만 단지 인자들을 배열 형태로 전달하는 차이점이 있다. (혹은 유사 배열 객체)