favicon

Jayden { do: smite }

220812(금)

🪴 성장일지

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

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

🌳 키워드

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

⭐⭐⭐ JavaScript this

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

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

var a = 1; // window.a = 1의 기능을 수행하면서 동시에 차이점도 존재 1. 호이스팅 유무, 2. configurable 여부 window.a = 1;
  1. 함수로 호출 시 this : 전역 객체(window)를 가리킴
  2. 메소드로 호출 시 this : 객체.메소드에서 객체를 가리킴
  3. ⭐ 메소드 내에서의 함수 호출 시
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를 바인딩하기)

  1. call 메서드

  2. apply 메서드

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

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

undefined

Copyright 2023. all rights reserved by Jayden