코어자바스크립트 chapter 3

 

👉this란 무엇인가? 

자신이 속한 객체 또는 자신이 생성할 인스턴스 자체를 가리키는 자기참조 변수이다. 

this는 호출시 결정된다.

실행 컨텍스트가 생성될 때 결정됨. 함수를 호출할 때 결정됨

 

 

 

👉어떤 상황에서 this가 달라지는가?

- 전역공간에서의 this

- 메서드로서 호출시 메서드 내부에서의 this

- 함수로서 호출시 함수 내부에서의 this

- 콜백함수 호출시 그 함수 내부에서의 this

- 생성자 함수 내부에서의 this

 

 

1. 전역공간에서의 this

전역 객체를 가리킴

전역 컨텍스트를 생성하는 주체가 전역 객체이기 때문

브라우저는 window 

Node는 global

 

자바스크립트의 모든 변수는 특정 객체의 프로퍼티다. (=== Lexical Environment)

전역 변수를 선언하면 전역 객체 프로퍼티로 할당된다.

 

var로 변수 선언하는 것과 window프로퍼티에 할당하는 것의 차이

1) 삭제명령에서 다름 (configurable)

 

var a = 1;
delete window.a; //false
console.log(a, window.a, this.a) // 1 1 1

window.b = 3;
delete window.b; // true;
console.log(b, window.b, this.b) //Uncaught ReferenceError : b is not defined

 

전역객체의 프로퍼티로 할당한 경우 삭제가 되지만 var로 선언한 경우 delete되지 않음

-> 전역객체의 프로퍼티로 할당하지만 configurable속성을 false로 정의

 

2) 호이스팅 

var는 호이스팅이 되지만 전역객체 프로퍼티는 호이스팅이 되지 않음 (왜?)

전역객체 프로퍼티는 코드 실행시 초기화됨 

 

 

3) 스코프

var는 함수스코프 전역은 전역스코프 

 

2. 메서드로서 호출시 메서드 내부에서의 this

함수와 메서드의 차이 

함수는 자체로 독립적인 기능 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행 

호출 방법으로 구분 (앞에 점은 메서드로서 아니면 함수로서 호출)

 

메서드 내부에서의 this

this에는 호출한 주체에 대한 정보가 담김 

 

3. 함수로서 호출시 함수 내부에서의 this

 

함수 내부에서의 this

함수로서 호출시 호출 주체를 명시하지 않았기 때문에 this는 전역 객체가 됨

 

메서드 내부 함수에서의 this

실행컨텍스트 생성시 메서드로 호출하였으면 호출한 객체를 this에 바인딩한다.

호출할 때의 주변 환경은 중요하지 않다. 

 

호출 당시 주변 환경의 this를 상속받을 수 있는 방법 

1) 변수 활용 : self등을 함수가 선언된 환경의 this를 할당하고 함수내부에서 this가 아닌 self를 호출하는 방법

2) this를 바인딩하지 않는 함수 : 화살표 함수 상위스코프의 this를 활용

 

4. 콜백 함수 호출시 그 함수 내부에서의 this

콜백함수란? 

함수 A의 제어권을 다른 함수 B에게 넘겨주는 경우 A를 콜백함수라한다.

콜백함수에 this를 지정한 경우 그 대상을 참조하게 됨

 

5. 생성자 함수 내부에서의 this

생성자 함수란?

공통된 성질을 지니는 객체들을 생성하는데 사용하는 함수

구체적인 인스턴스를 만들기 위한 틀

함수를 new와 함께 호출하면 함수가 생성자로서 동작함

this는 새로만들 구체적인 인스턴스 자신이 됨

 

생성자호출시 생성자 prototype 프로퍼티를 참조하는 __proto__라는 인스턴스를 만듦 

미리 준비된 것을 this에 부여

 

객체 리터럴과 생성자 함수의 차이점 

객체 리터럴은 프로퍼티와 메서드로 이루어진 데이터의 묶음이다. 

