this
안녕하세요 lika-7입니다
이번시간에는 this가 무엇인지 정리하겠습니다
this를 볼때마다 내 표정

this가 들어간 코드를 볼 때마다 이게 무엇인지 모르겠습니다.
이에 관련한 내용을 찾아봐도 이해하기 어렵더군요…
나름 이해하기 쉽게 정리해보겠습니다
JavaScript에서 this는
JavaScript에서 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를 상속합니다
이벤트 핸들러
//JavaScript
<button id="myButton">Click Me</button>
document.getElementById('myButton').addEventListener('click', function() {
console.log(this); // 이벤트 핸들러 함수 내에서 this는 이벤트를 발생시킨 DOM 요소를 가리킴
});
이벤트 핸들러 함수 내에서 this는 이벤트를 발생시킨 DOM요소를 가리킵니다
정리