코어 자바스크립트 핵심 정리 (3)

- 자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 결정, 실행 컨텍스트는 함수를 호출할 때 생성되므로, this는 함수를 호출할 때 결정된다고 할 수 있다.

 

>전역 공간에서의 this

- 전역 공간에서 this는 전역 객체를 가리킴. 전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가지고 있음

 

>함수 vs 메서드

- 이 둘을 구분하는 유일한 차이는 독립성!

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

 

>메서드 내부에서의 this

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

- 메서드로 호출하는 경우 호출 주체는 해당 객체!

 

>함수 내부에서의 this

- 어떤 함수를 함수로서 호출할 경우에는 this가 지정되지 않음 -> 함수로 호출하는 것은 호출 주체(객체)를 명시하지 않고 개발자가 실행한 것이기 때문에 호출 주체의 정보를 알 수 없음....

- so, this 는 전역 객체를 바라보게 됨

- this 바인딩에 관해서는 함수를 실행하는 당시의 주변 환경(메서드 내부인지, 함수 내부인지)는 중요하지 않고, 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지가 관건. 

 

>메서드의 내부 함수에서 this를 우회하는 방법

- outer 스코프에서 self라는 변수에 this를 저장해서 사용

- _this, that 등 많은 변수를 사용하는데 self가 가장 많이 사용되는 것 같음

 

>this를 바인딩하지 않는 함수

- ES6에서는 화살표 함수를 도입

- 화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정이 없음. -> 상위 스코프의 this를 그대로 활용할 수 있음

 

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

- 함수 A의 제어권을 다른 함수 B에게 넘겨주는 경우, 함수A를 콜백 함수라 함. 이때 함수 A는 함수 B의 내부 로직에 따라 실행되며, this 역시 함수 B 내부에서 정한 규칙에 따라 값이 결정.

 

>call 메서드

- call 메서드의 첫 번째 인자는 this, 이후의 인자들은 매개변수.

- call 메서드를 이용하면 임의의 객체를 this로 지정할 수 있음

 

>apply 메서드

- 두 번째 인자를 배열로 받아서 그 배열의 요소들을 함수의 매개변수로 지정

- apply 메서드 이용 -> 임의의 객체를 this로 지정할 수 있음(call과 기능적으로 동일)

 

>call/apply 메서드의 활용

 1. 유사 배열 객체에서 배열 메서드 적용 - call, apply 활용

   * 유사 배열 객체 : 키가 0 또는 양의 정수인 프로퍼티, length 프로퍼티의 값이 >=0인 객체

 2. 생성자 내부에서 다른 생성자를 호출할 때 - call, apply 활용

 3. 여러 인수를 묶어 하나의 배열로 전달하고 싶을 때 - apply 활용

 var max = Math.max.apply(null, numbers)

    * 매개변수가 배열의 형태로 넘어가게 됨

    * ES6에서는 spread operator 이용하면 됨!

- call/apply 메소드는 this를 예측하기 어렵게 만들어서 코드 해석을 방해함. 하지만 ES5 이하의 환경에서는 마땅한 대안이 없어서 실무에서 광범위하게 활용되고 있음

 

>bind 메서드

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

var bindFunc2 = func.bind({x:1},4,5);
bindFunc2(6,7);		//{x:1} 4 5 6 7
bindFunc2(8,9);		//{x:1} 4 5 8 9

>name 프로퍼티

- bind 메소드를 적용해서 새로 만든 함수는 name 프로퍼티에 bound라는 접두어가 붙음

- 기존의 call이나 apply보다 코드를 추척하기에 더 수월해짐

 

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

- var self = this; <- 이 방법 말고! call, apply, bind를 사용하면 더 깔끔하게 처리할 수 있다.

 

>별도의 인자로 this를 받는 경우

- 요소를 순회하면서 콜백 함수를 반복 호출하는 내용의 메소드는 별도의 인자로 this를 받기도 한다.

ex. forEach, map, filter, some, every, find, findIndex, flatMap, from...