[JavaScript] this

아래 강의를 수강하며 배운 내용을 정리한 글입니다

[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY

 

 

JS에서의 this → 자신이 속한 객체

함수의 경우 함수가 호출되는 방법에 따라 this에 바인딩 되는 값이 달라집니다

 

 

1. 전역공간 호출 예제

console.log(this);

 

출력: [object Window]

 

 

2. 일반함수 호출 예제

const test = () => {
  console.log(this);
};

test();

 

출력: [object Window]

 

 

3. 메서드 호출 예제

const cafe = {
  brand: "이디야",
  menu: "아메리카노",
  print: function () {
    console.log(this);
  },
  newCafe: {
    brand: "이디야",
    menu: "아메리카노",
    print: function () {
      console.log(this);
    },
  },
};

cafe.print();
cafe.newCafe.print();

 

cafe.print() 출력 → cafe 객체

cafe.newCafe.print() 출력 → cafe.newCafe 객체

 

 

4. 생성자 함수 호출 예제

function Cafe(menu) {
  console.log(this);
  this.menu = menu;
}

let myCafe = new Cafe("latte");
// let myCafe = Cafe("latte");
console.log(myCafe);

 

 

 

new Cafe("latte") → Cafe 객체

Cafe("latte") → window 객체

 

 

함수 vs 메서드

함수는 자체적으로 존재하며, 메서드는 사용자가 정의한 객체의 프로퍼티인 함수를 말합니다

 

여기서 print 함수가 어떤 함수(화살표 함수..)인지에 따라서도 값이 달라집니다

이 부분도 이후에 추가적으로 작성해 보겠습니다