[🐱 자바스크립트] this

this 개념에 대해서 알아보자

this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수 이다.
그러므로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.

(참고) strice mode에선 일반 함수 내부의 this는 undefined로 바인딩된다. 일반 함수 내부에서 this는 사용할 필요가 없기 때문이다.

요약! this는 상황에 따라 가리키는 대상이 다르다.

일반 함수 내 this -> window 객체
객체 obj 값의 함수 this -> 객체 obj를 의미
화살표 함수 내부 this -> 외부 this값 사용
생성자 내에서 this -> 내 자신
이벤트리스너 내 this -> e.currnetTarget(이벤트 동작중인 곳, 대부분 태그)

---

1. 일반 함수 안에서 쓰면 전역 객체 {window}가 바인딩 된다.

일반 함수의 입장에서 this를 사용하게 되면 자바스크립트의 최상단 객체인 window를 가리킨다.

<script>
	console.log(this); //Window {0: global,... 
</script>

<script>
function func(){
    console.log(this); ////Window {0: global,... 
}
</script>

window 객체를 펼쳐보면 window 함수가 기본적으로 갖고 있는 내장 함수들을 출력해주는 것을 확인할 수 있다.

---

2. 오브젝트 내 함수에서 쓰면 그 함수를 가지고 있는 오브젝트를 뜻한다.

오브젝트 내 함수 안에서 쓰면 ( = func 메서드에서 this 출력 )
그 함수를 가지고 있는 오브젝트를 뜻한다. ( = obj)

var obj = {
	name : 'me',
    func : function(){
      	console.log(this)
    }
}
obj.func(); // {name: 'me', func: ƒ}

아래의 경우 func2 메서드에서 this 출력시, this는 func를 뜻함

var obj = {
	name : 'me',
    func : {
    	func2 : function(){
          console.log(this)
        }
    }
}
obj.func.func2(); // {func2: ƒ}

---

3. 신문법 Arrow Function 특징: this값을 함수 밖에 있던 값으로 사용

화살표 함수 내부의 this값은 외부 this 값을 변화시키지 않고 외부 this 값을 그대로 재사용한다.

console.log(this) // Window
var obj = {
	name : 'su',
    func : () => {
		console.log(this) // Window 
    }
}

obj.func();

---

즉, 1번 개념과
2번 개념을 종합해서 봤을 때 this는 동일한 개념이다.

왜냐하면 자바스크립트의 최상단 객체가 Window이기 때문이다.

함수나 변수를 전역 공간에서 만들면 보이지 않는 Window 객체에 보관한다.

---

4. 생성자 내에서 사용

function 기계(){
	this.이름 = 'kim';
}

var newObj = new 기계();
console.log(newObj); // construct{이름:'kim'}

---

5. 이벤트 리스너 내 this는 e.currnetTarget 의미

e.currnetTarget은 지금 이벤트 동작하는 곳을 나타낸다.

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

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

---

정리 겸 퀴즈!

이벤트 리스너 내부 함수의 경우는?

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

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

정답은 Window 객체가 출력된다.
addEventListener 함수의 콜백함수로 쓰였지만
이벤트 리스너, 생성자 내부에서 쓴 것도 아니고,
특정 함수 내부에서 쓴 것도 아니므로

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

이 함수는 엄밀히 말해서 전역 함수에 해당한다.

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

var obj = {
  이름들 :[ '김','이','박'],
  함수 : function(){
    console.log(this) // this
        obj.이름들.forEach(function(){console.log(this)}) }
    }

obj.함수(); 
// Window 
// Window 
// Window 

obj.함수(); 

를 실행시키면

function(){
	obj.이름들.forEach(function(){console.log(this)}) }
    }

이 함수가 실행될 것이다. 이 함수는 사실상 근본없는^^ 일반 함수에 해당된다. 위 케이스랑 마찬가지.
따라서 반복문의 길이만큼 window 객체가 세 번 출력되는 것을 확인할 수 있다.

arrow function 안에서 this?

var obj = {
  이름들 :[ '김','이','박'],
  함수 : function(){
    console.log(this) // (2) 이 this를 의미함
        obj.이름들.forEach(() =>{
          console.log(this)}) // (1) 이 this는
  		}
    }

obj.함수();

// {이름들:Array(3), 함수...}
// {이름들:Array(3), 함수...}
// {이름들:Array(3), 함수...}

버튼을 누르면 this.innerHTML 값을 1초 후에 출력하기

(1) 일반 함수에서 this값은 바로 근처의 function을 찾아보면 된다.
아래 this는 아무것도 없는 일반 function을 가리키므로 window를 가리키는 셈이다.

<button id="버튼">버튼이에요</button>

<script>
  document.getElementById('버튼').addEventListener('click',function(){
  setTimeout(function(){console.log(this.innerHTML)},1000);
	}) // 이 this는 setTimeout 내부에 있는 this값, 즉 아무것도 가리키지 않는 함수이다. 
</script>

일반 함수로 작성했더라면 밖에 아무 상관없는 window객체의 innerHTML값을 받아오므로 undefined가 출력될 것이다.


(2) 하지만 arrow function 형태로 적게되면 함수 밖의 값을 가리키므로 document.getElementById('버튼')을 제대로 가리킬 수 있다.

<button id="버튼">버튼이에요</button>

<script>
  document.getElementById('버튼').addEventListener('click',function(){
  setTimeout(()=>{console.log(this.innerHTML)},1000);
	}) // 이 this
</script>

(3) 혹은 this를 사용하지 않고 일반 함수로 다음과 같이 작성할 수 있기도 하다.

<button id="버튼">버튼이에요</button>

<script>
  document.getElementById('버튼').addEventListener('click',function(){
  var 버튼 = this;
  setTimeout(function(){console.log(버튼.innerHTML)},1000);
	})
</script>