[JS] What Is this? _ 2 편 ( constructor, e.currentTarget 역할의 This)

3. Construntor로 생성되는 Object를 나타내는 this

 

this의 세번째 용법에 앞서  construnctor가 무엇인지 알아보자.

 

constructor란 클래스를 통해 객체가 생성되고 초기화될 때 자동으로 호출되는 메서드다.

즉, constructor는 클래스의 인스턴스를 생성하고 클래스 속성을 설정하는 역할을 힌다.

 

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

let myCar = new Car("Kia");
console.log(myCar.carname); // "Kia"

 

위의 코드에서 constructor 메서드는 Car 클래스의 인스턴스를 생성할 때 호출되며, 이 메소드는 brand 인수를 받아 이를 사용하여 carname 속성을 설정한다.

new Car("Kia")를 통해 Car 클래스의 새 인스턴스를 생성하면, constructor가 호출되고 this.carname이 "Kia"로 설정된다.

 

그렇다면 this.carname =  brand에서 this는 무엇을 의미하는 걸까?

여기서 this는 consturctor로 만들어진 새로운 object를 의미한다.

Car라는 클래스의 carname이라는 key 값을 넣어 달라는 의미라고 보면 될 것같다.

 

 

4.  e.currentTarget을 나타내는 this

JavaScript에서 addEventListener 메소드는 이벤트를 처리할 함수를 등록하는데 사용된다.

이 함수에서 this 키워드는 이벤트를 발생시킨 HTML 요소를 참조한다.

 

let button = document.querySelector('button');

button.addEventListener('click', function() {
  console.log(this); // 'this'는 클릭된 버튼 요소를 참조
});

 

이 예제에서 this는 클릭된 버튼 요소를 참조한다.

이런 방식으로 이벤트 핸들러 내에서 this를 사용하면, 이벤트가 발생한 요소에 대한 참조를 얻을 수 있다.

 

하지만 화살표 함수를 이벤트 핸들러로 사용하면 this의 동작 방식이 달라진다.

화살표 함수에서 this는 항상 상위 범위의 this를 가리킵니다. 즉, 이벤트 핸들러가 속한 객체나 클래스를 가리킨다.

이렇게 하면 이벤트 핸들러 함수가 호출되는 컨텍스트에 관계없이 this의 값이 일정하게 유지된다.

이 점은 특히 클래스 메소드에서 이벤트 핸들러를 사용할 때 유용할 수 있다.

 

var obj = {
  name : ['Kim', 'Lee', 'Park'];
  func : function(){
      obj.name.forEach(() => {
        console.log(this) //
      });
  }
}

위 코드에서 this는 obj 객체를 가리키게 된다.

화살표 함수 내부에서 this는 함수 메소드의 this를 가리키고, 이 메소드는 obj 객체에 바인딩되어 있다.

 

이렇게 화살표 함수는 this를 자신이 작성된 범위에서 상속받는 것을 'lexical this'라고 한다.