티스토리 뷰
mdn 등 여러 문서들을 통해 공부하여 스터디 조원들에게 설명하기 위해 정리한 내용입니다.
1. this란 무엇인가?
JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 strict mode와
none-strict mode 사이에서도 조금 다릅니다.
this는 함수 내에서 함수 호출 맥락(context)를 의미합니다. 맥락이라는 것은 상황에 따라서 달라진다는 의미인데 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻입니다.
대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다.
함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 합니다.
this를 아주 간단히 한마디로 말한다면 현재 작업 중인 객체에 대한 참조입니다
1-1. 함수에서의 this
- 그 자체로 혹은 함수 안에서 쓰면 window(전역객체)를 뜻합니다.
크롬 콘솔 창에 this를 입력하면 window를 출력합니다.
기본적으로 this에는 전역 객체(global object)가 바인딩 됩니다.
일반 함수 안에서 this를 사용해도 window를 가리킵니다.
2. use strict 엄격모드에서 함수 내에서 쓰면 undefined를 뜻합니다.
** 엄격모드에서 함수 내의 this가 undefined인 이유
JavaScript에서 strict 모드를 사용하면 코드의 일관성이 높고 오류 발생 가능성이 줄어듭니다.
strict 모드를 사용할 때 발생하는 변경 사항 중 하나는 익명 함수의 this 값이 undefined되는 것입니다. 즉, this 는 엄격하지 않은 모드에서처럼 전역 개체를 지칭하지 않습니다. 엄격하지 않은 모드에서는 익명 함수의 this 값을 예측할 수 없고 예기치 않은 동작으로 이어질 수 있기 때문에 이 동작은 의도적입니다.
엄격한 모드에서 this를 undefined로 설정함으로써, 개발자가 this를 특정 객체나 값에 명시적으로 설정하기 위해 bind, call apply 메서드를 사용하여 함수의 this 값에 대해 더 명확하게 지정하도록 합니다.
1-2. 메서드에서의 this
메서드(object 내 함수)에서 쓰면 그 함수를 가지고 있는 object를 뜻합니다.
오브젝트 내에도 함수를 집어넣을 수 있고 오브젝트에 들어가는 함수들을 메서드(method)라고 합니다.
메서드 안에서 this 를 쓰면 해당 메서드를 가지고 있는 오브젝트를 뜻합니다.
출처:
MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
코드종 https://youtu.be/PAr92molMHU
코딩애플 https://www.youtube.com/@codingapple
생활코딩 https://youtu.be/oLQAPn-L22g
'JavaScript' 카테고리의 다른 글
[자바스크립트 기본 개념] 함수의 정의와 종류 (0) | 2024.09.19 |
---|---|
[자바스크립트 기본 개념] 변수 (0) | 2024.08.30 |
[의문점].forEach()에서 prototype은 왜 생략하는 걸까 (0) | 2023.02.07 |
자바스크립트로 html 코드 생성하기 (0) | 2023.02.03 |
눈 뜨자마자 어플로 퀴즈 풀기 (0) | 2023.01.28 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 프로그래밍독학
- CSS선택자
- 논리부정연산자
- CSS
- translateX
- 비전공자
- 로컬스토리지오류
- DOM제어
- 화살표함수
- 캐시오류
- DOMapi
- 즉시실행함수
- 체크박스오류
- labelfor
- :nth-child
- JavaScript
- CSSDiner
- 가상돔
- 이벤트핸들링
- 자바스크립트
- 변수스코프
- vanillajs
- CSS게임
- 프론트엔드독학
- dom조작
- VirtualDom
- 코딩독학
- 리액트
- 상태변수
- DOM자바스크립트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
글 보관함