자바스크립트 this

자바스크립트 전체 링크

 

this는 함수를 어떻게 호출하냐에 따라 값이 달라진다.

 

아래의 person1 object에서 show를 호출하면 show의 this는 person1을 가르키게 된다.

const person1 = {
  name: "blood",
  show() {
    return this.name;
  }, // show: function() { return name; },
};

console.log(person1.show()); //blood

 

이제 person2를 추가하고, name은 "strawberry"로 선언하자.

const person1 = {
  name: "blood",
  show() {
    return this.name;
  }, // show: function() { return name; },
};

const person2 = {
  name: "strawberry",
  show: undefined,
};

console.log(person1.show()); //blood

const show = person1.show;
console.log(show()); //undefined

person2.show = person1.show;
console.log(person2.show()); //strawberry

 

(const) show를 person1.show에 정의하여 호출하면 아무것도 호출되지 않는다.

person1.show가 어디에 속하는지 알 수 없으므로 this는 undefined/전역 객체 등에 묶인다.

즉, 의도대로 묶이지 않는다.

 

person2의 show에 person1의 show를 할당하고 실행하면, person2의 name을 출력한다.

이 show가 person2에 속하기 때문에 this는 person2를 가르키게 된다.

---

이제 object의 name을 대문자로 보여주는 함수를 프로퍼티로 추가하자.

 

showName에서 this는 person을 가르킨다.

하지만 getUpperName의 this는 person에 bind되지 않는다.

따라서 undefined가 호출된다.

const person = {
  name: "bloodstarwberry",
  showName: function () {
    console.log(this.name); // bloodstarwberry
    function getUpperName() {
      return this.name.toUpperCase();
    }

    return getUpperName();
  },
};

console.log(person.showName()); //undefined

 

 

이 문제를 해결하기 위해 this를 할당한 후, getUpperName을 실행한다.

self로 변수를 선언하여 this를 할당한 후, getUpperName에 self를 호출하면 이 self가 원하는 this를 가르키게 된다.

const person = {
  name: "bloodstarwberry",
  showName: function () {
    console.log(this.name);
    
    let self = this;
    function getUpperName() {
      return self.name.toUpperCase();
    }

    return getUpperName();
  },
};

console.log(person.showName()); //BLOODSTRAWBERRY

 

할당을 피하고 싶다면 화살표 함수(arrow function)를 사용하는 방법도 가능하다.

const person = {
  name: "bloodstarwberry",
  showName: function () {
    const getUpperName = () => {
      return this.name.toUpperCase();
    };

    return getUpperName();
  },
};

console.log(person.showName()); //BLOODSTRAWBERRY

 

화살표 함수는 스스로 this를 가지지 않기 때문에, 내부의 this는 person을 가르키게 된다.