Wecode -기업협업 인턴 (부트캠프)/기업협업 독학, 공부

this. 문법 알려줘. 이거는 javascript야 **

JBS 12 2023. 11. 1. 21:32

"this"는 JavaScript에서 매우 중요한 개념 중 하나로, 현재 실행 중인 함수 또는 메소드 내에서 어떤 객체를 참조하는 데 사용됩니다. "this"는 함수나 메소드가 어떻게 호출되는지에 따라 다양한 값을 가질 수 있습니다. 주로 다음과 같은 경우에 사용됩니다:

 


전역 범위에서의 this: 전역 범위에서 "this"를 사용하면 전역 객체를 참조합니다. 웹 브라우저 환경에서는 "window" 객체를 참조하며, Node.js 환경에서는 "global" 객체를 참조합니다.

 

console.log(this); // 전역 범위에서 this를 사용하면 전역 객체를 참조


 

객체 메소드에서의 this: 객체의 메소드 내에서 "this"를 사용하면 해당 메소드를 호출한 객체를 참조합니다.

 

const person = {
  name: "John",
  sayHello: function() {
    console.log("Hello, " + this.name);
  }
};

person.sayHello(); // "this"는 person 객체를 참조하므로 "John"을 출력


생성자 함수에서의 this: 생성자 함수 내에서 "this"를 사용하면 새로운 객체를 참조합니다. 생성자 함수는 클래스와 객체 생성에 사용됩니다.

 

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

const person1 = new Person("Alice");
console.log(person1.name); // "Alice"


이벤트 핸들러에서의 this: 이벤트 핸들러 함수 내에서 "this"는 이벤트를 발생시킨 DOM 요소를 참조합니다.

 

document.getElementById("myButton").addEventListener("click", function() {
  console.log(this); // "this"는 이벤트를 발생시킨 버튼 요소를 참조
});

 

"this"의 값은 실행 컨텍스트에 따라 변할 수 있으므로 주의가 필요합니다. 함수를 호출하는 방식, 객체와 메소드 간의 관계, 그리고 함수가 어떻게 정의되었느냐에 따라 "this"의 동작이 달라질 수 있습니다. 함수 내에서 "this"의 값을 명시적으로 설정하려면 bind, call, 또는 apply 메소드를 사용할 수 있습니다.