[JS] call / apply / bind: this 명시적 바인딩

✨ this를 명시적으로 바인딩

 

= 함수가 실행될 때 this가 참조하는 객체를 명확하게 지정하는 것

• this 값을 제어하거나 함수의 실행 방식을 조정
• 함수의 실행 컨텍스트를 유연하게 변경하고 제어

---

 

📌 call()

: 함수에 인자를 개별적으로 풀어서 전달

함수.call(thisArg, arg1, arg2, ...);

• 함수를 호출할 때 this 값을 설정하고, 그 이후에 이어지는 인수들을 개별적으로 전달
  
• 함수 즉시 호출
• 주로 상속이나 메서드 호출 시 유용

 

function greet(greeting, punctuation) {
    console.log(greeting + ", " + this.name + punctuation);
}

const person = { name: "Alice" };

greet.call(person, "Hello", "!");
// Output: "Hello, Alice!"

 

 

---

 

📌 apply()

: 함수에 인자를 배열로 전달

func.apply(thisArg, [argsArray]);

• 주어진 this 값과 배열로 제공되는 arguments로 함수를 호출
• 함수 즉시 호출
• 배열을 인자로 사용하는 함수에 유용

function greet(greeting, punctuation) {
    console.log(greeting + ", " + this.name + punctuation);
}

const person = { name: "Alice" };

greet.apply(person, ["Hello", "!"]);
// Output: "Hello, Alice!"

 

 

---

 

📌 bind()

: 초기 인자들을 설정한 새로운 함수 반환

const boundFunc = func.bind(thisArg, arg1, arg2, ...);

• 함수 나중에 호출 가능 ⭕
  - 나중에 호출할 수 있도록 새로운 함수(바인딩된 함수)를 생성
• 이벤트 핸들러나 콜백 함수에서 this 값을 고정할 때 유용

 

function greet(greeting, punctuation) {
    console.log(greeting + ", " + this.name + punctuation);
}

const person = { name: "Alice" };

const boundGreet = greet.bind(person, "Hello");
boundGreet("!");
// Output: "Hello, Alice!"

 

 

---

 

Function.prototype.call() - JavaScript | MDN

 

Function.prototype.apply() - JavaScript | MDN

 

Function.prototype.bind() - JavaScript | MDN