[JavaScript] this란 무엇일까?

0후·2022년 3월 5일

프론트엔드

목록 보기

27/41

1. Window라는 Object

this를 바깥에서 쓰거나 일반 함수 안에서 쓰면 Window {}를 호출한다. 함수나 변수를 전역 공간에서 만들면 Window {}라는 Object에 보관한다. 따라서, Window {}는 JavaScript의 기본 함수들 수납공간이라고 할 수 있다. 이러한 이유로, 함수를 호출할 때 보통 함수(); 이렇게 호출하나, window.함수(); 이렇게 호출해도 똑같은 결과를 받을 수 있다.

console.log(this)
// 결과
// Window {parent: Window, opener: null, top: Window, length: 0 ...중략}

function 함수(){
	console.log(this);
}
함수();
// 결과
// Window {parent: Window, opener: null, top: Window, length: 0 ...중략}

2. undefined

스크립트 안 최상단에 'use strict' 사용하고 일반함수 내에서 this를 쓰면 undefined가 나온다

3. 그 함수를 가지고 있는 Object

Object 내 함수 안에서 this를 쓰면 그 함수를 가지고 있는 Object를 말한다.

var 오브젝트 = {
	데이터 :  'function',
	함수 : function(){
		console.log(this)
	}
}

오브젝트.함수();
// 결과
// {데이터: 'function', 함수: ƒ}

그럼 Object 내에 데이터를 중첩해서 넣는다면 어떻게 될까? 한 번 실험해보자!

var 오브젝트 = {
	데이터 : {
		함수(){
			console.log(this)
		},
      	이름 : '홍길동'
	}
}

오브젝트.데이터.함수();
// 결과
// {이름: '홍길동', 함수: ƒ}

데이터를 중첩해서 넣어도 그 함수를 가지고 있는 Object를 뱉어낸다. 자 그렇다면, 1번에서 전역 공간에서 만드는 함수는 Window라는 Object에 보관한다고 하니, 3번 this의 뜻과 결국 똑같아진다. 바로, 그 함수를 가지고 있는 Object를 뱉어내는 것이다.

4. 새로 생성되는 오브젝트(=인스턴스)

함수를 new 키워드와 함께 생성자로 사용하면 this는 새로 생긴 객체에 묶인다.

function 오브젝트생성기계(){
	this.이름 = '홍길동';
  	this.나이 = '32';
}
var 오브젝트 = new 오브젝트생성기계();
오브젝트;
// 결과
// 오브젝트생성기계 {이름: '홍길동', 나이: '32'}

5. event.currentTarget

addEventListener 함수를 사용할 때 this는 이벤트를 발사한 요소가 된다. 하단 예시를 보면 이해가 갈 것이다.

document.getElementById('버튼').addEventListener('click', function(event){
	console.log(this);
  	console.log(event.currentTarget);
});
// 결과
// <button id="버튼">버튼</button> -> this
// <button id="버튼">버튼</button> -> event.currentTarget

Case Study

forEach 함수의 callback 함수에서 this를 선언했을 경우

콜백함수란 그냥 함수 안에 들어가는 함수라고 생각하면 된다. 순차적으로 실행하고 싶을 때 쓴다고 이해하면 쉽다.

document.getElementById('버튼').addEventListener('click', function(event){
	var array = [1,2,3,4];
  	array.forEach(function(item){
    	console.log(this);
    });
});
// 결과
// Window {parent: Window, opener: null, top: Window, length: 0 ...중략} x 4

Window {}가 나오는 이유는 일반 함수에서는 Window {}를 뱉어내기 때문이다. 여기서는 1번 this로 사용됐다.

Object 내 callback 함수에서 this를 선언했을 경우

var 오브젝트 = {
	성씨: ['김', '이', '박'],
  	함수: function(){
    	오브젝트.성씨.forEach(function(){
        	console.log(this);
        })
    }
}

오브젝트.함수();
// 결과
// Window {0: Window, window: Window, self: Window, document: document, name: '' ...중략} x 3

Window {}가 나오는 이유는 일반 함수에서는 Window {}를 뱉어내기 때문이다. 여기서도 1번 this로 사용됐다. 그렇다면 한 발 더 나아가서, forEach문이 아닌 그 바깥에서 this를 선언한다면 그것의 this는 무엇일까?

var 오브젝트 = {
	성씨: ['김', '이', '박'],
  	함수: function(){
      	console.log(this);
    	오브젝트.성씨.forEach(function(){
        	// console.log(this);
        })
    }
}

오브젝트.함수();
// 결과
// {성씨: Array(3), 함수: ƒ}

Object를 출력해주는 2번 this였다. 이런식으로 this값이 함수의 위치에 따라 마구 변하기 때문에 정신차려야 한다.

전통적인 function(){} 대신 ES6에서 추가된 화살표 함수를 쓴 경우

var 오브젝트 = {
	성씨: ['김', '이', '박'],
  	함수: function(){
      	console.log(this);
    	오브젝트.성씨.forEach(() => {
        	console.log(this);
        })
    }
}

오브젝트.함수();
// 결과
// {성씨: Array(3), 함수: ƒ} x 4