[Javascript] this

메서드와 ‘this’

• 대부분의 메서드는 객체에 저장된 정보에 접근할 수 있어야함
  • 객체 프로퍼티의 값을 활용한다는 의미
• 메서드 내부에서 this 키워드를 사용하여 객체에 접근
• 점 앞의 this는 객체를 의미. this.variable 처럼 이용

let user = {
  name: "John",
  age: 30,

  sayHi() {
    // 'this'는 '현재 객체'를 나타냅니다.
    alert(this.name);
  }
};

user.sayHi(); // John

자유로운 ‘this’

• Javascript의 this는 다른 프로그래밍 언어의 this와 동작방식이 다름
• js에선 모든 함수에 this 사용 가능
• this 값은 런타임에 결정 (컨텍스트에 의존)
• 동일한 함수라도 다른 객체에서 호출 시 this가 참조하는 값이 달라짐

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 별개의 객체에서 동일한 함수를 사용함
user.f = sayHi;
admin.f = sayHi;

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
// this 값이 달라짐
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)

객체 없이 호출하기: this == undefined

• 객체가 없어도 함수를 호출할 수 있음
• 아래 코드를 엄격모드에서 실행 시, this는 undefined 할당
• 엄격모드가 아닐 때, this는 전역객체(브라우저 환경:window) 참조
• use strict 도입된 배경

자유로운 this가 만드는 결과

• 다른 언어에서 대부분 this는 메서드가 정의된 객체를 참조(bound this)
• js에서 this는 런타임에 결정
• this는 점 앞의 객체가 무엇인가에 따라 자유롭게 결정
• 장점 : 메서드를 하나만 만들어 여러 객체에서 재사용 가능
• 단점 : 너무 유연하여 실수할 수 있음

this가 없는 화살표 함수

• 일반 함수와 달리 고유한 this를 가지지 않음
• this 참조 시, 평범한 외부 함수에서 this 값 가져옴
• 아래 예시의 arrow() this는 user.sayHi()의 this
• 외부 컨텍스트의 this를 이용하고 싶은 경우, 화살표 함수가 유용

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // 보라

---

ref :
메서드와 ‘this’