https://xionwcfm.tistory.com/142
자바스크립트의 this를 이해해보자
⚡this는 뭔가요? this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참
xionwcfm.tistory.com
😎물론 과거의 나는 해놨지만.
과거의 나... 나자신만 알아보게 써놓으면 어쩌라는 것인지?
뭐지? 자기과시?
따라서... this의 개념이 희박한 현재
이벤트 루프를 다시 보니 this 개념이 부족해서
동작이 이해안되는 걸 체감하고 this부터 봅니다..
😎미래의 나야 이 표 보렴
네가 중첩함수,콜백함수의 this가 헷갈려할 것을 알고있단다.
| 일반함수 호출 | 전역객체가 바인딩됩니다. | 근데.. nodeJS에선 일반함수 안에서 this는 globalThis가 바인딩됨 어라..? |
| 전역에서 this | window,global 객체 | 당연함 근데 node환경에서 전역 this는 globalThis를 가리키는게아니라 module.exports를 가리키기때문에 {} 이런 빈객체가 반환됨 |
| 메서드 호출 | 메서드를 호출한 객체 | obj.hi(this) -> this === obj |
| 명시적바인딩 (call,apply,bind) |
위 메서드의 인자로 넘겨준 객체의 환경을 bind합니다. | Array.prototype.forEach.call(obj,()=>{}) |
| 중첩함수,콜백함수의 this | 전역 객체가 바인딩된다. 왜냐하면??? 일반 함수로 호출되기 때문이다. 어떤 함수라도 어디서 정의가되었다하더라도 일반 함수로 호출되면 전역 객체가 바인딩된다. |
setTimeout(function(){console.log("어라"}),1000) |
| 화살표함수 | 화살표 함수는 자체적인 this 바인딩이 없다. 따라서 화살표함수는 lexical this를 가지고 bind,apply,call등으로 바인딩을 해주어도 this 자체가 없기때문에 항상 lexical this다. 화살표함수는 자신이 속한 곳보다 한차례 위의 부모를 가리키는 특징이 있기때문에 메서드로 사용하는것은 주의가 필요하다. |
const obj = { hi: ()=> {console.log('this')} } obj.hi() // obj가 호출했지만 this에 바인딩되는건 obj의 상위 환경이 바인딩됨 |
😎this 키워드는...
자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다.
this를 통해서 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조 가능합니다.
this는 엔진에 의해 암묵적으로 생성되며 어디서든 참조할 수 있습니다.
함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달됩니다.
이건 저번에 bytecode 까볼 때 알아본 내용이네요
함수 내부에서 arguments를 지역변수처럼 사용할 수 있는것처럼
this 역시도 지역 변수처럼 사용할 수 있습니다.
단!!!!!!!!!!!!!
this가 가리키는 값은 (this 바인딩)은 함수 호출 방식에 의해 동적으로 결정됩니다.
😎this 바인딩이 뭘까요
그건 식별자와 값을 연결하는 과정을 의미합니다.
this 바인딩은 this가 가리킬 객체를 바인딩하는 것을 뜻합니다.
😎예제 1을 봅시다
const circle = {
radius: 5,
getDiameter() {
return 2 * this.radius;
},
};
console.log(circle.getDiameter()); // 10객체 리터럴의 메서드 내부에서의 this는 메서드를 호출한 객체인 circle을 가리킵니다.
앞서 this는 함수 호출 시점에 결정된다고 했습니다.
그래서..그런가보네요..
저렇게 동작할거라는건 예상되는데 이유를 물어보면 좀 애매한 느낌
호출된 환경이 중요한게 아니라 호출한 주체가 중요한건가?
MDN에서는 대부분의 경우 this 의 값은 함수를 호출한 방법에 의해 결정됩니다.
라고 설명합니다.
생성자 함수의 this가 인스턴스를 가리키는 건 너무나도.. 잘 알고 있으니 넘어가겠습니다.
아무튼 알 수 있는 건 this는 상황에 따라 가리키는 대상이 다르다는 것
또한 자바스크립트의 this는 strict mode의 적용 여부에도 영향을 받습니다
생각보다 제가 this에 대해 정말 모르네요...
😎strict mode에서의 this
strict mode가 적용된 일반 함수 내부의 this에는 undefined가 바인딩됩니다.
일반 함수 내부에서 this를 사용할 필요가 없기 때문이죠..
왜냐? 어차피 전역객체가 바인딩되기 때문에...
따라서 객체의 프로퍼티나 메서드를 참조하기 위해 사용될때에만 this는 의미가 있다..
😎전역 문맥에서 사용한 this
ok... this는 기본적으로 전역 실행에선 전역 객체를 참조합니다.
좋아요
😎메서드 호출과 함수 호출의 차이
이부분은 아예 처음 알게된 사실입니다.
호출을 하는게 아니라 메서드를 할당해주면 그건 obj.a에 들어있는 함수를 꺼내온것이니
더이상 메서드가 아니고 그러면 자연스럽게 this는 window 객체가 되어버린다.
정말 충격적이네요
bind,call,apply도 눈에띄는데
저런식으로 사용할 수 있는 거였군요..
😎메서드를 호출하는 경우..
메서드를 호출한 객체에 바인딩이 된다...
이것은 완전히 이해가 되는군요
document.body.onclick = function() {
console.log(this); // <body>
}😎이벤트 핸들러 안에서 쓰는 this
이 경우엔 그냥 이벤트가 발생한 dom 요소가 this가 됩니다.
왜..?
하지만 그렇다면 그런거죠 네..
😎화살표 함수의 this...
화살표 함수는 자기 this 바인딩이 없어서
메서드로 쓰려고하면 이런 일이 발생합니다.
따라서 메서드에서 화살표함수 사용은 지양해야하며
웬만하면 ES6 메서드 축약 표현을 이용해 선언해주는게 좋습니다.
😎node 환경에서의 this
function hi() {
console.log(this); // globalThis
}
hi();node 환경에서 전역에 this를 찍어보면 빈객체 {}가 반환됩니다.
이는 node 환경에서 this는 module.exports를 뜻하기때문입니다.
반면 node환경에서 함수 내부에서 this를 찎어보면
setTimeout등의 API가 들어있는 globalThis가 반환됩니다.
이 점을 유의하시기 바랍니다.
만약 전역에서 우리가 원하는 this를 꺼내기 위해선
globalThis에 접근하면됩니다.
console.log(globalThis);
반응형
'javascript' 카테고리의 다른 글
| node.js의 스레드 풀은 무엇인가.. (1) | 2023.03.29 |
|---|---|
| node.js 환경에서 fetch API를 사용하는 방법 (0) | 2023.03.21 |
| 프로미스를 회처럼 날로 먹는 방법 (3) | 2023.03.15 |
| 타이머 함수를 케이크처럼 쉽게 이해하는 법 (2) | 2023.03.12 |
| 이벤트 루프와 블록 컨텍스트를 알아보자. (0) | 2023.03.10 |
