Input + Output = True
Javascript] 자바스크립트 this 본문
😎Javascript] 자바스크립트 this
this는 함수 호출 방식에 의해 결정된다.
✅ this 란?
this는 함수 호출 방식에 의해 결정된다.
자바스크립트에서 this는 기본적으로는 전역객체(브라우저에서는 window)이다.
this를 찍어보자.
this // Window {...}함수의 this는 어떨까?
function a() {
console.log(this)
}
a() // Window {...}
이처럼 일반 함수내의 this는 window를 가리킨다. (strict 모드일 경우는 undefined이다.)
그렇다면 this가 window가 아닌 경우는 무엇이 있을까?
✅ 객체 메서드의 this
const obj = {
a: function() {
console.log(this)
}
}
obj.a() // obj
// a: ƒ ()
// [[Prototype]] : Object객체 메서드 a안의 this는 객체 obj를 가리킨다.
이것은 객체의 메서드를 호출할 때 this를 내부적으로 바꿔주기 때문이다.
아래의 경우는 또 달라진다.
const a2 = obj.a
a2() // Window {...}a2는 obj.a를 꺼내온 것이기 때문에 더 이상 obj의 메서드가 아니고
변수에 담긴 그냥 일반함수이다.
"일반 함수내의 this는 window를 가리킨다"라고 얘기했던 것처럼
이러한 이유로 a2의 this는 obj가 아닌 window를 가리키게 되는 것이다.
✅ this 바인딩 bind, call, apply
const a2 = obj.a
a2.bind(obj)() // obj > bind는 '반환'함수이기 때문에 호출을 위해 ()를 추가 사용했다
a2.call(obj) // obj
a2.apply(obj) // obj명시적으로 this를 바꾸는 (바인딩이라고 표현한다)
함수 메서드 bind, call, apply를 사용해서 this가 객체를 가리키도록 할 수 있다.
✅ 생성자 함수
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.hi = function() {
console.log(this.name, this.age);
}
이러한 생성자 함수가 있을 경우
new를 사용하지 않고 호출하게 된다면 어떨까?
Person('IOTrue', 99)
console.log(window.name, window.age) // IOTrue 99
일반 함수에서 this는 window를 가리킨다고 했던 것처럼
이러한 경우에도 this는 window를 가리킨다.
이러한 동작을 방지하기 위해 new를 사용해야 한다.
const human = new Person('human', 100) // Person {name: "human", age: 100}
human.hi() // human 100new를 사용하면 this는 생성자를 통해 생성된 인스턴스가 된다.
인스턴스 : 생성자 함수를 통해 생성된 객체를 의미한다.
✅ 이벤트의 this
자바스크립트 이벤트 (onClick 등)내에서의 this는 조금 다르게 동작한다.
document.body.onclick = function() {
console.log(this) // <body>
}window가 아니라 body를 가리킨다.
이것은 자바스크립트 이벤트 함수가 생성되면서 this를 자동으로 바꾸기 때문이다.
$('div').on('click', function() {
console.log(this) // div
function inner() {
console.log('inner', this) // inner Window
}
inner()
})하지만 이벤트 함수 내의 일반 함수 inner의 this는 window를 가리킨다.
"일반 함수내의 this는 window를 가리킨다"가 적용되는 것이다.
그래서 개발자가 의도한대로 this를 사용하기 위해서는 다음과 같은 방법이 있다.
$('div').on('click', function() {
console.log(this) // div
const that = this
function inner() {
console.log('inner', that); // inner div
}
inner()
})this를 변수에 저장해서 사용하거나
$('div').on('click', function() {
console.log(this) // div
const inner = () => {
console.log('inner', this) // inner div
}
inner()
})ES6 문법 화살표 함수를 사용한다.
화살표 함수는 this가 window가 아니라 상위 함수의 this를 가리킨다.
❗ 정리
자바스크립트의 this는 기본적으로 window를 가리키게 되어 있으며
개발자가 의도한대로 this를 사용하기 위해서는
예시를 통해 살펴본 것처럼 상황에 맞는 방법들을 사용해야 한다.
참고
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-this-%EC%B4%9D%EC%A0%95%EB%A6%AC
https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb
'🎨FrontEnd > Javascript' 카테고리의 다른 글
| 자바스크립트 메모리 구조 - 콜 스택, 메모리 힙 (0) | 2023.07.16 |
|---|---|
| Javascript] 스코프(스코프, 스코프체인, 렉시컬 스코프) (0) | 2023.05.10 |
| parameter와 argument의 차이 (0) | 2023.03.28 |
| 자바스크립트 호이스팅과 TDZ (0) | 2023.03.28 |
| 자바스크립트 Promise async await 설명 및 예제 (0) | 2023.03.21 |
