JavaScript 의 this

this는  항상 메서드가 정의된 객체를 참조할 것이라고 생각한다. 이런 개념을 'bound this' 라고한다.

자바스크립트에서 this는 런타임에 의해 결정됨. 메서드가 어디서 정의되었는지 상관없이 this는 '.' 앞의 객체가 무엇인가에따라 결정됨.

이렇게 this가 런타임에 결정되면 좋은 점도 있고 나쁜 점도 있다

함수(메서드)를 하나만 만들어 여러 객체에 재사용할 수 있다는 것은 장점

이런 유연함이 실수로 이어질 수도 있다는 것은 단점

 

 

 

** 요약

this값은 런타임에 결정

- 함수 선언시 this 사용 가능. 다만 함수가 호출되기 전까지 this엔 값이 할당되지 않는다

- 함수를 볻사해 객체 간 전달 가능

- 함수를 객체 프로퍼티에 저장해 object.method() 같이 메서드 형태로 호출하면 this는 object를 참조

 

 

객체 리터럴에서 'this'사용하기

function makeUser() {
  return {
    name: "John",
    ref: this
  };
};

let user = makeUser();

alert( user.ref.name ); // 결과가 어떻게 될까요?

에러가 발생한다

this값을 설정할 땐 객체 정의가 사용되지 않기 때문이다. this 값은 호출 시점에 결정된다

makeUser()내 this는 undefined가 된다. 매서드로써 호출된 게 아니라 함루로써 호출됨.

this 값은 전체 함수가 된다 

코드블록과 객체 리터럴은 영향을 주지 않는다.

ref: this 는 함수의  현재 this 값을 가져옴. 

 

에러가 발생하지 않도록 하려면 아래와 같이 코드 수정

function makeUser() {
  return {
    name: "John",
    ref() {
      return this;
    }
  };
};

let user = makeUser();

alert( user.ref().name ); // John

이렇게 하면 user.ref()가 메서드가 되고 this는 .앞의 객체가 되기 때문에 에러 발생 X