[JS & ES6 신문법 학습]this키워드 2

김범기·2024년 7월 10일

JAVASCRIPT

목록 보기

2/38

또 this

또 다른 this의 뜻
기계 안에서 쓰면 새로 생성되는 오브젝트를 뜻함

여기서 기계는 constructor를 말하고, 오브젝트 생성기계(constructor)를

<script>

    let 어쩌구 = {}

    function 기계(){
      this.이름 = 'Kim'
    }

    let 오브젝트 = new 기계()
    console.log(오브젝트)
  </script>

요롷게 했을 때, this는이 기계로부터 새로 생성되는 오브젝트(instance)를 뜻한다.한 마디로 instance를 뜻함.

또 다른 this의 뜻은 이벤트리스너안에서는 e.currentTarget

<body>
  <div>
    <h1>hi</h1>
    <button id="버튼">버튼</button>
  </div>
  <script>

    document.getElementById("버튼").addEventListener('click',
      function(e){
        console.log(this)
        console.log(e.currentTarget)
      }
    )
  </script>
</body>

console.log(this)
console.log(e.currentTarget)

둘다 같은 것을 출력하는 모습을 볼 수 있다.

요기서 e.currentTarget은 지금 이벤트 동작하는 곳을 말한다.

요기서는

document.getElementById("버튼")
e.currentTarget
this

가 같은 녀석이다. 라고 생각하면 된다.

특수한 경우가 있음.

<script>

    document.getElementById("버튼").addEventListener('click',
      function(e){
        //console.log(this)
        let 어레이 = [1,2,3]
        어레이.forEach(function(a) {
          console.log(a)
          console.log(this)
        })
      }
    )
  </script>

여기서 this는 forEach()가 이벤트 리스너가 아니니까 버튼html을 가리키지 않는다.
또, constructor 인가? 그것도 아니다.

저번에 오브젝트 내의 메소드를 가지고 있는 오브젝트를 가리키거나 window를 가리킨다고 했다.

여기서의

function(a) {
          console.log(a)
          console.log(this)
        }

이 함수는 어디에 담겨있는게 아닌 전역함수이기에 window를 가리킨다.

여기서의 함수 안에 들어가는 함수. 콜백 함수를 이용하게 되었을 때, this는 window를 가리킨다.

% js에서는 뭔가 순차적으로 실행시키고 싶을 때 콜백함수를 사용한다. 라고 생각합시다.

오브젝트 내에서 콜백함수를 쓴다면 this는 어떻게 될까?

let 오브젝트 = {
      이름들 : ['김', '이', '박'],
      함수 : function(){
        console.log('ㅇㅇ', this)
        오브젝트.이름들.forEach(function() {
          console.log(this)
        })
      }
    }
    오브젝트.함수()

비교를 위해 console.log()의 위치를 달리하여 작성해봤다.

function() {
	console.log(this)
}

이 함수는 결국 어디에속한게 아닌 전역에 위치한 것이나 다름없는 일반함수이기 때문에 window를 출력한다.
하지만 console.log('ㅇㅇ', this)의 this는
오브젝트.함수() 에 속해있는 함수이기 때문에 오브젝트를 가리키게 된다.

그런데 만약 화살표 함수를 사용한다면?!

let 오브젝트 = {
      이름들 : ['김', '이', '박'],
      함수 : function(){
        console.log('ㅇㅇ', this)
        오브젝트.이름들.forEach(() => {
          console.log(this)
        })
      }
    }
    오브젝트.함수()