자바스크립트 call, bind

제로초님 블로그 자료를 공부한 내용입니다.

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

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

call 

var example = function (a, b, c) {
    console.log(a + b + c)
    return a + b + c;
};
example(1, 2, 3); // 6
example.call(null, 2, 3, 4); // 9
example.apply(null, [3, 3, 3]); // 9

call , apply 모두 null을 제외하면 일반함수와 파라미터를 던지는 것 까지 같다.

null은 this를 대체하는 것인데, null없다면 에러가 난다.

 

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

call은 내가 이해한 것은 현재 this가 가르키는 걸 이걸로 바꾸어라 라는 것이다.

위 코드를 보면 yell에서 this는 string을 가르키고 있다. 

그런데 call을 사용해서 this를 obj2로 바꾼다면, this.string은 what? 을 가르키게 된다.

 

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

위 코드는 help 라는 key 값을 추가한 것이다. 

this -> obj를 가르킬때는 zero gogo 가 출력되지만,

this -> obj2 를 가르킬때는 zero undefined 가 출력된다. 그 이유는 obj2에는 help 키 값이 없기때문이다.

 

위 메소드는 함수의 arguments를 조작할때 사용된다.

 

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

arguments는 함수가 처음 부터 갖고있는 숨겨진 속성이다.

이는 실제로 배열은 아니지만 배열형식으로 반환된다. (유사 배열)

 

function example2() {
  console.log(arguments.join());
}
example2(1, 'string', true);

그러므로 실제 배열이 아니기때문에 join 메소드를 사용할 수 없다.

 

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

배열 프로토타입에 있는 join 함수를 빌려쓰면 제대로 작동하게 된다.

 

bind

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

bind는 call과 비슷한데, call은 함수가 바로 호출이 되었지만 bind는 이렇게 

var yell2에 함수를 반환하여 사용할 수 있다.

 

그러므로 처음에 사용했던 함수는 

var example = function (a, b, c) {
    console.log(a + b + c)
    return a + b + c;
};
example(1, 2, 3);
example.call(null, 2, 3, 4);
var aa = example.bind(null, 3, 2, 3);
aa();

위와 같은 식으로 bind 해서 aa 를 통해 호출 할 수 있습니다.