220812(금)
🪴 성장일지
책 행복한 이기주의자(웨인 다이어)
의 내용에 자극받아 시작하는 소박한 성장기록
살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!
🌳 키워드
최대한 간단하게 정리, 추후에 보면서 스스로 설명
⭐⭐⭐ JavaScript
this
this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정(ThisBinding)<br/>
실행 컨텍스트가 생성되는 건 언제? -> 함수를 호출
할 때<br/>
즉, 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라는 게 이렇게 복잡한지 몰랐는데, 실행 컨텍스트부터 하나하나 구체적으로 접근하니까 생각보다 재미있고 어렵지 않다.
undefined