JavaScript this 정리

Wooooo·2022년 1월 17일

전역에서 쓰인 this : window 객체 리턴

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>this</title>
  </head>
  <body>
    <script>
      console.log(this); //window
      ("use strict"); // 전체 스크립트 엄격 모드 구문
      function fnc1() {
        console.log(this);
        // return : window
        // return : use strict : undefined
      }
      fuc1();
    </script>
  </body>
</html>

Object의 메서드안에서 쓰인 this : 메서드를 담고 있는 객체 리턴

var item = {
  name: "kim",
  hi: function () {
    console.log(this);
		// return : object (item)
    // 자기가 속한 object
  },
};
item.hi();

var item2 = {
  data: {
    hi: function () {
      console.log(this);
			// return : object (data)
      // 자기가 속한  부모 object
    },
  },
};
item2.data.hi();

생성자에서 쓰인 this : 새로 생성된 Object

// People() 생성자
function People() {
  (this.name = "lee"), (this.age = 50);
  // this : 새로 만들어진 object (obj1)
}
var obj1 = new People();

이벤트리스너 안에서 this : 이벤트가 동작하는 곳

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>this</title>
  </head>
  <body>
    <button id="btn">클릭하세요</button>
    <script>
      document.querySelector("#btn").addEventListener("click", function (e) {
        console.log(this);
				// return : object (button)
        // 이벤트리스너 안에서 this : 이벤트가 동작하는 대상
        console.log(e.currentTarget);
				// return : object (button)
        // e.currentTarget == this 같은 이벤트 대상을 리턴해준다.
    </script>
  </body>
</html>

화살표 함수 안에서 this : 상위 this 값을 그대로 적용 ( 화살표 함수 안에서 this는 새롭게 정의되지 않는다 .)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>this</title>
  </head>
  <body>
    <button id="btn">클릭하세요</button>
    <script>
      document.querySelector("#btn").addEventListener("click", (e) => {
        console.log(this); // return : window !!!
        // 이벤트리스너 안에서 this : 이벤트가 동작하는 대상
        console.log(e.currentTarget);
        // e.currentTarget == this
				// 이벤트리스너에서 화살표 함수 선언 시 this 말고 e.currentTarget 으로
				// 동작 대상을 가져와야 함  

        var arr1 = ["2020년", "2021년", "2022년"];
        arr1.forEach(function (a, b, c) {
          console.log("this : " + this);
          // return :  window
          console.log("a : " + a);
          console.log("b : " + b);
          console.log("c : " + c);
          // 첫번째 인자 : 배열의  value
          // 두번째 인자 : index
          // 세번째 인자 : 배열 전체
        });

        arr1.forEach((a) => {
          console.log("this : " + this);
					//return : object (button)
          // 화살표 함수의 this
        });
      });
    </script>
  </body>
</html>

Wooooo

매일 공부하기

다음 포스트

JavaScript this 정리

JavaScript 변수

0개의 댓글