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

웹 퍼블리셔 기록/vanila javascript

ryu쥬니 2022. 4. 21. 17:59

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

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

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

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

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

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

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

두둥

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

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

1.

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

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

* 윈도우 오브젝트

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

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

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

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

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

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

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

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

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

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

몬말인지 잘 모르겠지만

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

eventListener 안에서 쓰면 this는

e.currentTarget과 같은 의미

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

요건 좀 설명이 필요한데,

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

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

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

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

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

오늘은 여기까지..!!