this

this는 5가지의 경우에 따라 의미가 다르다.

1. 일반 함수에서의 this

2. 오브젝트 내의 메소드에서의 this

3. 생성자에서의 this

4. 이벤트리스너 안에서의 this

5. 화살표 함수에서의 this

1. 일반 함수에서의 this

widow객체를 가리킨다.

function(){
    this // window객체
}

2. 오브젝트 내의 메소드에서의 this

오브젝트를 가리킨다.

const obj = {
    name: 'test',
    print() {
        console.log(this.name);
    },
    test: function () {
        console.log(this.name);
    },

    arrow: () => {
        console.log(this);
        console.log(this.name);
    },
};

obj.print(); //test
obj.test(); //test
obj.arrow(); //{} undefined

3. 생성자에서의 this

생성자로 생성되는 오브젝트를 가리킴

function dog(name) {
    this.name = name;
}
const pet = new dog('hi');
console.log(pet.name); // hi

4. 이벤트리스너 안에서의 this

콜백함수 내부에서의 this는 해당 콜백함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우에는 전역객체를 참조한다.

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

//일반 함수형을 콜백으로 한 경우
button.addEventListener('click', function () {
    this; // 이벤트를 수신하는 객체 여기선 button을 가리킨다.
});

this가 addEventListener 내부에서 이벤트 수신을 받는 객체로 정의되었기에 button을 가리키는 것이다.(위 콜백에서의 this 원리에 따를때,일반 함수에서 this는 window를 가리키게 되있으므로)

//화살표 함수를 콜백으로 한 경우
button.addEventListener('click', () => {
    this; // window 참조
});

화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다. <=출처 : 딥다이브 블로그

화살표 함수에선 this를 변경할 수 없기에 무조건 상위 스코프를 따르게 되므로 여기서 this는 window를 가리키는 것이다

5. 화살표함수에서의 this

함수 자체의 this 바인딩을 갖지 않고, 스코프 체인을 통해 상위 스코프의 this를 참조한다는 점
즉 화살표 밖의 this를 참조한다.

즉 function을 만날 때 마다 this값이 변경되지 않는다.

함수 내부의 this값을 새로 바꿔주지 않기 때문

const obj = {
    //현재 여기서 this는 객체를 가리킴
    name: 'test',
    test() {
        setTimeout(function () {
            console.log(this.name);
        }); // this가 window를 가리키므로 undefined
    },
    arrow() {
        setTimeout(() => {
            console.log(this.name); // this값이 바뀌지 않기 때문에 객체를 가리키므로 "test"
        }, 1000);
    },
};