JS_기본 문법 (27)_ this 키워드

JS의 this 키워드에 대해서 알아보자. (4가지)

 

0. this 키워드의 의미

this 키워드는 다양한 의미를 가지고 있다.

그 의미는 사용하는 위치에 따라 달라진다. (사실 아닐수도..?)

 

 

1-1. global에서 사용 & 일반(전역) 함수에서 사용 -> window

먼저 가장 상위 위치에서 this 키워드를 콘솔에서 확인해보면 아래와 같다.

window라는 객체를 반환한다.

 

+) window란?

- 모든 전역변수, 함수, DOM을 관리하는 전역객체!

- 예를들어 전역변수를 생성하면 window 안에 생성되는 것이다.

 

 

1-2. strict mode일때 일반 함수 안에서 사용 -> undefined

'use strict'

'use strict'라는 키워드를 최상단에 추가하면 strict 모드로 작성할 수 있다.

 

strict 모드를 이용하면 안전하게 코드를 작성할 수 있는데

예를 들어 let 등의 키워드 없이 변수 선언 등을 방지할 수 있다.

 

해당 모드를 사용할 때 일반 함수 내부에서 this를 확인해보면

undefined라는 값을 반환한다.

 

 

 

---

2. object 내부 함수(메소드)에서 this ->  부모

객체 내부에서 this는 '부모'를 반환한다. 즉, 현재 속한 위치를 나타낸다.

 

1_메소드에서 this

객체의 메소드에서 this를 출력해보면 위와 같은 결과를 반환한다.

 

2_한단계 더?

이러한 경우에도 역시 부모를 의미하는

obj.hello를 반환하는 것을 알 수 있다.

 

다른방법 ▼

 

 

 아래의 방법도 똑같은 결과를 반환한다.

 

---

여기서 알 수 있는 사실은

window 역시 객체이므로 내부에서 this를 호출하면

그것이 속해있는 객체인 window를 반환했던 것이다.

 

따라서 아래의 함수를 호출하면 똑같은 window를 반환한다.

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

window.hello = function(){console.log(this)};

 

 

 

정리하자면,

this는 객체 내의 메소드(함수)에서 사용하면 메소드의 부모 객체를 출력한다.

 

 

---

3. constructor 안에서 this -> 생성된 인스턴스

JS에서 비슷한 여러 객체를 생성하고 싶을때 constructor를 이용한다.

 

예시

function Apple(){
  this.author = "Kassid";
}

 

이때 사용하는 this는 새로 생성될 객체(인스턴스)를 의미한다.

 

위처럼 생성된 인스턴스에 값이 저장되어 있는 것을 확인할 수 있다.

 

 

---

4. 이벤트 리스너에서 this -> e.currentTarget

요소에 등록한 이벤트 리스너에서 this는 e.currentTarget과 의미가 동일하다.

 

예시

<div class="box" style="width: 100px; height: 100px; background: #efefef;"></div>
<script>
document.getElementsByClassName("box")[0].addEventListener("click", function(e){
  console.log(this);
  console.log(e.currentTarget);
})
</script>

 

 

이처럼 두 개의 결과가 동일한 것을 알 수 있다.

 

 

---

Q1. 이벤트 리스너 안의 콜백함수에서 this -> window

 

이벤트 리스너 안의 콜백함수에서 this는 어떤 것을 반환할까?

 

예시

document.getElementsByClassName("box")[0].addEventListener("click", function(e){
  let arr = [1,2,3];
  arr.forEach(function(a){
    console.log(this);
  })
})

 

 

이처럼 window를 반환한다.

 

위에서 보았던 4가지 경우를 하나씩 따져보았을때

3번인 constructor가 아니고,

4번인 eventListener는 물론 이벤트 리스너 안에 있긴 하지만, 그 내부의 새로운 함수 내부이므로 4번도 아니다.

 

그렇다면 1, 2번의 경우인데

콜백함수는 이벤트리스너의 메소드가 아닌 그저 일반함수이므로

window를 반환하는 것이다.

 

 

Q2. 객체 내의 콜백함수에서 this -> window

 

이번에는 객체 내의 콜백함수에서 this는 어떤 값을 반환할지 알아보자.

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

 

 

역시 window를 반환한다.

그 이유는 this가 속한 함수의 위치를 확인하면 되는데 역시 일반함수이므로 그것의 부모인 window를 반환하는 것이다.

 

 

Q3. arrow function 안에서의 this

이번에는 arrow function에서 this를 알아보자.

let c = {
	func: function(){
        let a = [1];
        a.forEach(()=>{
            console.log(this);
        })
    }
}

c.func()

 

 

Q2의 결과와 다르게 이번에는  c.func를 반환한 것을 알 수 있다.

 

이는 arrow function의 특징으로,

일반함수와 다르게 독립적인 것이 아닌

해당 함수 외부의 this와 동일한 값을 반환한다.

let c = {
	func: function(){
    	console.log(this); //외부의 this
        let a = [1];
        a.forEach(()=>{
            console.log(this); //내부의 this
        })
    }
}

c.func()

 

 

 

---

지금까지 this에 대해서 알아보았다.

 

this는 그것이 위치하는 곳과 함수의 종류에 따라 달라진다는 것을 염두해두어야 한다.

따라서 꼭 필요한 것이 아니라면 명시적인 방법을 택하는 것이 더 좋은 코드가 아닐까? 하는 생각이 들었다.