JavaScript ) this 의미 변화 파헤치기

[ 1. 기본적인 this의 의미변화 ]

기본적으로 this는 나 자신을 담고있는 객체를 뜻한다!!

1 . 최상위에서 그냥 쓰거나 함수 내부에서 쓸 때

console.log(this)

혹은

function a(){
  console.log(this)
}

a();

=> 콘솔 결과값 : window가 출력됨!

why?

　　　　　　　　　　　　　　　　　　↓(global object)
함수나 변수를 전역공간에서 만들면 {window}에 보관하기 때문!
위 상황에서 window.a()를 해도 a함수가 실행된다.

2 . 객체 내 함수(메소드) 안에서 쓸 때

let ob1 = {
  name: bora
  func: function(){
 	 console.log(this)
  }
}

ob1.func()

=> 콘솔 결과값 : { name:bora, func:f }
즉, 여기서 this는 이 함수가 포함되어있는 객체 자체를 뜻함

2.5 . 객체 내 함수(메소드) 안에서 Arrow Function 으로 쓸 때

let ob1 = {
  name: "bora"
  func: () => {
 	 console.log(this)
  }
}

ob1.func()

=> 콘솔 결과값 : window가 출력됨!!

why?

Arrow Function은 기존 문법인 function(){}와 다르게 this값을 함수 밖에 있는 것, 즉 상위요소에서 그대로 가져와서 쓴다.

3 . constructor(기계)안에서 쓸 때

function cst(){
	this.name = "bora"
}

=> 여기서의 this는 특이하게 새로 생성되는 오브젝트를 뜻함!

function cst(){
	this.name = "bora"
}
let ob1 = new cst()

console.log(ob1)

=> 콘솔 결과값 : cst { name: 'bora' }

4 . Eventlistener 안에서 쓸 때

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

=> 콘솔 결과값 : <button id="btn">버튼</button>

여기서의 this는 e.currentTarget(이벤트가 동작하는 곳)을 의미한다! 즉 addEventListener가 부착된 HTML 요소임.

[ 2. 콜백함수 안에서 this의 의미변화 ]

1 . Eventlistener 안의 콜백함수에서 쓸 때

document.getElementById('버튼').addEventListener('click', function(e){
  let arr = [1,2,3]
  arr.forEach(function(){
    console.log(this)
  });
});

=> 콘솔 결과값 : window가 출력됨!!

why?

forEach(콜백함수) 의 구조에서 이렇게 그대로 들어가 있는 콜백함수는 일반 함수와 같기 때문에 window가 출력됨

2 . 오브젝트 안의 콜백함수에서 쓸 때

let obj1 = {
  arr : ['A', 'B', 'C'];
  func : function(){
      name.func.forEach(function(){
        console.log(this)
      });
  }
}

=> 콘솔 결과값 : window가 출력됨!!

달라보이지만 사실상 1번과 똑같이 콜백함수 그대로 쓰인 상황임.

3 . 오브젝트 안의 콜백함수에서 Arrow Function으로 쓸 때

위 2번과 똑같은 상황에서 Arrow Function으로 바꿔본다면?

let obj1 = {
  arr : ['A', 'B', 'C'];
  func : function(){
      name.func.forEach(()=>{
        console.log(this)
      });
  }
}

=> 콘솔 결과값 : { arr:['A', 'B', 'C'], func:f }

즉, 이 함수를 가지고있는 주인을 출력해준다.

why?

Arrow Function은 내부의 this값을 변화시키지 않음!! 외부요소(부모)거 그대로 가져온다고 했음.

let obj1 = {
  arr : ['A', 'B', 'C'];
  func : function(){
      console.log(this)  // ←이거랑
      name.func.forEach(()=>{       //둘이 같다는뜻임!
        console.log(this) // ←이거랑
      });
  }
}