Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
Tags
- Vite
- Biweekly Contest 79
- commitlint
- javascript
- Sanity.io
- react-dom
- Medium
- 모던 자바스크립트 Deep Dive
- 호이스팅
- Weekly Contest
- React Public Routes
- leetcode
- 프로그래머스
- BFS
- next-auth
- sql
- medinum
- React.memo
- next.js
- tailwindcss
- toast-ui-editor
- eslintrc
- React Router dom v6
- 모던 자바스크립티 Deep Dive
- React Private Routes
- 컴포넌트 최적화
- .env
- React
- engines locking
- LV. 2
Archives
- Today
- Total
뚜벅
모던 자바스크립트 Deep Dive - this 본문
자바스크립트 this에 대해 정리합니다.
this 정의
- 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다.
- this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서들를 참조할 수 있다.
this 사용
자바스크립트에서 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
- 전역에서 this
this는 어디서든 참조 가능하다.
그리고 전역에서의 this는 전역 객체 window를 가리킨다.
console.log(this) // window
- 일반 함수에서 this
일반 함수에서 this를 사용 시 전역 객체 window를 가리킨다.
하지만 strict mode일 경우 undefined가 바인딩된다.
메서드 내부에서 일반함수로 호출되면 this는 전역객체를 가리킨다.
ES6부터 객체 안의 함수 프로퍼티 축약형은 메서드이다. 이외에는 일반 함수이다.
function fn(){
console.log(this) // window
}
function fn2(){
'use strict'
console.log(this) // undefined
}
const obj = {
foo(){
function bar() {
console.log(this) // window
}
}
}
- 메서드에서 this
메서드 내부에서 this를 호출하면 메서드를 호출한 객체를 가리킨다.
일반 함수로 호출된 모든 함수(중첩 함수, 콜백 함수) 내부의 this는 전역 객체가 바인딩된다.
var x = 'global' // window.x = 'global'
const obj = {
x: 'local',
foo(){
console.log(this) // {x: 'local', foo: f}
console.log(this.x) // 100
// 메서드 내에서 정의한 중첩 일반함수
function bar(){
console.log(this) // window
console.log(this.x) // 'global'
}
bar()
// 콜백 함수가 일반 함수로 호출되기 때문에 this는 window를 가르킨다.
setTimeout(function(){
console.log(this) // window
console.log(this.x) // 'global'
}, 100)
},
}
obj.foo()
위의 setTimeout의 콜백함수 내부에서 this가 전역객체가 아닌 객체를 가리키려면 화살표 함수 또는 명시적으로 this 객체 전달(bind) 해주면 된다.
var x = 'global' // window.x = 'global'
const obj = {
x: 'local',
foo(){
// 콜백함수 화살표 함수로 호출
setTimeout(()=>{
console.log(this.x) // 'local'
}, 1000)
// 명시적으로 this 객체 전달
setTimeout(function(){
console.log(this.x) // 'local'
}.bind(this),1000)
},
}
obj.foo()
생성자 함수 this 호출
- 생성자 함수가 생성할 인스턴스가 바인딩된다.
function Circle(radius){
this.radius = radius
this.getDiameter = function () {
return 2 * this.radius
}
}
const circle1 = new Circle(5)
console.log(circle1.getDiameter()) // 10
'JavaScript' 카테고리의 다른 글
모던 자바스크립트 Deep Dive - Ajax (0) | 2022.12.31 |
---|---|
모던 자바스크립트 Deep Dive - 비동기 프로그래밍 (0) | 2022.12.31 |
모던 자바스크립트 Deep Dive - 객체 리터럴 (1) | 2022.12.25 |
모던 자바스크립트 Deep Dive - 실행 컨텍스트 (0) | 2022.12.11 |
모던 자바스크립트 Deep Dive - 호이스팅, var, let, const (0) | 2022.12.09 |