75일차 (1) - JavaScript (this)

Yohan·2024년 6월 11일
0

코딩기록

목록 보기
116/156
post-custom-banner

this

1. 일반 함수에서 this

function foo() {
  // nodejs에서는 this는 global객체를 표현
  // 브라우저에서는 window라는 전역객체를 표현
  console.log(this)
}

2. 객체 메서드에서의 this

  • 해당 메서드를 호출하는 객체를 가리킴
const car = {
  madeBy: 'Hyundai',
  model: '그랜져',
  showInfo: function () {
      console.log(this)
      console.log(`제조사: ${this.madeBy}, 모델병: ${this.model}`)
  }
}

car.showInfo();
// { madeBy: 'Hyundai', model: '그랜져', showInfo: [Function: showInfo] }
// 제조사: Hyundai, 모델병: 그랜져

3. 이벤트 핸들러에서의 this

  • function으로 선언시 이벤트를 건 요소를 가리킴
const $btn = document.getElementById('btn')

const buttonHandler = function (e){
  console.log("버튼 클릭!")
  console.log(this)
  // $btn.style.background = 'red';
  this.style.background = 'red'; // $btn을 가르킴
};

$btn.addEventListener('click', buttonHandler); // this는 $btn

call, apply, bind

call

apply

bind


화살표 함수


클래스


profile
백엔드 개발자
post-custom-banner

0개의 댓글