[Javascript] [ this ] call , apply , bind Method

[ this ] call , apply , bind Method

[ this ]

• 현재 실행 중인 함수 또는 매서드 내에서 사용되며, 해당 함수 또는 메서드가 호출된 객체를 참조한다.
• this 값은 실행 컨텍스트에 따라 동적으로 바인딩 되며, 다양한 상황에서 다른 객체를 참조할 수 있다.

---

• 객체 내부에서의 메서드 호출
  • 객체 내부의 메서드에서 ‘this’를 사용하면 해당 메서드를 호출한 객체를 참조할 수 있다.
  • 이것은 주로 객체 지향 프로그래밍에서 주로 사용된다.
  • const person = { name: 'John', sayHello: function () { console.log(`Hello, my name is ${this.name}`); }, }; person.sayHello(); // "Hello, my name is John"
• 생성자 함수 내부에서
  • 생성자 함수 내부에서 this는 새로 생성된 객체(업데이트된) 를 가리킵니다.
  • 이것은 객체의 인스턴스 를 생성할 때 주로 사용됩니다.
  • function Person(name) { this.name = name; } const john = new Person('John'); console.log(john.name); // "John"
• 이벤트 핸들러에서
  • 이벤트 핸들러 함수 내부에서 this는 이벤트를 발생시킨 DOM 요소를 가리킵니다.
  • const button = document.getElementById('myButton'); button.addEventListener('click', function () { console.log(this); // 버튼 요소를 참조 });
• 화살표 함수에서
  • 화살표 함수에서는 ‘this’가 정적으로(자동) 바인딩 되는 특징을 가지고 있다.
  • 화살표 함수에서의 ‘this’ 는 함수를 둘러싼 컨텍스트를 가리키지 않고, 상위 스코프의 ‘this’ 값을 유지한다.
  • 때문에 화살표 함수 내부에서 ‘this’ 가 어떤 객체를 참조하도록 정의하지 않으면
  • 기본적으로 전역객체 ( 브라우저 환경에서는 ‘widow’) 를 참조하게 된다.이것은 화살표 함수의 주요 특징이다. 따라서 올바른 방법은 화살표 함수 대신 일반 함수를 사용하는 것이다.
  • const person = { name: 'John', sayHello: function () { console.log(`Hello, my name is ${this.name}`); }, }; person.sayHello(); // "Hello, my name is John" // 이렇게 하면 'this' 가 person 객체를 참조하고, 예상대로 작동한다.
  • const person = { name: 'John', sayHello: () => { console.log(`Hello, my name is ${this.name}`); }, }; person.sayHello(); // "Hello, my name is undefined" (주의: this.name은 undefined)

 

[ call , a pply , bind ]

---

• call , apply , bind 메서드는 ‘this’ 를 사용하였을 때에만 주요하게 활용된다.
• call , apply bind 메서드는 함수에 다른 객체를 바인딩 하거나 함수를 호출할 때 인자를 전달하는데 사용된다.
• call : 함수 컨텍스트 변경
  • call 메서드는 특정객체의 컨텍스트(즉,’this’의 값) 을 변경할 수 있다.
  • 함수를 다른 객체와 연결하여 해당 객체 내에서 함수를 실행할 수 있다.
  • const person = { name: 'John', }; function sayHello() { console.log(`Hello, my name is ${this.name}`); } sayHello.call(person); // "Hello, my name is John"
• apply : 배열 형태로 인자전달 ↔ call 은 인자를 개별적으로 전달한다.

    const minNum = Math.min.apply(null, nums);
    // Math.min.apply(null,[3,10,1,6,4])
    const maxNum = Math.max.call(null, ...nums);
    // Math.min.call(null,3,10,1,6,4)

• const person = { name: 'John', }; function greet(message, punctuation) { console.log(`${message} ${this.name}${punctuation}`); } // this.name greet.call(person, 'Hi', '!'); // "Hi John!" greet.apply(person, ['Hi', '!']); // "Hi John!"
• bind : 함수 바인딩
  • 함수의 컨텍스트를 영구적으로 바인딩하고 새로운 함수를 반환한다.
  • 이를 통해 이벤트 핸들러나 콜백 함수를 생성할 때 특정 컨텍스트를 고정 시키는데 사용된다.
  • const person = { name: 'John', }; function greet(message, punctuation) { console.log(`${message} ${this.name}${punctuation}`); } // this.name const greetJohn = greet.bind(person); greetJohn('Hello', '!'); // "Hello John!"

---

ES6에서 도입한 화살표 함수와 같은 기능을 사용하면 call , apply , bind 를 대체할 수 있는 경우가 있다.

하지만 이러한 메서드는 여전히 일부 상황에 유용하며, 레거시 코드와의 호환성을 유지하기 위해 사용될 수 있으므로 JavaScript 에서는 call, apply, bind 에 대한 이해가 중요하다.

 

[+ 컨텍스트 (Context) ]

• 대부분의 경우, 컨텍스트는 this 키워드와 연관된다.
• 현재 실행중인 코드 블록의 컨텍스트에 따라 다른 객체를 가리키며 , 컨텍스트에 따라 동적으로 바뀐다 ( this 가 참고하고 있는 객체 )
• 예로 , 아래의 예제에선 person 이 Context 가 된다.
• 화살표 함수에선 window 가 Context 가 된다.

const person = {
  name: "John",
  sayHello: function() {
    console.log("Hello, " + this.name);
  }
};

person.sayHello(); // "Hello, John" (여기서 this는 person 객체를 가리킴)