this
JAVASCRIPT
해당 포스팅에서는 this 에 대해 다룹니다.
JAVASCRIPT
- 자바스크립트 장단점
- 데이터 타입
- 데이터 형 변환
- 불변성을 유지하려면 어떻게..
- 프로토타입
- var, let, const 차이
- 호이스팅(Hoisting)
- es6 문법 특징과 차이
- this ✔️
- 제이쿼리 메서드 중 attr(), prop() 차이
- 화살표 함수와 일반 함수 차이
- 스코프(scope)
- 객체 지향
- 클로저(closure)
- 타입스크립트
- 프로세스
- 스레드, 싱글 스레드
- 콜백 함수 / 재귀 함수 차이
- 콜백 지옥, 콜백 지옥을 해결하는 방법
- promise / 콜백 지옥
- ajax
- 함수 선언식/ 표현식 차이
- 이벤트 버블링 / 이벤트 캡처 예시
- 이벤트 위임 (Event Delegation)
- 렉시컬 환경
- 프로퍼티
- stack이 코드 실행할 때 queue에 미뤄두는 것
- 얕은 복사 / 깊은 복사
- 동기 / 비동기
this
해당 포스팅에서는 자바스크립트의 this 에 대해 다룹니다.
this의 개념
this는 자바스크립트에서 함수가 호출될 때 결정되는 특별한 키워드입니다. 또한 this가 가리키는 값은 함수가 어떻게 호출되었는지에 따라 달라집니다. this는 런타임에 바인딩되며, 함수 호출 패턴에 따라 다르게 설정됩니다. 자바스크립트에서는 함수 호출 방식에 따라 this의 값이 달라지기 떄문에 이해하는 것이 중요 합니다.
this의 동작
일반 함수 호출
함수가 전역 컨텍스트에서 호출될 때, this는 전역 객체 를 가리킵니다. 브라우저 환경에서는 전역 객체가 window가 되며, Node.js에서는 global객체가 됩니다.
1
2
3
4
function showThis() {
console.log(this);
}
showThis(); // 브라우저에서는 window, Node.js에서는 global
메서드 호출
객체의 메서드로 호출될 때, this는 해당 메서드를 호출한 객체를 가리킵니다.
1
2
3
4
5
6
7
const obj = {
value: 42,
showThis: function() {
console.log(this);
}
};
obj.showThis(); // obj 객체
생성자 함수 호출
new 키워드를 사용하여 생성자 함수를 호출하면, this는 새로 생성된 객체 를 가리킵니다.
1
2
3
4
5
function Person(name) {
this.name = name;
}
const person1 = new Person('Alice');
console.log(person1.name); // Alice
__ call, apply, bind 메서드를 이용한 호출__
call과 apply메서드 를 사용하면, this를 명시적으로 설정 할 수 있습니다. bind메서드는 this값을 영구적으로 바인딩한 새로운 함수를 반환합니다.
1
2
3
4
5
6
7
8
9
10
function showThis() {
console.log(this);
}
const obj = { value: 42 };
showThis.call(obj); // obj
showThis.apply(obj); // obj
const boundShowThis = showThis.bind(obj);
boundShowThis(); // obj
화살표 함수
화살표 함수는 this바인딩이 정적으로 결정 됩니다. 화살표 함수의 this는 함수가 선언된 위치의 상위 스코프 의 this를 가리킵니다.
1
2
3
4
5
6
7
8
9
10
const obj = {
value: 42,
showThis: function() {
const inner = () => {
console.log(this);
};
inner();
}
};
obj.showThis(); // obj
this의 사용예시
객체 메서드에서의 this
객체의 메서드 에서 this는 해당 메서드를 호출한 객체를 가리킵니다. 이를 통해 객체의 속성에 접근하거나 메서드를 호출할 수 있습니다.
1
2
3
4
5
6
7
const car = {
model: 'Tesla',
drive: function() {
console.log(`${this.model} is driving.`);
}
};
car.drive(); // Tesla is driving.
생성자 함수에서의 this
생성자 함수에서 this는 새로 생성된 객체 를 가리키며, 생성자 함수 내부에서 해당 객체의 속성을 정의 할 수 있습니다.
1
2
3
4
5
function Car(model) {
this.model = model;
}
const myCar = new Car('Toyota');
console.log(myCar.model); // Toyota
이벤트 핸들러에서의 this
DOM 이벤트 핸들러 에서 this는 이벤트가 발생한 요소 를 가리킵니다.
1
2
3
document.querySelector('button').addEventListener('click', function() {
console.log(this); // 클릭된 버튼 요소
});
__ 콜백 함수에서의 this__
콜백 함수 에서의 this는 함수가 호출된 컨텍스트에 따라 달라집니다. 주로 this가 기대한 값과 다를 수 있으므로, bind나 화살표 함수를 사용하여 해결 할 수 있습니다.
1
2
3
4
5
6
7
8
function Timer() {
this.seconds = 0;
setInterval(function() {
this.seconds++;
console.log(this.seconds);
}.bind(this), 1000);
}
const timer = new Timer();
this와 관련된 주의사항
엄격 모드 (Strict Mode)
엄격 모드에서는 this가 전역 객체로 설정되지 않습니다. 일반 함수 호출에서 this는 undefind 가 됩니다.
1
2
3
4
5
'use strict';
function showThis() {
console.log(this);
}
showThis(); // undefined
메서드와 화살표 함수의 혼용
화살표 함수는 this를 상위 스코프에 바인딩 하므로, 객체 메서드로 사용될 때 주의가 필요합니다.
1
2
3
4
5
6
7
const obj = {
value: 42,
showThis: () => {
console.log(this);
}
};
obj.showThis(); // undefined (전역 객체를 가리킴)
마무리 정리
this는 자바스크립트의 동적 바인딩 특성을 이해하는데 중요한 역할 을 합니다. 함수 호출 방식에 따라 this가 가리키는 대상이 달라지므로, 이를 정확히 이해하고 사용하는 것이 중요합니다. 자바스크립트에서 this의 동작 방식을 잘 이해하면, 코드를 보다 효과적으로 작성하고 디버깅할 수 있습니다!