javascript - this에 관하여(2)

javascript의 this에 대해 알아보는 2번째 글입니다.

(1)의 내용에 이어서 글을 작성하겠습니다.

1번째 글은 아래 링크를 참조해주세요

https://jhhan009.tistory.com/118

 

3. constructor 안에서 쓰는 this

constructor가 생성자라는 것은 알고 있을 것이라고 생각합니다.

js도 constructor를 만들어서 코딩을 진행할 수 있습니다.

아래의 코드를 작성해봅니다.

<script>
    function Person() {
    	this.name = "Kim";
        this.age = 20;
    }
    
    let ps = new Person();
    console.log(ps);
</script>

• function Person() 을 보면 기존에 봐왔던 constructor를 생각할 수 있습니다.
• 그리고 this는 function Person() 안에서 쓰이고 있습니다.
  • 여기서 this는 새로 생성되는 오브젝트(인스턴스)를 뜻합니다.
• 그리고 ps 라는 변수를 선언해서 Person 객체를 하나 만들었습니다.
  • ps라는 객체는 name과 age 변수를 가지게 될 것입니다.
• 콘솔 로그를 통해 ps를 출력해봅니다.

name : "Kim", age : 20 이라는 값을 가지는 객체가 나오는 것을 확인할 수 있습니다.

 

이렇게 constructor(생성자)를 만들어서 this를 사용한다면

this는 새로 생성되는 오브젝트(인스턴스)가 됩니다.

 

4. event listener 안에서 쓰이는 this

event listener 안에서 this를 쓰면 또 다르게 사용되는 것을 알 수 있습니다.

아래의 코드를 작성해봅니다.

<button id="button1">click</button>

<script>
    document.getElementById("button1").addEventListener("click", function (e) {
    	console.log(this);
    });
</script>

그리고 실행해본다면 click이라는 버튼이 하나 보일 것이고 그 버튼을 클릭한다면?

콘솔 창에 버튼 태그의 html 요소가 출력되는 것을 확인할 수 있습니다.

만약 console.log(this) 대신에 console.log(e.currentTarget)을 써도 동일한 결과를 얻을 수 있습니다.

즉, 이벤트 리스너 안에서 this는 e.currentTarget의 역할을 한다고 볼 수 있습니다.

e.currentTarget은 현재 이벤트가 동작하는 곳을 의미합니다.

 

4-1. 이벤트 리스너 안에서 함수를 사용하면?

4에서 작성했던 코드를 조금 변형해보겠습니다.

<button id="button1">click</button>

<script>
    document.getElementById("button1").addEventListener("click", function (e) {
    	function f1() {
            console.log(this); 
        }
        f1();
    });
</script>

• 이벤트 리스너 안에서 함수를 하나 만들었습니다.
• 그리고 바로 실행했습니다.
• 결과가 어떨까요?

바로 실행하지 말고 한 번 생각해보고 진행하면 좋을 것 같습니다.

 

지금까지 배운 this의 용법을 생각해본다면 (1,2,3,4)

일단 3(constructor)과 4(event listener)는 아닌 것 같습니다.

그러면 1 혹은 2 일텐데, 1과 2는 같은 의미라고 저번 글에서 마무리 했습니다.

그렇다면 → 이벤트 리스너 안에 있는 함수이지, 오브젝트 안의 메소드가 아닙니다.

그러면 일반함수와 다를게 없습니다.

그래서 결과는 window 객체를 출력할 것이라고 예상할 수 있습니다.
(그리고 실제로 테스트 해본다면 window 객체가 나오는 것을 확인할 수 있습니다.)

 

4-2. 오브젝트 형 안에서 콜백함수

아래의 코드를 작성해봅니다.

let obj = {
    func: function() {
    	[1,2,3].forEach(function() {
        	console.log(this);
        });
    }
}

obj.func();

실행한다면 어떤 결과가 나올까요?
(한 번 생각해 본 후 결과를 보기를 권장합니다.)

• 일단 오브젝트 안에 메소드 func가 하나 있습니다.
• 그리고 메소드 안에서 forEach를 통해서 콜백함수를 불렀습니다.
• 여기서 this는 forEach를 통해서 콜백함수 내에서 사용되고 있는 녀석입니다.
  즉, 일반함수 내에서 호출한 것을 알 수 있습니다.
• 그러므로 1번 용법이 적용됩니다.

결과는 window 객체가 3번 출력이 될 것입니다.
(결과화면은 따로 올리지 않겠습니다.)

 

여기까지 계속 보시다 보면

결국 this의 위치에 따라 결정되는 것을 알 수 있고,

this에 제일 가까운 함수 나 오브젝트를 확인해서 판단하면 된다는 것을 알 수 있습니다.

 

4-3. arrow function 사용해보기

js에서는 arrow function 이 사용되기도 합니다.

이 때에도 this의 값이 달라지는 것을 확인할 수 있습니다.

4-2 에서 사용한 코드를 조금 변형해보겠습니다.

let obj = {
    func: function() {
    	[1,2,3].forEach(() => {
        	console.log(this);
        });
    }
}

obj.func();

function() {} 대신에 () => {} 를 사용해봤습니다.

그러면 결과값은 어떻게 될까요?

오브젝트가 3번 출력되는 것을 확인할 수 있습니다.

 

이를 통해서 arrow function을 쓰면 this값을 변화하지 않고 사용할 수 도 있습니다.

만약 this를 사용해야할 일이 있다면

function이나 arrow function을 구분해서 사용해야할 것입니다.

 

 

 

정리.

this에 대해서 알아봤습니다. 이제 정리를 한 번 해보겠습니다.

1. this를 바로 출력하거나 일반 함수에서 바로 출력하면 window 객체가 나온다
2. object형 안에서 메소드를 통해 출력하면 메소드를 가진 object를 출력한다.
   1. 1 과 2는 뿌리가 같으므로 2번만 기억해도 된다.
3. constructor 안에서 사용하면 새로 생성되는 오브젝트(인스턴스)가 된다.
4. event listener 안에서 사용하면 e.currentTarget(지금 이벤트가 동작하는 곳)이 된다.
   1. 4-1. arrow function을 쓸 경우 this 값 변화를 막을 수 있다.

 

물론 js 내에서 this가 또 다른 의미로 쓰이는 경우가 있을 수도 있지만

대부분의 경우 4가지 중 1개로 사용되는 것을 알 수 있습니다.

 

 

이렇게 해서 this 용법에 대해 알아봤습니다.

1편에서 이야기한 것처럼

이 글은 this에 대해서 깊게 분석해보는 글이 아닙니다.

this 사용법을 알아서 this를 잘 사용해보자 라는 의미로 쓴 글입니다.
(그리고 저도 이 글을 쓰면서 this가 어떤 다른 방식으로 쓰이는지 배우게 되었습니다.)

 

이것으로 this에 대해 알아보는 글을 마무리 하겠습니다.

 

 

출처: 코딩애플 - 쉽게 이해하는 JavaScript 객체지향 & ES6 신문법