[JS교양] 상황에 따라 달라지는 this

this

`this`는 자신이 속한 객체를 참조하는 변수이다. (자기 자신(객체)을 참조한다.) 상황에 따라 참조하는 객체가 달라지는데 호출하는 주체가 있을 경우 해당 주체를 가리키게 되고, 호출하는 주체가 없다면 전역객체를 가리킨다. 

 

 

호출하는 주체?

설명하기 귀찮 어려우니 예시를 보도록 해요.

// 메서드(객체 안의 함수)로서의 호출은 this 바인딩 OK 
const obj = {
    name:"길동",
    age:30,
    print: function(){
        console.log(this.name, this.age);
    }
}

obj.print(); // 길동, 30 출력

• `obj`의 `print` 속성에는 함수가 저장되어 있다.
• `print` 를 호출하려면 어떻게 해야하나?  => obj.print() 처럼 호출하면 된다. 
•  객체를 타고 들어가서 `print()`를 호출한다. 즉, 호출하는 주체가 있는 것이다. (없는 경우 예시 =>  `print()`)

위의 예시의 경우 `this` 키워드로 `obj` 의 name과 age에 접근이 가능하다. (호출하는 주체가 있으니까)

 

 

호출하는 주체가 없는 경우

function print() {
    console.log(this);
  }
  
  print();

위의 예시는 호출하는 주체가 없다. (함수를 바로 호출하기 때문) 이런 경우에 `this`가 참조하고 있는 것은 전역객체이다.

(전역객체: 브라우저라면 `Window` 어쩌구, node환경이라면 node의 `Global` 어쩌구)

 

---

화살표 함수에서의 this

const obj = {
    name:"길동",
    age:30,
    print: () => {
        console.log(this.name, this.age);
    }
}

obj.print() // undefined undefined 출력

호출하는 주체가 명확하지만 화살표 함수는 자신의 `this`를 갖지 않는다. 다시 말해서 `print()`(화살표 함수)는 `obj` 객체의 `this`를 "참조하지 않는다." 화살표 함수는 자신의 정의된 위치의 상위 스코프의 `this` 를 참조한다.

 

---

함수 안 함수에서의 this (화살표함수)

const obj = {
    name: '길동',
    print: function() {
      const arrowFunc = () => {
        console.log(this.name);
      };
      arrowFunc();
    }
  };
  
  obj.print(); // 길동 출력

위의 코드에서는 `print` 속성에 함수 선언문을 사용하고 그 안에 화살표 함수를 사용했다. 이러면 화살표 함수는 자신의 상위 스코프(`obj`)의 `this`를 참조하기 때문에 `obj.name` 에 접근이 가능하다. 그러니까.. 화살표 함수를 사용할 경우 상위 스코프에서 `this`를 "상속받는다". (맞는 개념인지 잘 모르겠지만 나는 이렇게 이해하는게 편하니까 이렇게 이해하겠다.)

 

 

함수 안 함수에서의 this  (함수선언문)

const obj = {
    name: '길동',
    print: function() {
      function printName(){
        console.log(this.name);
      }
      printName();
    }
  };
  
  obj.print(); // undefined 출력

• `printName` 은 일반 함수로 정의되어 있다.
• 일반 함수는 상위 스코프의 `this` 를 상속받지 않고 호출된 컨텍스트를 참조하기 때문에 전역 객체의 `this`와 바인딩
• 이는 함수가 직접 호출될 때(객체의 메소드로 호출하는 것이 아닌) 전역객체의 `this` 참조하기 때문이다.

---

결론

• 호출하는 주체가 있는 경우: `this`는 메서드를 호출한 객체를 참조
• 호출하는 주체가 없는 경우: `this`는 전역 객체를 참조
• 화살표 함수: 상위 스코프의 `this` 를 상속 받음
• 일반 함수: 호출된 컨텍스트에 따라 `this`가 결정됨. 독립적으로 호출되면 전역 객체를 참조