12.this - ES6

---

this

• this 는 상황에 따라서 다른 뜻을 가지게 됩니다.

1. window

console.log(this)

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

test()

• 그냥 쓰게 쓰거나 일반 함수 안에서 쓰면 {window}

• use strict mode 를 쓰게 되면 JS strict mode 가 됨 그러면 일반 함수로 this 를 쓴 부분은 undefined 로 출력 됩니다.

2. object 안의 메소드 함수 내에서 this 를 사용하는 경우는 그 함수를 가지고 있는 object 를 뜻함니다

• 단, arrow function 을 사용할 때는 this 값을 함수 밖에 있던거를 그대로 씀 즉, this 를 받지 않는다는것임 => 함수 안에서는 재대로 사용할 수 없습니다.

• 위의 1,2 번에 나오는 window 는 함수나 변수를 보관하는 전역공간인 {window} 에 보관되기 때문에 window 가 출력되는 것임 global object 안에 그래서 console.log(this) 하면 window 가 출력되는것은 2번의 원리와 같은것임 => 원래 JS 파일은 전체 window{} 라는 global object에 담겨 있기 때문입니다.

this 의 정확한 역활은 나를 담고 있는 object 를 출력해주는것임 !!

3. constructor 안에서 쓰면 새로 생성되는 오브젝트를 뜻하는 this

• 함수 안에서 this 를 쓰게 되면 새로 생성되는 object 를 뜻함 => 그것을 instance 라고 합니다.

function machine() {
  this.name = 'kim'
}

let nameGen = new machine();

console.log(nameGen)

4. EventListener

// HTML 요소를 찾아서 그걸 클릭하면 function 을 실행 시키세요 
document.getElementById("btn").addEventListener('click', function (e) {
  console.log(this); // this 는 e.currentTarget 이라는 의미랑 같음 
  console.log(e.currentTarget); // e.current 는 지금 이벤트가 동작하는 곳을 가리킴
})

this 는 callback 함수에서 사용할 수 없습니다 즉, 사용하게 되면 정상적으로 작동되지 않고 global 속성인 window 를 받아서 쓰기 때문입니다

const obj = {
  name: ['kim', 'lee', 'park'],
  def: function () {
    console.log(this) // 출력 값은 const obj 를 출력
    obj.name.forEach(function () {
      console.log(this) // 출력 값은 window 를 출력
    })
  }
}

obj.def();

위의 code 에서 arrow function 을 사용하게 되면 내부의 this 값을 변화시키지 않음 (외부 this 값을 그대로 재사용하는 특성이 있습니다.)

• arrow function 의 장점은 재설정 해주지 않아도 그 안에서 this 를 사용하게 되면 위에서 사용된 값을 그대로 물려 받아서 사용할 수 있습니다.

const obj = {
  name: ['kim', 'lee', 'park'],
  def: function () {
    obj.name.forEach(() => {
      console.log(this) 
    })
  }
}

obj.def();

Reference

• poiemaweb - https://poiemaweb.com/js-this