[ES6] 1. this

지렁·2023년 9월 28일

ES6란❔

ES6(ECMAScript 6)는 ECMAScript 표준의 가장 최신 버전이다. (2015년~)
현대적인 코드를 사용하면, 코드가 간결해지고 생산성이 향상된다. 이것이 ES6를 사용해야 하는 이유다.

this

1. 메소드를 가지고 있는 오브젝트

일반함수에서 사용하거나 그냥 사용하면 this는 window 가 되고 객체 자료형 안의함수에서 사용하면 자신이 위치한 객체가 된다

window는 역변수, 함수, DOM을 보관하고 관리하는 전역객체이다

const user = {
  firstName: 'Tess',
  lastName: 'Jang',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};

2. constructor 안에서 쓰면 constructor로 새로생성되는 오브젝트

함수안에 this.xx=yy를 해주면 새로 생성되는 객체의 이름 key와 value가 각각 xx와 yy가 된다

function func(){
  this.name = 'Kim'
}
var Object = new func();

3. eventlistener 안에서 쓰면 this는 e.currentTarget이라는 의미

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

= addEventListener 부착된 HTML 요소

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

아래와 같은 코드에서는

document.getElementById('button').addEventListener('click', function(e){
  var array = [1,2,3];
  array.forEach(function(){
    console.log(this)
  });
});

this가 forEach의 콜백함수에 존재한다
이 콜백함수는 일반함수랑 같기 때문에 이벤트가 동작하는 e.currentTarget 를 가리키는 것이 아니라 window가 출력된다

오브젝트 안에서 콜백함수를 쓴다면 this는?

var Object = {
  names : ['김', '이', '박'];
  func : function(){
      Object.names.forEach(function(){
        console.log(this)
      });
  }
}

여기서의 this 또한 forEach의 콜백함수에서 사용되었기 때문에 window를 가리킨다

🤔 위의 코드에서 this가 Object 객체를 가리키도록 하려면?

➡️ arrow function 문법 사용하기

함수 내부의 this값을 새로 바꿔주지 않고 외부에 있던 this를 그대로 내부로 가져와서 사용하기 때문에 this를 사용할 때 유용하다

var Object = {
  names : ['김', '이', '박'];
  func : function(){
      Object.names.forEach(()=> {
        console.log(this)
      });
  }
}

💪 연습

1. 간단한 메소드 만들기

'안녕 나는 손흥민' 이 나오도록 하기

var 사람 = {
  name: '손흥민',
}

사람.sayHi(); /

결과

var people = {
        name: "손흥민",
        sayHi: function () {
          console.log(`안녕 나는 ${people.name}`);
        },
      };
      people.sayHi();

2. 오브젝트 내의 데이터를 전부 더해주는 메소드만들기

조건) 자료 object 중괄호 내에 코드 작성 금지

var obj = {
        data: [1, 2, 3, 4, 5],
      };

obj.sum = function () {
  let res = 0;
  this.data.forEach((item) => {
    res += item;
  });
  console.log(합);
};

3. setTimeout 이용해보기

그럼 setTimeout을 이용해서 1초 후에 this.innerHTML을 콘솔창에 출력하기

document.querySelector("#button").addEventListener("click", function () {
        setTimeout(() => {
          console.log(this.innerHTML);
        }, 1000);
      });