카테고리 없음

[코어 자바스크립트] 03_this

선인장777 2023. 8. 23. 11:59
  학습 전 학습 후
this는 무엇인가요? this는 객체로 .. 실행 컨텍스트에 따라 동적으로 바인딩 되는 특별한 키워드로 현재 실행 중인 함수나 메서드가 어떻게 호출되었는 지에 따란 다른 객체를 참조할 수 있도록 해줍니다.
this의 값은 어떻게 결정이 되나요? 크게 4가지로 결정됩니다.
1. 함수선언식 => 전역을 가리킵니다.
2. 화살표 함수 => 상위를 가리킵니다.
3. 객체의 프로퍼티 => 인스턴스를 가리킵니다.
4. addEventListener => 앞의 객체를 가리킵니다.
함수를 어떤 식으로 호출 하냐에 따라 값이 달라집니다.
1. 전역 공간에서의 this => 전역 객체를 가리킵니다.
2. 함수를 메서드로 호출 => 자신을 호출한 대상 객체를 가리킵니다.
3. 함수를 함수로서 호출 => 
함수 선언식과 화살표 함수의 차이 1. 함수선언식 => 전역을 가리킵니다.
2. 화살표 함수 => 상위를 가리킵니다.
둘다 메서드로 호출하면 자신을 호출한 대상객체를 가리킴

함수로 호출하면서 함수선언식은 호출된 객체를 가리킵니다.
함수로 호출하면서 화살표 함수는 자체적인 this를 가지지 않고, 외부 컨텍스트의 this를 따릅니다.

명시적 this 바인딩과 암묵적 this 바인딩에 대해 설명해주세요 명시적 바인딩은 bind메서드를 사용해서 바인딩한 것이고 암묵적 바인딩은 그렇지 않은 것입니다. 명시적 this 바인딩 => 함수의 내장 메서도인 bind, call, apply를 사용하는 방법이며 this 값을 특정 객체로 강제로 지정하는 것입니다.

암묵적 this 바인딩 => 주로 객체의 메서드 내에서 사용되며, 메서드가 속한 객체를 가리키기 위해 사용합니다.
화살표 함수는 this 바인딩이 어떻게 될까요?   화살표 함수는 자체적인 this를 가지지 않으며, 화살표 함수 내에서의 this는 해당 함수가 생성된 컨텍스트의 this를 따릅니다. 
apply와 call이 무엇이고, 서로는 무엇이 다른가요? 둘다 바인딩 하는 것이지만, apply는 array채로 바인딩 하는 것이고 call은 string 또는 number로 바인딩 하는 것입니다. 두가지 모두 함수를 호출할때 사용하는 메서드로 함수를 호출하며 this 컨텍스트와 매개변수를 지정할 수 있도록 도와줍니다.

두 메서드의 차이점은
call 메서드는 this 컨텍스트와 함수의 매개변수를 ,로 구분하며 순서대로 전달합니다. 또한 매개변수 개수가 정해져있는 경우 사용이 적합합니다.

apply 메서드는 매개변수를 배열 형태로 전달합니다. 또한 매개변수의 개수가 동적일때, 적합합니다.
bind는 어떤 메소드인가요? this를 명시적으로 바인딩하고자 바인딩 주체와 바인딩 할 것을 프로퍼티로 받습니다. 함수의 this 컨텍스트를 영구적으로 설정하거나 함수의 매개변수를 부분적으로 적용하여 새로운 함수를 생성하는 메서드입니다.
strict mode에서 this 바인딩은 어떻게 달라지나요?  
  1. 전역 컨텍스트에서의 this:
    • 일반 모드: 전역 컨텍스트에서 함수를 호출할 때 this는 전역 객체 (브라우저 환경에서는 window, Node.js 환경에서는 global)를 가리킵니다.
    • Strict Mode: 전역 컨텍스트에서 함수를 호출할 때 this는 undefined가 됩니다. 이로 인해 전역 스코프에서의 this를 사용하는 일부 코드가 에러를 발생시키지 않도록 합니다.
  2. 암묵적인 this 변환 금지:
    • 일반 모드: JavaScript는 암묵적으로 this를 전역 객체로 변환하는 묵시적인 규칙을 가지고 있습니다.
    • Strict Mode: 이러한 묵시적인 this 변환을 금지하므로, 일부 예상치 못한 동작을 방지하고 에러를 감지할 수 있게 됩니다.
  3. this를 변경하는 함수의 사용 제한:
    • Strict Mode: Strict Mode에서는 내부 함수에서 this를 변경하는 함수인 call, apply, bind의 사용이 제한됩니다. 이로 인해 this를 더 안전하게 관리할 수 있습니다.
  4. 매개변수 명 중복 금지:
    • Strict Mode: 함수의 매개변수명을 중복해서 사용하는 것을 금지합니다. 이를 통해 코드의 가독성을 높이고 잠재적인 버그를 방지합니다.
  5. 정의되지 않은 변수 사용 금지:
    • Strict Mode: 변수를 정의하지 않고 사용하려 할 때 에러를 발생시킵니다. 이를 통해 오타나 잠재적인 문제를 빠르게 감지할 수 있습니다.
이벤트 핸들러에서 this 키워드가 가리키는 것은 무엇일까요? 이벤트 핸들러를 호출하는 객체입니다. 이벤트가 발생한 html 요소를 가리킵니다.
화살표 함수를 이벤트 핸들러로 사용할 경우, this가 이벤트가 발생한 HTML요소를 가리키지 않고, 외부 컨텍스트의 this를 따르게 됩니다. 이런 경우에는 명시적으로 bind를 사용해야합니다.
메소드 체이닝과 this를 연관지어 설명해주세요   this 키워드는 메서드 체이닝에서 객체의 메서드 간에 정보를 전달하고 객체 상태를 유지하는데 사용됩니다.