카테고리 없음
[코어 자바스크립트] 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 바인딩은 어떻게 달라지나요? |
|
|
이벤트 핸들러에서 this 키워드가 가리키는 것은 무엇일까요? | 이벤트 핸들러를 호출하는 객체입니다. | 이벤트가 발생한 html 요소를 가리킵니다. 화살표 함수를 이벤트 핸들러로 사용할 경우, this가 이벤트가 발생한 HTML요소를 가리키지 않고, 외부 컨텍스트의 this를 따르게 됩니다. 이런 경우에는 명시적으로 bind를 사용해야합니다. |
메소드 체이닝과 this를 연관지어 설명해주세요 | this 키워드는 메서드 체이닝에서 객체의 메서드 간에 정보를 전달하고 객체 상태를 유지하는데 사용됩니다. |