javascript - this에 관하여(1)

매우 오랜만에 쓰는 블로그 글입니다.(어색하네요)

 

이번에는 this에 대해 어떤 방식으로 사용되는지 써보려고 합니다.

다른 언어에서는 this가 정해진 형태로 쓰이지만 ( ex. java 등 )

javascript에서는 this가 1가지 의미로만 쓰이지 않고 위치에 따라서 다양하게 쓰입니다.

그렇기 때문에 javascript의 this에 대해서 정확하게 아는 것이 매우 힘들 수 있습니다.

그리고 this에 대해 정의하기도 매우 어려울 수도 있죠.

 

저는 이번 글에서는 this의 정의가 아닌

this가 어떤 식으로 쓰여지는지 정리하려고 합니다.
(this에 대해 좀 더 깊은 분석이 필요하다면 아마 이 글은 도움이 되지 않을 수 있습니다.)

this가 어떤 식으로 사용될 수 있는지 확인하려는 분들에게는 도움이 될 수도 있습니다.

 

 

1. 바로 this 출력해보기

먼저 javascript 코드 상에서 아래와 같이 작성해봅니다.

<script>
	console.log(this);
</script>

그리고 화면에 출력해봅니다.

이런 식으로 window 객체가 출력되는 것을 확인할 수 있습니다.

 

또 다음의 코드도 작성해 봅니다.

<script>
	function f1() {
    	console.log(this);
    }
    
    f1();
</script>

그리고 화면에 출력해 봅니다.

같은 결과가 나오는 것을 알 수 있습니다.

 

2개의 예제를 통해 알 수 있는 것은

this를 바로 출력하거나 일반 함수 안에서 바로 출력하면

window 객체가 나오는 것을 알 수 있습니다. (window 객체는 따로 설명하지 않겠습니다.)

 

1-1.

strict mode로 작성하면 다른 결과를 얻을 수 있습니다.

<script>
	'use strict';
    
    function f2() {
    	console.log(this);
    }
    
    f2();
</script>

이 코드를 실행한다면 결과는 'undefined'가 나오는 것을 알 수 있습니다.

 

이것을 통해서 strict mode를 사용한다면

일반 함수 안에서는 undefined 값을 강제로 주는 것을 알 수 있습니다.

 

 

2. object 형에서 this를 출력해보기

아래와 같은 코드를 작성해봅니다.

<script>
	let obj1 = {
    	name: "AA",
        func: function() { console.log(this); }
    }
    
    console.log(obj1.func());
</script>

그리고 화면에 출력해봅니다.

1에서 본 것과는 다른 결과가 나오는 것을 알 수 있습니다.

 

이것을 통해서

this는 object 형 안의 메소드 안에서 사용되면

'메소드를 가진 object를 출력한다'는 것을 알 수 있습니다.

 

그러면 아래의 예제는 어떤 결과가 나올까요?

<script>
    let obj2 = {
    	data: {
        	func2: function() { console.log(this); }
        }
    }
    
    console.log(obj2.data.func2());
</script>

한 번 생각해보시고 결과를 확인하시면 좋을 것 같습니다.
(결과는 따로 적지 않겠습니다.)

 

 

1 & 2 에서 알아본 내용으로 this의 쓰임새를 아래와 같이 정리할 수 있을 것 같습니다.

1. this를 바로 출력하거나 일반 함수에서 바로 출력하면 window 객체가 나온다.
2. object형 안에서 메소드를 통해 출력하면 메소드를 가진 object를 출력한다.

입니다.

 

근데 생각해보면 window도 객체이기 때문에 object형이라고 볼 수 있습니다.
(script 태그 내에서 생성하면 모든 것들은 window 객체 내에 저장됩니다.)

즉, 1의 경우 window 객체 내에서 메소드를 통해 출력했다고 볼 수 있습니다.

그러므로 this의 쓰임새를 1개로 정리할 수 있습니다.

1. object형 안의 메소드에서 사용되면 메소드를 가진 object를 출력한다.

입니다.

 

 

하지만, this의 쓰임새는 1 & 2로 끝나지 않습니다.

나머지는 다음에 작성하겠습니다.

 

 

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