한번 생성할 수있으며 중복된 데이터가 있더라도 다시 모두 재선언 해야하는 단점이 있다. 

 

생성자 함수란 객체를 생성하기 위한 하나의 탬플릿을 가지고 있으며
new로 구조가 동일한 프로퍼티를 가지고 있는 객체를 여러번 생성할 수 있다. 

객체를 생성하는 함수인데 그냥 생성만 하면 함수이고 new 연산자와 함께 호출하면 생성자 함수가 된다. 

 

 

 

 

👉명시적으로 this를 바인딩 하는 방법 

-call 메서드 

-apply 메서드 

-bind 메서드

 

1.call 메서드 

메서드 호출 주체 함수 즉시 실행 명령 

call 메서드의 첫번째 인자 this로 바인딩 

이후 인자들 매개변수 설정 

(this를 원하는 값으로 지정해서 호출)

 

2. apply 메서드 

call과 비슷하지만 두 번째 인자를 array로 받아 매개변수로 지정

(this를 원하는 값으로 지정해서 호출)

 

3. 유사배열 객체에 배열 메서드를적용

유사배열 객체란?

키가 0또는 양의 정수인 프로퍼티 존재, length 프로퍼티의 값이 0 또는 양의 정수인 객체 (배열의 구조와 유사한 객체)

 

Array.prototype.push.call(obj, 'd')

Array.prototype.slice.call(obj);

 

생성자 내부에서 다른 생성자 호출

다른 생성자와 공통된 내용을 필요로 할 때 call또는  apply를 이용해 반복을 줄인다. 

 

 

4. bind 메서드 

즉시 호출하지는 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수만 반환하기만 함.

this를 미리 바인딩 하고 부분 적용 함수의 목적을 가짐 

name프로퍼티에 bound 접두어가 붙음

 

상위 컨텍스트의 this를 내부함수나 콜백 함수에 전달하기 

호출할때 call을 하거나 함수 뒤에 bind를 붙이면 됨 

 

 

배열 메서드에서 별도의 인자로 this를 받는 경우가 있음 

 

 

👉함수를 호출하는 방식

- 함수 호출
- 메소드 호출
- 생성자 함수 호출
- apply/call/bind 호출

 

 

👉this 바인딩이란? 

바인딩 : 식별자와 값을 연결하는 과정

this와 this가 가리킬 객체를 연결하는 과정 

 

👉lexical scope 정적 스코프와 dynamic scope 동적 스코프 차이

dynamic scope는 함수가 호출 될 때 변수가 유효한 범위를 정하지만

lexical scope는 함수정의가 평가될 때 변수가 유효한 스코프를 정한다. (static scope라고도 불린다)

 

 

👉전역변수와 지역변수의 생명주기의 차이 

변수의 생명주기 : 메모리 공간이 확보된 시점부터 메모리 공간이 해제되여 메모리 가용풀에 반환될 때까지.

다른것이 메모리를 참조하고 있으면 메모리가 해제되지 않는다. 

 

지역변수는 함수 소멸시 생명주기도 함께 소멸한다. 

전역변수는 전역객체의 생명주기와 일치. 전역객체는 코드가 로드되고 더이상 실행할 코드가 없을 때까지 생명주기가 유효

 

👉전역변수의 문제점 

어디서나 참조할 수 있고 변환할 수 있기 때문에 의도하지 않은 결과가 나올 수 있으며 

메모리를 계속 사용하는 단점 

가장 늦게 참조됨. 전역 스코프가 스코프 체인상의 종점에 있기 때문에 

 

 

👉전역변수의 사용을 억제하는 방법

1. 즉시 실행 함수

  그 안의 변수는 모두 즉시실행함수의 지역변수가 됨

2. 네임스페이스 객체

전역에 네임스페이스 객체를 할당하고 그 안에 사용할 변수를 프로퍼티로 할당하여 사용

3. 모듈패턴

4. es6의 모듈 

var로 선언한 전역변수는 더이상 전역변수가 아니다. 모