this

@2023/09/18

안녕하세요 lika-7입니다

이번시간에는 this가 무엇인지 정리하겠습니다

this를 볼때마다 내 표정

this가 들어간 코드를 볼 때마다 이게 무엇인지 모르겠습니다.

이에 관련한 내용을 찾아봐도 이해하기 어렵더군요…

나름 이해하기 쉽게 정리해보겠습니다

JavaScript에서 this는

JavaScript에서 this는 현재 실행중인 코드에서 참조하는 객체를 나타냅니다.

this는 다양한 상황에서 동적으로 결정되어 다른 값을 가질 수 있습니다

💡

this 값은 호출한 코드 블럭 또는 함수와 호출 컨텍스트에 의존합니다.

전역 컨텍스트(Global Context)에서 this

컨텍스트란

💡

실행 컨택스트란 코드가 실행되는 환경으로 이해 할 수 있습니다

//JavaScript

console.log("전역 컨텍스트입니다.");

function func1(){
	console.log("func1 컨텍스트 입니다.");
}

function func2(){
    func1();
    console.log("func2 컨텍스트 입니다.");
}
func2();

console.log("전역 컨텍스트입니다."); 가 실행되는 부분은 전역 컨택스트 부분 입니다

console.log("func1 컨텍스트 입니다."); 가 실행되는 부분은 func1 함수의 컨택스트 부분 입니다

console.log("func2 컨텍스트 입니다."); 가 실행되는 부분은 func2 함수의 컨택스트 부분 입니다

전역 컨텍스트(Global Context)에서 this

//JavaScript

console.log(this); // 전역 컨텍스트에서 this는 전역 객체를 가리킴 (브라우저에서는 window)

전역 컨텍스트에서 실행되는 코드에서 this는 전역 객체를 가리킵니다.

브라우저 환경에서는 전역 객체가 window이고 node.js 환경에서는 global 입니다.

함수 내부

함수 내부에서 this는 호출 방법에 따라 달라집니다

✅

우리의 머리를 아프게 하는 주 내용입니다

일반 함수 호출

//JavaScript

function sayHello() {
    console.log(this);
}

sayHello(); // 일반 함수 호출 시 this는 전역 객체를 가리킴 (브라우저에서는 window, node.js 환경에서는 global)

함수가 일반적으로 호출되면 this는 전역 객체(브라우저 환경에서는 window, node.js 환경에서는 global)를 가리킵니다

메서드 호출

//JavaScript

const person = {
    name: 'John',
    greet: function() {
        console.log(this.name);
    }
};

person.greet(); // 메서드 내부에서 this는 해당 객체를 가리킴(person)

객체의 메서드 내부에서 this는 해당 메서드를 호출한 객체를 가리킵니다

생성자 함수

//JavaScript

function Person(el) {
    this.name = el;
}

const john = new Person('John');
console.log(john.name); // 생성자 함수 내부에서 this는 생성된 인스턴스를 가리킴

생성자 함수 내부에서 this 는 새로 생성된 인스턴스를 가리킵니다

화살표 함수

//JavaScript

const obj = {
    name: 'John',
    sayHello: () => {
        console.log(this.name); // 화살표 함수에서 this는 외부 스코프의 this를 상속 (일반적으로 전역 객체)
    }
};

obj.sayHello();

화살표 함수 내부에서 this는 화살표 함수를 둘러 싸는 함수 또는 스코프의 this를 상속합니다

✅

필자는 객체의 범위도 스코프의 범위로 착각하였습니다 지역 스코프의 범위는 실행하는 함수의 범위 입니다 위의 예시에서 sayHello: ( ) => { } 함수는 감싸고 있는 함수가 없기에 undefined를 반환합니다

이벤트 핸들러

//JavaScript

<button id="myButton">Click Me</button>

document.getElementById('myButton').addEventListener('click', function() {
    console.log(this); // 이벤트 핸들러 함수 내에서 this는 이벤트를 발생시킨 DOM 요소를 가리킴
});

이벤트 핸들러 함수 내에서 this는 이벤트를 발생시킨 DOM요소를 가리킵니다

정리

💡

this 값은 선언이 아닌 호출에 따라 가리키는 내용이 달라집니다