this / Arrow function

🔎 this

1-1. 그냥 쓰거나 일반 함수안에서 쓰면 window를 뜻한다.

console.log(this) // window 출력

function test(){
console.log(this)
}
test();  // window 출력

window란?
window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체
자바스크립트 함수나 변수를 저장하는 큰 {오브젝트}
전역변수란?
코드 내 모든 곳에서 참조해서 쓸 수 있는 범용적인, 범위가 넓은 변수

  //1번 함수
  function test(){
    console.log(this)
  }

  //2번 함수
  window.test = function(){ console.log(this) };

전역함수를 만들거나 전역변수 만들면 window {오브젝트} 안에 저장되기 때문에 위의 1번 함수와 2번 함수는 같은 의미이다.

1-2. strict mode일 때 함수 안에서 쓰면 this는 undefined

  'use strict';
 
  name = 'kim'; 
  // strict 모드에선 선언하지 않고 변수를 사용할 경우 에러를 표시해줌

IE 10버전 이상에선 'use strict'라는 키워드를 페이지 최상단에 추가하면 strict mode로 자바스크립트를 작성 가능하다. 자바스크립트는 오류를 어느정도 무시하고 넘어 갈 수 있으나, 이는 버그를 일으킬수 있다. strict 모드는 이런 오류를 에러로 변환하여 준다.

  'use strict';

  function tset(){
    console.log(this)
  }
  tset(); // undefined

strict mode에선 this 키워드를 일반함수 안에서 불렀을 때 undefined라는 값으로 강제로 지정해준다.

2. 메소드 안에서의 this는 해당 {오브젝트}를 의미한다.

메소드 method : 오브젝트에 들어가는 함수

var object = {
  name : 'Kim',
  age : function(){ console.log(this) } 
}

object.age(); // {name: 'Kim', age: ƒ} 출력

메소드안에서 this를 쓰면 this는 메소드를 가지고 있는 오브젝트를 뜻한다.

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

function Test(){
  this.name = 'Kim'
}

constructor안에서의 this는 새로 생성될 오브젝트들을 의미한다.(instance)
위의 코드는 name이라는 key값에 value로 'Kim'을 갖는 오브젝트를 생성

var object = new Test();
//{ name : 'kim'} 를 갖고있는 오브젝트

new 키워드를 이용하면 새로운 오브젝트를 꺼낼 수 있다.

4. eventlistener 안에서의 this는 e.currentTarget

document.getElementById('버튼').addEventListener('click', function(e){
  console.log(this)
});

e.currentTarget은 지금 이벤트가 동작하는 곳을 의미
현재 addEventListener 부착된 HTML 요소를 뜻한다.

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

document.getElementById('버튼').addEventListener('click', function(e){
  var 어레이 = [1,2,3];
  어레이.forEach(function(){  // 콜백함수
    console.log(this)
  });
});

eventlistener내부는 맞지만 그 안에서 function을 하나 더 만났기 때문에 의미가 변한다. 콜백함수는 그냥 일반함수랑 똑같기 때문에 window가 출력된다.

💡 this값은 function을 만날 때마다 바뀔 수 있기 때문에
this값을 판단하실 땐 가장 가까이 있는 함수를 살펴보자!

🔎 Arrow function과 this

arrow function은 어디서 쓰든간에 내부의 this 값을 변화시키지 않는다.
바깥에 있던 this의 의미를 그대로 내부에서도 사용할 수 있다.

//function 함수
var object = {
  test : function(){ console.log(this) }
}

object.test() // {test : f} 함수가 포함된 해당 오브젝트 출력

//arrow function
var object = {
  test : () => { console.log(this) }
}

object.test() // window 출력

this값은 함수를 만나면 항상 변하는데 arrow function 안에서는 변하지 않고 밖에 있던 this를 그대로 쓰기 때문에, 오브젝트 밖에 있던 this는 window 이므로 window를 출력한다.