[코딩 공부일지] 시작해봅니다 - this

그날 그날 공부했던 것들을 조금 더 오래 기억하기 위해

코딩공부 일지라는 것을 한번 끄적여 볼까 합니다.

 

뭐..정성스레 기록할 생각은 없구요..(귀찮) 😒

그냥 이 날 이거 공부했었지 정도로

저 만을 위한 그런...어떠한...일지랄까?

 

그래서 오늘은.....!! 두구두구

 

자바스크립트에서 그렇게 자주 사용한다는

" this "

두둥

 

---

this 라는 가까우면서 먼듯한...이 아리까리한 녀석이

어디서 사용하느냐에 따라 가리키는 대상이 다르더라구요

 

1.

 

그냥 console.log(this) 나 그냥 함수 안에 사용하면

window{}, 즉 윈도우 오브젝트를 가리킵니다.

 

 

* 윈도우 오브젝트

모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체를 의미

document.getElementById(), alert(), console.log() 등등의 함수를 보관하는 보관소

 

 

2.

object 자료형 안의 함수내에서의 this는

함수의 주인, 즉 오브젝트{} 를 가리킵니다.

 

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

object.func(); //object{}출력

 

 

3. (좀 어려움)

constructor(오브젝트 생성기계) 안에서 사용시, 

this는 새로생성되는 오브젝트를 의미

function 기계(){
    this.이름= 'kim'
    //기계{이름 : "kim"} 이렇게 할당되어지는 것임
}

var 오브젝트 = new 기계();

 

몬말인지 잘 모르겠지만

요 녀석은 일단 이정도만 하고 넘어가기!

 

 

4. (우리가 흔히 아는 this)

eventListener 안에서 쓰면 this는

e.currentTarget과 같은 의미

:: 지금 이벤트가 동작하는 html 태그를 가리킴

 

 

 

5. (심화 : arrow function)

요건 좀 설명이 필요한데,

오브젝트 내부의 함수안에서 한번 더 일반함수를 사용했을때(예: forEach의 콜백함수),

함수의 주인을 가리키는 것이 아닌 window{}를 가리키게 됨 

 

하지만 오브젝트 내부의 함수안에서 한번 더 사용한 함수가

arrow function일 경우에는 부모 함수의 this 가 가리키는 것을 그대로 물려다 사용하기 때문에

함수의 주인을 가리키게 됨!

 

 

 

 

 

오늘은 여기까지..!!

 

 

---

 

 

 

현재 코딩 공부일지는 코딩애플 강의를 들으며

공부하는 내용을 작성한 것입니다!

코딩애플 흥해랏