오늘은 자바스크립트에서 this 키워드의 사용과 특성에 대해서 공부해볼텐데요.
This란
자바스크립트 내에서 중요하면서도 혼란스러운 개념 중 하나입니다. this는 실행 컨텍스트에 따라 그 값이 어떻게 될 것인지 결정이되고 현재 실행중인 함수 또는 메소드의 '소유자'를 가리킵니다.더 쉽게 설명하자면
- 자바스크립에서 this 키워드는 개체를 나타냅니다.
- this의 값은 함수를 호출하는 방법에 의해 결정됩니다.
(단 실행중에는 할당으로 설정할 수 없고, 함수를 호출할 때 마다 다를 수 있습니다.)
-this 키워드는 사용 방법에 따라 다른 개체를 참조합니다.
1.객체 메소드에서는, this가 객체를 참조합니다.
2.단독으로 쓰일 땐, this가 전역 객체를 참조합니다.
3.함수에서 쓰일 땐, this가 전역 객체를 나타냅니다.
4.함수에서 엄격모드('strict mode')일땐, this가 undefined를 나타냅니다.
5.이벤트에서는, this가 이벤트를 발생시킨 요소를 나타냅니다.
6.call(), apply(), bind() 메소드에서는 this가 모든 객체를 참조할 수 있습니다.
1.전역 컨텍스트에서의 this
전역 실행 컨텍스트에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서는 window.
Node.js에서는 global이 됩니다.
(컨텍스트는 호출, 응답 간의 환경 정보라고 보시면 될 것 같습니다.)
예시와 같이 브라우저 환경에서는 console.log(this); 를 하면 window 객체만을 출력을 합니다.
2. 함수 내에서의 this
일반 함수에서 this의
일반 함수에서 this의 값은 기본적으로 전역 객체를 가리킵니다. 하지만 엄격 모드('use strict')에서는 결과값이 다릅니다.
엄격모드인 함수에서는
자바스크립트에서 엄격 모드는 기본 바인딩을 제공하지 않습니다.
함수에서의 this를 사용할 때 엄격모드를 적용하면 this가 undefined가 나타납니다.
3. 객체 메소드 내에서 this
객체의 메소드로서 함수를 호출될 때, this는 해당 메소드를 호출한 객체에 바인딩이 됩니다.
this를 갖고있는 getname 함수를 직접적으로 호출한 객체가 object 객체이기 떄문에 출력은 object 객체가 나옵니다.
4. 생성자 함수에서의 this
생성자 함수에서 this는 새로 생성되는 객체를 가리킵니다.
함수가 앞에 new 키워드를 사용하여 호출되면(생성자 호출) 아래와 같은 일이 발생합니다.
1.완전히 새로운 객체가 생성됩니다.
2.새로 생성된 객체는 생성한 함수에 [{Prototype}]링크 되어 있습니다.
3.새로 생성된 객체는 해당 함수 호출에 대한 this바인딩으로 설정됩니다.
5.이벤트 핸들러에서의 this
이벤트 핸들러에서의 this는 이벤트를 받는 요소를 가리킵니다.
6. 에로우(화살) 펑션(함수)에서의 this
에로우 펑션은 일반 함수와는 다르게 this를 자체적으로 바인딩하지 않고, 함수가 생성된 시점의 실행 컨텍스트의 this를 "상속" 받습니다.
위 예시에서 regularFunction의 setTimeout 콜백 함수는 일반 함수로서 호출되어 전역 객체의 this를 가리킵니다. 반면에 arrowFunction의 setTimeout 콜백 함수는 화살표 함수로 정의되어 arrowFunction의 실행 컨텍스트인 obj의 this를 상속받습니다.
오늘은 자바스크립트에서의 this 에 대해서 배워보았는데요.. 뭔가 알 것 같으면서도 모를 것 같은..
그런 느낌적인 느낌입니다.! 다음에 기회가 된다면 다시 다루어 보도록 하겠습니다!
그럼 20000!
여러 예시로 읽기 쉽게 정리해주신거같아요!