이재호
this란? 본문
난 자바스크립트를 배울때 이 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 |