- Published on
자바스크립트 this에 대하여
- Authors
- Name
- piano cat
this는 현재 실행 컨텍스트에 따라 다르게 바인딩되며, 그 컨텍스트는 함수 호출 패턴에 따라 달라집니다.
- 전역 컨텍스트 또는 함수 호출:
this는 전역 객체를 참조합니다. 브라우저에서는window객체가 됩니다.
console.log(this) // window
function test() {
console.log(this) // window
}
test()
- 메소드 호출:
this는 해당 메소드를 호출하는 객체를 참조합니다.
var obj = {
test: function () {
console.log(this) // obj
},
}
obj.test()
- 생성자 함수 호출:
this는 새롭게 생성된 객체를 참조합니다.
function Test() {
console.log(this) // Test {}
}
new Test()
apply또는call메서드를 통한 함수 호출: 첫 번째 인수로 전달된 객체를this로 바인딩합니다.
function test() {
console.log(this) // { a: 1 }
}
test.apply({ a: 1 })
- 화살표 함수: 화살표 함수에서
this는 해당 함수가 선언된 렉시컬 컨텍스트를 참조합니다.
var obj = {
test: function () {
setTimeout(() => {
console.log(this) // obj
}, 1000)
},
}
obj.test()
이렇게 this는 자바스크립트에서 다양하게 활용되며, 함수의 호출 방식에 따라 그 참조 대상이 달라집니다.