자바스크립트 this (2)

2023.03.27 - [Front end/JavaScript] - 자바스크립트 this (1)

자바스크립트 this (1)

위 포스팅을 먼저 읽고 오면 좋을거 같아요!

 

this의 3번째 뜻. constructor 안에서 쓰면 constructor로 새로 생성되는 객체를 뜻한다.

자바스크립트에서 객체를 비슷한걸 여러개 만들고 싶을 경우 

객체를 복사하는게 아니라 constructor라는걸 만들어서 사용한다.

쉽게 말하자면 constructor는 객체를 복사해서 생성해주는 기계이다.

 

인스턴스 - constructor로 새로 생성되는 객체

 

constructor 만드는법

function 객체생성기계() {
  this.name = '강동욱';
}

이게 객체생성기계 만드는 법이다.

함수 문법을 이용해서 만든 후에, 안에 this.~~~ 를 추가해주면 된다.

여기서의 this는 객체생성기계로부터 새로 생성될 객체들을 의미한다.

 

 

constructor에서 객체 뽑는 법

let obj1 = new 객체생성기계();
let obj2 = new 객체생성기계();
let obj3 = new 객체생성기계();

이렇게 new 키워드를 사용하면 새로운 객체를 뽑을 수 있다.

그리고 새로운 객체는 {name: '강동욱'} 이라는 값을 가지고 있다.

 

 

 

this의 4번째 뜻. 이벤트 리스너 콜백함수 안에서 this는 e.currentTarget

<button id="버튼">버튼</button>

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

 

이벤트리스너의 콜백함수에서의 this는 e.currentTarge이라는 뜻과 똑같은 의미이다.

e.currentTarget은 지금 이벤트가 동작하는 곳을 뜻한다.

간단히 설명하자면 지금 addEventListener가 부착된 HTML 요소를 뜻한다고 보면 된다.

 

 

 

 

 

case 1. 이벤트 리스너 콜백함수 안에서 또 콜백함수를 쓴다면 this는?

document.getElementById('버튼').addEventListener('click', function (e) {
  let arr = [1, 2, 3];
  arr.forEach(function (el) {
    console.log(this); // window가 3번 출력됨
  });
});

 

이벤트 리스너 콜백함수 안에서 forEach()라는 반복문을 사용했다.

forEach()반복문을 사용할 땐 안에 콜백함수를 집어넣어서 사용하게 되어있다.

콜백함수는 그냥 함수 안에 인수로 들어가는 함수를 뜻한다.

위에 있는 포스팅에 있는 2023.03.27 - [Front end/JavaScript] - 자바스크립트 this (1) 에서의 1번뜻과 2번뜻에 대응된다. 

저렇게 쌩으로 있는 콜백함수는 그냥 일반함수랑 똑같기 때문에 window가 출력된다.

 

this의 값은 this가 어떤 함수안에 들어있는지에 따라 값이 변한다.

 

 

 

 

 

case 2. 객체 내부에서 콜백함수를 쓴다면 this는? 

let obj2 = {
  names: ['김', '나', '박', '이'],
  foo: function () {
    console.log(this); // {names: Array(4), foo: ƒ}
    obj2.names.forEach(function () {
      console.log(this); // window가 4번 출력됨
    });
  },
};

obj2.foo();

 

obj2의 메소드인 foo 안에서 forEach 반복문을 돌렸다. forEach()를 사용할때는 안에 콜백함수가 들어가는데, 콜백함수 안에서 this값을

출력하면 뭐가 나올까? window가 4번 출력된다.

this값을 판단할 땐 가장 가까이 있는 함수를 잘 살펴보면 된다.

forEach() 안에 있는 콜백함수는  일반 함수일 뿐이다. 그래서 이것도 window가 출력된다. 

 

foo 메소드 안에서의 this는 {이름들: Array(4), foo: ƒ} 가 출력되는걸 볼 수 있다. foo 메소드를 가지는 객체 obj2 인 것이다.

 

 

 

 

case 3. arrow function 안에서의 this?

arrow function 특징: 내부의 this값을 변화시키지 않음 ( 외부 this 값 그대로 재사용가능 )

var obj3 = {
  names: ['김', '나', '박', '이'],
  foo: function () {
    console.log(this); // {names: Array(4), foo: ƒ}
    obj3.names.forEach(() => {
      console.log(this); // {names: Array(4), foo: ƒ}가 4번 출력됨
    });
  },
};

obj3.foo();

위 case2 예제에서 forEach() 안에서 콜백함수를 arrow function으로 바꿨다.

arrow function을 쓰면 함수 내부의 this의 값을 새로 바꿔주지 않기 때문에

이전 this값을 그대로 쓰고 싶을 때는 arrow function을 사용하는게 좋다.

 

 

 

 

🌈 정리

- this의 값은 사용하는 환경에 따라 뜻이 천차만별이다.

- this값을 판단할땐 가장 가까이 있는 함수를 살펴보자.

- arrow function을 사용하면 arrow function 안에서의 this 값은 이전에 사용하던 this 값을 그대로 사용한다.

- this는 애초에 사용하는게 좋지 않을 수도?... (값이 천차만별이라 코드 읽기도 어려움..)

- constructor 안에서의 this는 인스턴스를 가르킨다.

- 리스너 함수안에서의 this는 e.currentTarget과 같다.