[Javascript] 명시적 this 바인딩

⭐️ 명시적 바인딩 4가지 방법

function add(a, b) {
    return a + b;
}

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

call, apply, bind함수를 사용하여 this를 원하는 대상에 바인딩 시켜준다.

---

1. call 메서드

Function.prototype.call(thisArg[, arg1[, arg2[, ...]]])

메서드를 그냥 호출하면 this는 전역객체를 참조하지만 call 메서드를 이용하면 임의의 객체를 this로 지정할 수 있다.

 var obj = {
   a: 1,
   method: function (x, y) {
     console.log(this.a, x, y);
   },
 };

 obj.method(2, 3);
 obj.method.call({ a: 4 }, 5, 6);

1 2 3
4 5 6

---

2. apply 메서드

Function.prototype.apply(thisArg[, argsArray])

apply 메서드는 call 메서드와 기능적으로 완전히 동일하다.
call 메서드는 첫 번째 인자를 제외한 나머지 모든 인자들을 호출할 함수의 매개변수로 지정하는 반면, apply 메서드는 두 번째 인자를 배열로 받아 그 배열의 요소들을 매개변수로 지정한다.

var func = function (a, b, c) {
  console.log(this, a, b, c);
};

func.apply({ x: 1 }, [4, 5, 6]);

var obj = {
  a: 1,
  method: function (x, y) {
    console.log(this.a, x, y);
  },
};

obj.method.apply({ a: 4 }, [5, 6]);

{x:1} 4 5 6
4 5 6

---

3. bind 메서드

this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드다.

function foo() {
    console.log(this.a);
}

const obj = {
    a:1,
    foo: foo
}

const foo2 = obj.foo.bind(obj);
const foo3 = foo2.bind({a: 4});

foo2(); //1
foo3(); //1

call과 apply의 경우 함수의 실행값을 반환하는 반면 bind는 this가 새롭게 바인딩한 함수(원본 함수의 복제본)를 반환한다.

bind를 통해 생성된 함수의 this는 최초의 바인딩된 객체로 고정된다.
다시 명시적으로 바인딩해도 this가 바뀌지 않는 것을 확인할 수 있다.

---

4. new 메서드

function Foo() {
    console.log(this);
}

new Foo(); // Foo

new를 통해 생성하게되면 this는 새로 생성된 객체를 가르키게 된다.

---

📌 name 프로퍼티

bind 메서드를 적용해서 새로 만든 함수는 독특한 성질이 있다.
바로 name프로퍼티에 동사 bind의 수동태인 'bound'라는 접두어가 붙는다는 점이다.
어떤 함수의 name프로퍼티가 'bound xxx'라면 이는 곧 함수명이 xxx인 원본 함수에 bind 메서드를 적용한 새로운 함수라는 의미가 된다.