자바스크립트 this

• this가 가리키는 값은 호출되는 방식에 따라 달라진다.

1. 전역 컨텍스트(코드가 전역에서 실행될때의 환경): 전역에서 함수가 호출될 때, this는 전역 객체(브라우저에서는 window)를 가리킨다. 일반적으로 브라우저에서의 전역객체는 window이며 서버(node.js)에서의 전역객체는 global이다.

console.log(this); //window
console.log(this === window); //true

2. 객체 메소드 : 객체의 메소드로 호출될 때 this는 그 메소드를 호출한 객체를 가리킨다. 메소드를 호출하면 기본적으로 this는 해당 메소드를 가지고 있는 객체에 바인딩(binding, 어떤 코드에서 함수를 호출할 때 그 해당 함수가 위치한 메모리 주소로 연결)된다.

const obj = {
    name: 'Elsa',
    greet: function() {
        console.log(this.name);
    }
};
obj.greet(); // 'Elsa' 출력

3. 생성자 함수 : 생성자 함수에서 this는 새로 생성된 객체를 가리킨다.

function Person(name) {
    this.name = name;
}
const person = new Person('Arony');
console.log(person.name); // 'Arony' 출력

4. 화살표 함수 : 화살표 함수에서는 this가 상위 스코프의 this를 그대로 사용한다. 즉, 화살표 함수 내에서 this는 자신이 정의된 위치의 this를 참조한다.

‼️단, 메소드가 화살표 함수로 작성되었을 경우 화살표 함수의 this는 상위 컨텍스트의 this를 계승받기 때문에 this가 전역객체에 바인딩된다.

const obj = {
    name: 'Charlie Puth',
    greet: function() {
        const arrow = () => console.log(this.name);
        arrow();
    }
};
obj.greet(); // 'Charlie Puth' 출력

-----

const zoo = {
  tiger: function() {
    console.log('tiger this:', this);
  },
  rabbit() {
    console.log('rabbit this:', this);
  },
  pig: () => {
    console.log('pig this:', this);
  }
}

zoo.tiger(); //object
zoo.rabbit(); //object
zoo.pig(); //window

5.이벤트 핸들러 : DOM 이벤트 핸들러에서 this는 이벤트가 발생한 요소를 가리킨다.

const button = document.querySelector('button');
button.addEventListener('click', function() {
    console.log(this); // 버튼 요소를 출력
});