this

hhnssl·2022년 9월 7일

this

  • 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수
  • this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다
  • 자바스크립트 엔진에 의해 암묵적으로 생성됨
  • this가 가리키는 값은 함수 호출 방식에 의해 동적으로 결정된다
  • 전역에서 참조 가능하지만, strict mode에서는 메서드 내부 & 생성자 함수 내부에서만 가능하다. 전역 또는 일반 함수 내부에서 this를 출력하면 undefined가 뜬다. (일반 모드에서는 window가 뜸 <- 쓸 일 x)

this 바인딩

  • 바인딩: 식별자와 값을 연결하는 것
  • this 바인딩: this와 this가 가리킬 객체를 연결하는 것
  • 자바스크립트에서는 this 바인딩이 동적으로 이루어진다

객체 리터럴에서의 this

  • 메서드를 호출한 객체를 가리킴
      const circle = {
        key: 'value',
        method() {
          return this.key;
          // return key; <- this가 없으면 레퍼런스에러 발생
        },
      };

      console.log(circle.method()); // value

위의 예제에서 this가 가리키는 것은 circle(객체)



생성자 함수에서의 this

  • 생성자 함수란? new 키워드를 붙여 호출하는 함수. 인스턴스를 만든다
    - new Object(10) <- 생성자 함수
    - Object(10) <- 일반 함수
  • 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킴
      // 생성자 함수
      function Circle(key) {
        this.key = key;
      }

      Circle.prototype.getValue = function () {
        return this.key;
      };

      // 인스턴스 생성
      const instance1 = new Circle('인스턴스 1');
      const instance2 = new Circle('인스턴스 2');
		
      console.log(instance1.getValue()); // 인스턴스 1
      console.log(instance2.getValue()); // 인스턴스 2
  • 위의 예제에서, Circle 함수 안의 this는 Circle을 가리키는 것이 아니라, Circle로 생성된 인스턴스 circle 을 가리킨다.
    - 당연함. 생성자 함수 Circle은 그냥 객체(인스턴스) 생성용 틀임

함수 호출 방식과 this 바인딩

  • this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.
  • 함수 호출 방식 4가지
    1. 일반 함수 호출
    2. 메서드 호출
    3. 생성자 함수 호출
    4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출
function foo() {
        console.log(this);
      }

      // 1. 일반 함수 호출
      foo(); //: 전역객체 window

      // 2. 메서드 호출
      const obj = { foo };
      obj.name = 'name';
      obj.foo(); //: 메서드를 호출한 obj

      // 3. 생성자 함수 호출
      const objConstructor = new foo(); 
      //: 생성자 함수가 생성한 인스턴스 objConstructor

1. 일반 함수 호출

  • 무조건 this는 전역 객체로 바인딩 된다.
    - strict mode 에서는 undefined가 바인딩된다. this는 객체의 프로퍼티&메서드를 참조하기 위한 것이므로 의미가 없기 때문

2. 메서드 호출

  • 호출한객체.메서드() 일때, this는 호출한객체에 바인딩 된다.

3. 생성자 함수 호출

  • 생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩 된다.
profile
의식의 흐름대로 정리하는 블로그

0개의 댓글