this

📌 암시적 바인딩과 명시적 바인딩에 대해서 설명해주세요.

• 암시적 바인딩
  • 암시적 바인딩은 함수가 어떻게 호출되었느냐에 따라 this가 결정되는 개념입니다.
  • 메소드 호출: 함수가 객체의 메소드로 호출될 때, this는 해당 객체를 가리킵니다.
• 명시적 바인딩
  • 명시적 바인딩은 개발자가 직접 함수의 this 값을 지정하는 것을 의미합니다.
  • call, apply, bind를 사용하거나 개발자가 직접 this 값을 지정함으로써 명시적 바인딩을 구현할 수 있습니다.

📌 this를 이용하여 개발한 경험 알려주세요. 없다면, 언제 쓰면 유용할 것 같으신가요?

• 객체 메소드 내에서 프로퍼티 및 메소드 접근

• 생성자 함수를 사용한 객체 생성

• 이벤트 핸들러 등에서 DOM 요소 조작

• 클로저에서 사용

  function outer() {
    this.message = 'Hello, ';
  
    function inner(name) {
      console.log(this.message + name);
    }
  
    return inner;
  }
  
  const greetingFunction = outer();
  greetingFunction('Alice'); // 'Hello, Alice'
  		```

• 장점

  • 코드 구조와 가독성을 개선하고, 다양한 프로그래밍 상황에서 유연성을 제공하는 중요한 요소입니다.
  • 객체지향 프로그래밍 원칙을 적용하여, 객체의 속성과 메소드를 이어붙여 연결하고, 객체의 상태와 동작을 모델링할 수 있습니다. 이로써 코드의 구조화와 재사용성이 향상됩니다.

📌 call, apply, bind의 역할은 무엇이고 어떻게 사용되나요?

• call
  • call 메서드는 함수를 호출할 때 사용되며, 첫 번째 매개변수로 함수 내에서의 this 값을 설정하고, 나머지 매개변수는 함수의 매개변수로 전달됩니다.
• apply
  • apply 메서드도 함수를 호출할 때 사용되며, 첫 번째 매개변수로 함수 내에서의 this 값을 설정하고, 두 번째 매개변수로 함수에 전달할 인수를 배열로 받습니다.
• bind
  • bind 메서드는 함수의 this 값을 설정하는 새로운 함수를 생성합니다. 원본 함수를 변경하지 않습니다.
• 결론
  • call과 apply는 함수를 즉시 호출하고 this와 인수를 설정하는 데 사용되며, bind는 함수와 this를 연결하고 나중에 호출할 수 있는 새로운 함수를 생성합니다.

📌 일반 함수의 this와 화살표 함수의 this는 어떻게 다른가요?

• 일반 함수
  • this는 호출된 컨텍스트에 의해 결정됩니다. 즉, 함수가 어떻게 호출되었느냐에 따라 this가 달라집니다.
  • 전역 컨텍스트에서 호출된 경우, this는 전역 객체를 가리킵니다 (브라우저 환경에서는 window 객체).
  • 메소드로 호출된 경우, this는 메소드를 호출한 객체를 가리킵니다.
  • 함수가 생성자로 사용될 때, this는 생성된 객체를 가리킵니다.
• 화살표 함수
  • 화살표 함수의 this는 언제나 상위 스코프(lexical scope)의 this를 상속받습니다. 화살표 함수가 선언된 곳의 컨텍스트에 따라 this가 결정됩니다.
  • 화살표 함수는 자체적인 this를 가지지 않으며, 항상 상위 스코프의 this를 그대로 사용합니다.
• 결론
  • 일반 함수의 this는 호출 컨텍스트에 따라 동적으로 변하기 때문에 주의가 필요하며, 이것이 일부 개발자가 화살표 함수를 사용하는 이유 중 하나입니다.
  • 화살표 함수의 this는 정적으로 상위 스코프를 따르므로 호출 방식에 관계없이 항상 동일한 this 값을 가지며, 이는 종종 원하는 동작을 달성하는 데 도움이 됩니다.

📌 일반 함수 호출, 메서드 호출, 생성자 함수 호출마다 this는 어떤 값으로 바인딩 되나요?

• 일반 함수 호출
  • 전역 객체에 바인딩.
• 메서드 호출
  • 메서드를 호출한 객체에 바인딩.
• 생성자 함수 호출
  • 생성자 함수가 생성할 인스턴스에 바인딩.
• call / apply / bind
  • 첫 번째 인수로 전달한 객체에 바인딩.