8. this | Notion

Index

7. this

7.1 this 란?

this는 객체를 가리키는 참조 변수입니다. this는 호출되는 위치에 따라 다른 값을 출력하기 때문에 우리에게 혼란을 줍니다.

아래 예제에서 this는 위의 경우에는 window, 아래의 경우에는 myObj입니다. 분명 같은 기능을 하고 있는데 말이죠.

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

let myObj = {
    val1: 100,
    func1: function () {
        console.log(this);
    }
}

myObj.func1();

<aside> 🧐 window 객체 브라우저 환경의 전역공간을 의미합니다. Node.js 환경에서의 전역공간은 global 이란 이름을 가집니다.

function b(){
    console.log('hello world')
}
b()
window.b()

</aside>

<aside> 🧐 어떤 객체의 메소드가 아닌 단독 호출되는 함수의 this는 전역공간을 참조하게됩니다.

</aside>

그러면 이렇게 하면 어떨까요? 아래의 경우에도 this가 달라집니다. 함수를 호출한 객체가 달라졌기 때문이죠!

let myObj = {
    val1: 100,
    func1: function () {
        console.log(this);
    }
}

let test = myObj.func1;
test()

버튼으로 만들어보겠습니다. 이번에는 this가 버튼이 되었습니다. 햇갈리시죠? 뒤에서 배우는 bind로 이 값을 고정시킬 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title></title>
    </head>
    <body>
        <button id="btn1">클릭해봐요!</button>
        <button id="btn2">클릭해봐요!</button>
        <script>
            let myObj = {
                val1: 100,
                func1: function () {
                    console.log(this);
                },
            };

            let test = myObj.func1;

            let button1 = document.getElementById("btn1");
            button1.addEventListener("click", myObj.func1);
            let button2 = document.getElementById("btn2");
            button2.addEventListener("click", test);
        </script>
    </body>
</html>

다른 예를 들어보도록 하겠습니다. 아래 예시에서 this 가 가르키는것이 무엇인지 잘 살펴보세요!