this 키워드

자바스크립트 자주 볼 수 있는 this 키워드에 대해서 알아보자

 

 

<script> 에서 this 키워드를 출력해보면 window{...} 라는 것이 출력된다. 

 

 

또한 일반 함수 내에서 this 키워드를 출력해보면

일반함수에서 this 출력 결과

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

f();

 

여기서 Window 란 무엇일까?

 

 

 

 

Window 란?

 

 

Window 는 모든 전역변수, 함수, DOM 을 보관하고 관리하는 전역 객체이다. 

 

우리가 흔히 사용하는 document.getElementById(), alert(), console.log() 

 

이러한 함수들을 보관하는 보관소이다.

 

이 보관소는 하나의 큰 {오브젝트} 라고 생각하면 된다. 

 

또한 코드를 짜며 전역변수들을 만들었을 때도 이 변수들을 window에 보관해준다. 

 

 

 

 

 

 

strict mode 일 때 함수 안에서 사용 

 

 

"use strict";

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

f();

 

IE 10 버전 이상에서 'use strict' 를 상단에 추가하면 strict mode 로 자바스크립트 작성이 가능하다. 

 

strict mode 에서는 var 키워드 없이 변수를 선언하거나, 

 

변수를 argument 키워드로 선언하거나 하는 실수를 방지해준다. 

 

또한 strict mode 에선 this 키워드를 일반함수 안에서 불렀을 때 undefined 라는 값으로 지정해준다. 

 

 

 

 

 

 

object 자료형 내 함수에서의 this 키워드

 

 

object 자료형 안에 함수를 집어넣었을 때 

 

var object1 ={
        data : 'Kosh',
        f1 : function(){console.log(this)}
      }

object 내 함수에서 this 출력

 

f1 함수를 실행하게되면 this에 object1 이 담기게된다. 

 

따라서 메소드 안에서 this를 사용하면 this는 메소드를 가지고 있는 오브젝트를 뜻한다. 

 

 

 

 

this 는 결국 상위 오브젝트를 뜻한다!

 

 

첫번째로 살펴보았던 일반 함수에서의 this 출력은 window를 지칭하였다. 

 

window도 결국 일반 함수의 상위 object 이므로 window 오브젝트에 담겨있는 function에서 this를 출력해보면 window가 출력되는 것이다. 

 

따라서 this 키워드는 해당 function 이나 method 가 담겨있는 object 를 뜻한다. 

 

 

 

 

 

 

 

 

constructor 안에서 사용하면 constructor 로 새로 생성되는 오브젝트를 뜻함

 

 

자바스크립트에서 Obeject 를 여러개 만들고 싶을 때 constructor (생성자) 를 사용한다. 

 

function f() {
      this.name = "Kosh";
    }
    
    var obj = new f();

 

this 는 함수로부터 새로 생성될 오브젝트들을 의미한다. 

 

위와같이 new 키워드를 사용하면 새로운 오브젝트를 만들 수 있다. 

 

obj 는 {name : "Kosh"} 라는 값을 가진다. 

 

 

 

 

 

 

이벤트리스너 안의 콜백함수에서의 this

 

 

document.querySelector("#btn").addEventListener("click", function () {
      console.log(this);
      var array = [1, 2, 3];
      array.forEach(function () {
        console.log(this);
      });
    });

 

이벤트리스너 안에서 forEach() 반복문을 사용하고, 

 

forEach 반복문의 콜백함수 안에서 this를 출력해보았다. 

 

이러한 경우 window 가 출력되는 것을 볼 수 있다. 

 

그리고 이벤트리스너의 콜백함수에서는 button 태그가 출력되는 것을 확인할 수 있다. 

 

 

 

 

 

object 안의 콜백함수에서의 this

 

 

var obj = {
      names: ["kim", "park", "ko"],
      f: function () {
        obj.names.forEach(function () {
          console.log(this);
        });
      },
    };

obj 안의 f 함수 출력 결과

 

obj 라는 오브젝트 안에서 array 와 함수를 저장했다. 

 

위와같이 오브젝트 안에서 콜백함수 안에 있는 this 는 window가 출력되는 것을 볼 수 있다. 

 

 

 

 

따라서 this 는 function을 만날 때마다 바뀌기 때문에 내가 원하는 this 값 설정이 쉽지 않다.

 

그럴 경우 arrow function 을 사용해주면 문제를 해결할 수 있다. 

 

 

var obj = {
      names: ["kim", "park", "ko"],
      f: function () {
        obj.names.forEach(() => {
          console.log(this);
        });
      },
    };

arrow function 이용했을 때 this 결과

 

arrow function을 이용했을 때 위와같이 window 가 아닌 f 가 속한 obj 가 잘 출력된 것을 확인할 수 있다.

 

arrow function 은 함수 내부의 this 값을 바꾸지 않고 코드 바로 위에서 사용했던 this 값을 가져오기 때문에

 

여러 제약들에서 자유로울 수 있다.