이재호

this란? 본문

프론트엔드/자바스크립트

this란?

호재이 2023. 2. 7. 18:45

난 자바스크립트를 배울때 이 this가 너무 어려웠다
그나마 유데미에서 간단하게 미리 설명을 해줘서 조금은 이해를 한거 같아 작성해본다
객체 안에서의 함수는 메서드라고 불린다 이 메서드에서 객체를 가르키고 싶다면 this 키워드를 사용하면 된다.
객체에 여러가지 특성이 있거나 정보와 메서드가 다양하고 여러 기능이 있을때 this를 사용합니다
백문이 불여일타다다다다다닥 코드로 보는게 더 쉬울거 같다

const cat = {
    name : "jamie",
    age : 3,
    sound(){
    console.log()
    console.log(`${this.name} say Meooo~`)
    }
}

/* cat 객체안에 sound라는 함수 메서드가 있다, 해당 메서드에서 name을 가르키고 싶다면 name 앞에 
   this를 작성하고 cat.sound()를 호출하면 결과   값으로 jamie say meoo 가 출력된다.
*/

만약에 cat.sound()를 다른 변수에 넣으면 어떻게 될까?
- cat.sound()를 다른 변수에 담아 사용을 하고 싶다고 가정해보자

let cat2 = cat.sound()

그런뒤 cat2를 호출하면 예상과 다른 결과를 확인해볼수 있다 

cat2()를 하면 this.name 으로 가르키고 있는 jamie 는 어디가고 없고 say meoo 만 출력되는걸 볼수 있다 

그럼 왜 ? 그럴까? 종나 쉽게 알려주겠다


  • 자바스크립트 내장객체에는 window라는 객체가 있다
  • window는 자바스크립트 객체중 최상단에 존재하는데 단군할아버지라고 생각하면 이해가 쉽다 🥕
  • 그럼 왜 window를 갑자기 설명하냐라고 할수 있는데
  • 제일 처음 작성했던 코드인 cat.sound()를 보면 sound() 함수 메서드는 cat이라는 객체를 가르키고 있다
  • 그에 비해 새로 변수에 담았던 cat2() 함수 메서드는 앞에 아무것도 가르키고 있는게 없다는걸 볼수 있다
  • ?? : 아니 그냥 변수인데 뭘 가르키냐라고 할수 있는데 나도 그렇게 생각했었다
  • 그런데 사실 cat2 를 포함한 모든 변수앞에는 window 라는게 존재하는데 cat2()도 window에 메소드라고 볼수 있는거다 그렇기에
  • cat2()를 실행하면 cat2()는 객체를 가르키고 있는게 아니라 window를 가르키고 있는것이다 그래서 say meoo 만 출력되는걸 볼수 있다.

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

Reduce란  (0) 2023.02.09
깊은복사 , 얕은복사  (0) 2023.02.09
고차함수란?  (0) 2023.02.07
기명함수와 익명함수란?  (0) 2023.02.07
렉시컬 스코프란?  (0) 2023.02.07