[JS] this에 대해 알아보자!

 

 

평소에 저는 혼자 공부할 때 우테코 문제를 풀어보면서 공부를 진행했었는데요, 

class를 자주 사용하는 형식이다 보니 아무래도 this를 자주 쓰게 되더라구용.

문득 이런 생각이 들었습니다.

‘내가 과연 정확히 이해하고 this를 쓰고 있는 것이 맞나?’

이번 기회에 ‘this’에 대해서 같이 알아보면 좋지 않을까라는 생각에 공부를 좀 해봤습니다!

코어자바스크립트를 참고하며 정리해봤어요!!

 

안그래도 javascript언어 자체와 this에 관심이 많았고, 

‘자스를 잘하는게 아무래도 간지가 좀 나지 않습니까?’

제가 잘 설명할 수 있을지는 모르겠지만 한 번 출발해보져!

 

먼저, this란 무엇일까요?

this란 말그대로 ‘이것’이라는 뜻입니다. 

그니까 ‘이것’이 뭔데…?

“누가 나를 불렀느냐”를 뜻한다고 합니다. (비유는 블로그 참고하였음.)

 

 

자, 그럼 이제 본격적으로 “누가 나를 불렀느냐”에 따라 어떻게 this가 바인딩되는지 알아봅시다.

 

this는 크게 5가지로 나뉜다고 합니다.

1. 전역공간
2. 함수 호출
3. 메서드 호출
4. Callback 호출
5. 생성자 함수 호출

 

1번 부터 알아보죠. 

먼저, 콘솔창에 this를 찍어볼까요?

 

 

 

오우…. 막 뭐가 너무 많아요…

그러나 여기서 딱 한가지만 보시면 됩니다. 가장 첫줄에 ‘window’ 를 기억하셔야 됩니다. 

이렇게 전역 공간에서의 this는 전역 객체를 가리킨다는 것이 this의 첫 번째 개념입니다.

 

다음은 2번인 함수 호출시 this에 대해서 알아봅시다. 

 

Function a () {

function b () {

  console.log(this);

}

  b();

}

a();

 

함수 호출시에는 호출 형태만 기억하면 됩니다. a라는 함수를 호출할 때나, b라는 함수를 호출할 때나 전부 this는 전역 객체를 가리킵니다. 뭔가 이상하죠? a함수를 호출 할 때는 뭐 그러려니 하겠는데, b함수는 함수 내부에서 호출한 거니까 호출한 주체가 a라고 봐야하는 거 아닌감..??

 

그러나

 

실제로는 여기서도 전역객체가 나옵니다. 

 

이는 암기할 방법밖에 없다고 하네요…

 

es6에서는 이런 부분을 수렴해서 화살표 함수가 나왔다고 하네요.

 

3번인 메서드 호출시를 알아봅시다.

메서드는 쉽습니다. 

메서드 명의 ’ . ‘ 바로 앞에 있는 애가 this가 됩니다.

 

var a = {

b: function() {

  console.log(this);

}

}

a.b();

 

예를들어 이런 코드가 있다고 가정했을 때, 마지막 줄에 이 ‘점’ 앞에 있는 a가 바로 this가 되는 것입니다!!

 

 

4번인 콜백함수 호출시로 넘어가보죠.

콜백함수는 조금 복잡해요. 

콜백 함수에서 this의 값은 함수가 어떻게 호출되었는지에 따라 다릅니다.

예시 코드를 한 번 볼까요?

 

class Example {

    constructor() {

        this.value = 123;

    }



    method() {

        console.log(‘첫 번째 this :’, this.value); // 'this'는 Example의 인스턴스를 가리킵니다.



        // 일반 함수로 콜백을 정의합니다.

        function callbackFunction() {

            console.log(‘두 번째 this :’, this.value); // 여기서 'this'는 무엇을 가리킬까요?

        }



        callbackFunction(); 

    }

}



const instance = new Example();

instance.method(); //  ‘첫 번째 this :123’이 출력되고, 그 다음에는 undefined 또는 예상치 못한 값이 올 수 있습니다.

       

이 예제에서 method 메서드 내부의 callbackFunction은 일반 함수로 정의되어 있습니다. 이 콜백 함수가 호출될 때, 'this'는 더 이상 Example 클래스의 인스턴스를 가리키지 않습니다. 왜냐하면 일반적인 함수 호출 패턴에 의해 'this'가 전역 객체로 설정되기 때문입니다.

이를 해결하기 위해서 화살표 함수를 작성하는 방법이 있습니다.

class Example {

    constructor() {

        this.value = 123;

    }



    method() {



console.log(‘첫 번째 this :’, this.value); 



        // 화살표 함수로 콜백을 정의합니다.

        const callbackFunction = () => {

            console.log(‘두 번째 this :’, this.value); 

        };



        callbackFunction(); // ‘두 번째 this : 123'이 올바르게 출력됩니다.

    }

}



const instance = new Example();

instance.method(); //  ‘첫 번째 this :123’, ‘두 번째 this : 123’이 모두 정상적으로 출력됩니다.

 

 

 

화살표 함수를 사용함으로써, 우리는 callbackFunction 내부의 'this'가 method의 'this'와 동일한 객체, 즉 Example 클래스의 인스턴스를 가리키도록 보장할 수 있습니다.

 

마지막으로 생성자 함수 호출시 this에 대해서 알아보고 마무리 짓죠.

이 경우는 앞서 말씀드렸던 콜백함수 호출의 경우보단 조금 쉽습니다.

새로생성될 인스턴스 객체 자신이 곧 this가 됩니다.

 

예시 코드를 한 번 살펴볼게요!

 

function Person(name, age) {

  // 여기서 'this'는 새로 만들어진 빈 상자를 의미해요.

  this.name = name;  // 상자 안에 'name'이라는 정보를 넣습니다.

  this.age = age;  // 상자 안에 ‘age’라는 정보를 넣습니다.

}



// 'new'를 사용하여 우리의 ‘Person’ 틀로부터 새로운 사람을 만듭니다!

var 웹파트최고령자 = new Person(‘popeyes’, ’29’);



console.log(웹파트최고령자.name);  // 출력: popeyes

console.log(웹파트최고령자.age); // 출력: 29

 

잘 따라오셨나요??

사실 제가 작성하면서도 잘 적고 있는 것인지 의문이 듭니다…

주제를 잘 못 정한 것 같기도 하구요.

그렇지만 언젠간 배워야할 this에 대해서 공부하는 좋은 시간이었던 것 같습니다.

긴 글 읽어주셔서 감사합니다!!

 

 

출처: 코어자바스크립트