[JavaScript] this | 전역, 함수호출, 객체, 생성자함수, 이벤트핸들러

전역 컨텍스트에서의 this

전역 컨텍스트에서 'this'는 전역 객체를 참조한다. 웹 브라우저에서 전역 객체는 'window' 객체이고, Node.js에서는 'global' 객체이다.

*컨텍스트(context): 프로그래밍에서 언어의 일부가 작동하는 맥락이나 범위를 나타냄

console.log(this); // window (브라우저) 또는 global (Node.js)

 

 

 

 

일반 함수 호출에서의 this

일반적인 함수 호출에서 'this'는 기본적으로 전역 객체를 참조한다. 그러나 strict mode를 사용할 경우 'this'는 undefined를 참조한다.

* strict mode: 코드 실행 환경으로, 기존의 자바스크립트 구문 및 동작에 대한 제한을 추가하여 코드의 안정성과 성능을 높이는 데 도움

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

example(); // window (브라우저) 또는 global (Node.js)

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

strictExample(); // undefined

 

 

 

 

객체 메소드에서의 this

객체 내부의 메소드를 호출할 때 'this'는 해당 메소드를 호출한 객체를 참조한다.

const obj = {
  name: 'John',
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};

obj.greet(); // 'Hello, my name is John'

 

 

반응형

 

생성자 함수에서의 this

생성자 함수를 사용하여 새 객체를 생성할 때 'this'는 새로 생성된 객체를 참조한다.

function Person(name) {
  this.name = name;
  this.greet = function () {
    console.log(`Hello, my name is ${this.name}`);
  };
}

const john = new Person('John');
john.greet(); // 'Hello, my name is John'

 

 

 

 

이벤트 핸들러에서의 this

DOM 이벤트 핸들러에서 'this'는 이벤트가 발생한 HTML 요소를 참조한다.

<button id="myButton">Click me</button>
<script>
  const myButton = document.getElementById('myButton');
  myButton.addEventListener('click', function () {
    console.log(this); // 이벤트가 발생한 <button> 요소
  });
</script>