[JAVASCRIPT] this가 가리키는 객체 (메서드, 함수, 화살표 함수에서)

JAVASCRIPT

---

this

1. 전역 컨텍스트에서의 this

전역 컨텍스트에서의 this는 전역 객체를 참조합니다. 전역 객체란 node 환경에서는 global 객체, 브라우저에서는 window 객체입니다.

 

2. 함수 안에서의 this

여기서도 여전히 전역 객체를 참조합니다. 함수 블록 안이라고 해서 컨텍스트가 좁혀지지 않습니다.

function someFunc() {
    console.log(this)
}

someFunc();
// Window {0: Window, window: Window, self: Window, document: document, name: "", location: Location, …}

 

단, 엄격모드(use strict)에서는 함수 안에서의 this가 undefined입니다.

'use strict';
function someFunc() {
    console.log(this)
}

someFunc();
// undefined

 

2. 메서드 안에서의 this

함수와 메서드의 차이부터 알아보겠습니다.

함수는 특정 기능을 수행하는 독립된 코드블록을 의미합니다. function이나 화살표 함수등입니다.

 

메서드는 함수의 하위 개념입니다. 객체의 프로퍼티(property)에 함수가 할당될 때 그 함수를 메서드라고 합니다.

 

메서드의 예시 - doSomething은 객체 obj의 메서드입니다.

const obj = {
    name: "John",
    doSomething: function() {
        console.log('hello')
    }
}

 

메서드 안에서의 this - 객체의 메서드에서 this를 호출하면 this는 그 객체를 참조하게 됩니다.

const obj = {
    name: "John",
    doSomething: function() {
        console.log(this.name)
    }
}

obj.doSomething() // John

 

3. 개별적으로 선언한 함수를 객체의 메서드로 설정한 경우

function sayName() {
    console.log(this.name)
}

const obj = {
    name: "John",
    doSomething: sayName
}

const obj2 = {
    name: "Chris",
    doSomething: sayName
}

obj.doSomething(); // John
obj2.doSomething(); // Chris

 

sayName 함수를 선언하고 두 객체의 메서드로 각각 전달하였습니다. 여기서 두 개의 메서드에서의 this는 각각 obj1과 obj2를 참조합니다.

 

외부 함수 sayName만 보면 위의 첫 번째로 살펴본 내용(1. 함수 안에서의 this)과 같이 this가 전역 객체를 참조할 것 같지만, 자바스크립트의 this는 런타임 시점에서 결정되기 때문에 메서드로 할당되는 순간 해당 객체를 참조하게 됩니다.

 

4. 화살표 함수에서의 this

객체의 메서드로 화살표 함수를 전달하면 this는 그 객체를 참조하지 않고 상위 컨텍스트로 넘어갑니다.

const obj = {
    name: "John",
    doSomething: () => {
        console.log(this)
    }
}

obj.doSomething()
//Window {window: Window, self: Window, document: document, name: "", location: Location, …}

 

따라서 예시에서처럼 객체 외부의 컨텍스트를 그대로 이용하고 싶은 경우에는 화살표 함수를 사용할 수 있습니다.

---

MDN document - this

this - JavaScript | MDN