[TIL 1/28] JS - bind, call

오늘의 회고

오늘은 몸이 안좋아서 재택근무를 진행했다. 나는 출근을 해서 살짝 텐션이 있는 상태에서 작업하는것을 선호하기 때문에 재택근무가 가능함에도 꼭 사무실에 가서 코딩을 하곤 했다.
그렇게 첫 재택근무 후기는 아래와 같다.

  • 출퇴근 시간이 없다. 시간적 여유가 늘어남
  • 식비가 들지 않는다. 금전적 여유가 늘어남
  • 효율은 떨어지는 것 같다. 아마 나의 집중도 탓인듯..?
  • 나는 출근하는게 체질에 맞다

오늘 학습한 것

  • Function.prototype.call()
  • Function.prototype.bind()

Function.prototype.call()

call() 메서드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출한다.
아래 예제에서 살펴보자.

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

위 예제를 보면 마지막 줄에 obj.yell.call(obj2) 를 보면, this가 가리키는 것을obj에서 obj2로 바꾸었다.

즉, this를 대체하여 obj.yell 메서드를 호출한 것이다. 당연히 obj의 yell 메서드의 this.string은 'zero'다. 하지만 this가 가리키는 것을 obj2의 this로 바꿔서 this.string이 'what?'이 되었다.

자세하게는 살펴보지 않았지만, 자주 사용하면 좋은 코드가 될 것 같지는 않다.

Function.prototype.bind()

bind() 메서드는 call()의 기능에서 호출만 빠진것이라고 생각하면 좋다.
아래 예제에서 살펴보자.

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

obj.yell.bind(obj2) 를 진행하면 어떨것 같은가?
yell 메서드의 this는 obj2를 가리키게 된다. 즉 call()과 비슷하지만 호출만 하지 않는 것이다.
call(this, 1, 2, 3)bind(this)(1, 2, 3) 과 같다.

Reference

함수의 메소드와 arguments

좋은 웹페이지 즐겨찾기