220812(금)

🪴 성장일지

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 키워드

최대한 간단하게 정리, 추후에 보면서 스스로 설명

⭐⭐⭐ `JavaScript` this

this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정(ThisBinding)
실행 컨텍스트가 생성되는 건 언제? -> 함수를 호출할 때
즉, this도 함수를 호출 시 결정됨

전역공간에서의 this -> window(전역객체)

var a = 1; // window.a = 1의 기능을 수행하면서 동시에 차이점도 존재 1. 호이스팅 유무, 2. configurable 여부
window.a = 1;

함수로 호출 시 this : 전역 객체(window)를 가리킴
메소드로 호출 시 this : 객체.메소드에서 객체를 가리킴
⭐ 메소드 내에서의 함수 호출 시

var obj = {
  method: function () {
    console.log(this); // 1. this -> obj
    // 메소드 내부의 함수를 호출 시
    var inner = function () {
      console.log(this); // 2. this -> window : 메소드 내부여도 결국 `함수 호출`이기 때문
    }
    inner();
    function inner2 = () => {
      console.log(this);
      // 3. this -> obj : 위의 2번은 명백한 설계상 오류임.
      // 이를 해결하고자 화살표 함수를 도입(실행 컨텍스트 활성화 시 Thisbinding이 일어나지않음)
      // 따라서 스코프체이닝처럼 자연스럽게 내부에 this가 없다면 그 상위 컨텍스트에서의 this를 참조
    }
  }
}

콜백함수에서의 this : 콜백함수의 제어권을 가지는 함수 마음(그 함수에 따라 제각각)

생성자 함수 내부에서의 this : 자바스크립트는 함수에게 생성자로서의 역할을 함께 부여했다. -> 명심할 것!

var Dog = function (name, age) {
  this.name = name;
  this.age = age;
};

var hodu = new Dog('hodu', 2); // this가 hodu 인스턴스를 가리킴

명시적으로 this를 바인딩하는 방법(고의로 this를 바인딩하기)

call 메서드
apply 메서드

이들을 활용하는 방법을 더 기억해두기!

워… this라는 게 이렇게 복잡한지 몰랐는데, 실행 컨텍스트부터 하나하나 구체적으로 접근하니까 생각보다 재미있고 어렵지 않다.

🪴 성장일지
- 🌳 키워드
  - ⭐⭐⭐ JavaScript this

🪴 성장일지

🌳 키워드

⭐⭐⭐ JavaScript this

⭐⭐⭐ `JavaScript` this