코어 자바스크립트 | 챕터 3: this

<상황에 따라 달라지는 this>
this는 실행 컨텍스트가 생성될 때 함께 결정된다
실행 컨텍스트는 함수를 호출할 때 생성된다 - > this는함수를 호출할 때 결정됨
함수가 실행되는 환경(실행 컨텍스트)가 가리키는 대상 객체

전역 공간에서의 this: 전역 객체(전역 컨텍스트를 전역 객체가 생성하기 때문)
자바스크립트의 모든 변수는 특정 객체의 프로퍼티로서 동작한다
특정 객체:L.E(LexicalEnvironment)
실행 컨테스트는 변수를 수집해서 L.E의 프로퍼티로 저장한다
전역 컨텍스트의 경우 L.E는 전역 객체를 그대로 참조한다

전역 변수를 선언하면 자바스크립트 엔진은 이를 전역 객체의 프로퍼티로 할당한다

처음부터 전역 객체의 프로퍼티로 할당한 경우 -> 삭제 가능,
전역변수로 선언한 경우 -> 삭제 불가능
사용자가 의도치 않게 삭제하는 것을 방지해둔 것
즉 전역 변수 선언시 자동으로 전역객체 프로퍼티로 할당하는 동시에 configurable 변경/ 삭제 가능성을 false로 정의하는 것이다


함수vs메서드: 미리 정의한 동작을 수행하는 코드 뭉치
차이는 독립성
함수는 자체로 독립적이지만 메서드는 호출한 객체에 관한 동작을 수행함

어떤 함수를 프로퍼티에 할당한다고 해서 메서드가 되는 게 아니라
객체의 메서드로서 호출할 경우에만 메서드로 동작하고,
그렇지 않으면 함수로 동작한다

앞에 점이 있으면 메서드로서 호출한 것이다

🔹 함수(Function)
독립적인 코드 조각을 말해요.

특정 객체에 속해 있지 않고, 그대로 호출하면 일반 함수로 동작해요.

호출 시 this는 전역 객체(window) 또는 undefined(strict mode).

🔹 메서드(Method)
객체의 프로퍼티로 할당된 함수이며, 그 객체의 동작을 수행해요.

점(dot) 표기법으로 호출할 때 this는 그 객체를 가리킵니다.


메서드 내부에서의 this
this엔 호출한 주체에 대한 정보가 담김
호출 주체는 함수명 앞의 객체다


메서드의 내부 함수에서의 this

var obj1 = {
            outer: function() {
                console.log(this); // (1)
                var innerFunc = function() {
                    console.log(this); // (2) (3) 
                }
                innerFunc();

                var obj2 = {
                    innerMethod: innerFunc
                };
                obj.innerMethod;
            }
        };
        obj1.outer();


(1)obj1 (2)window (3)obj2


메서드 내부 함수에서의 this를 우회하는 방법
상위 스코프의 this를 저장해서 내부함수에서 활용하면 됨
주로 변수 이름을 self로 쓴다


this를 바인딩하지 않는 함수(화살표 함수)
화살표 함수: 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체를 빼서 상위 스코프의 this를 그대로 활용할 수 있다 (ES6)


화살표 함수
var obj1 = {
    outer: function() {
        console.log(this); // (1) {outer:f}
        var innerFunc = () => {
            console.log(this); // (2) {outer:f}
        };
        innerFunc();
    }
};
obj1.outer();



콜백 함수 호출 시 그 함수 내부에서의 this
함수 A의 제어권을 다른 함수(또는 메서드) B에게 넘겨주는 경우 함수 A를 콜백 함수라 한다

콜백 함수도 함수
this가 전역객체를 참조
제어권을 받은 함수에서 콜백 함수에 this가 될 대상을 지정한 경우
그 대상을 참조하게 됨


생성자 함수 내부에서의 this
생성자 함수: 공통된 성질을 지니는 객체들을 생성하는 데 사용하는 함수
생성자: 클래스(일종의 틀), 클래스를 통해 만든 객체: 인스턴스

new 명령어와 함께 함수를 호추하면 해당 함수가 생성자로서 동작함

~어떤 함수가 생성자 함수로 호출되면 내부 this는 새로 만들 인스턴스 자신이 된다~

생성자 함수를 호출하면 생성자의 protoype 프로퍼티를 참조하는 객체를 만들고 미리 준비된 공통 속성 및 개성을 해당 객체(this)에 부여한다


<명시적으로 this를 바인딩하는 방법>
call 메서드: 호출 주체인 함수를 즉시 실행하도록 하는 명령
임의의 객체를 this로 지정할 수 있다

var func = function (a,b,c) {
    console.log(this,a,b,c);
};

func(1,2,3); // Window{ ... } 1 2 3
func.call({x:1},4,5,6); // {x:1} 4 5 6

apply메서드: call과 기능적으로 동일하지만 apply에서는 두 번째 인자를 배열로 받아 배열의 요소들을 호출할 함수의 매개변수로 지정한다

//function은 익명함수, 익명 함수를 변수 func에 할당했기 때문에 함수 표현식이라 부른다
즉 func은 함수 그 자체를 가리키는 변수가 된다
var func = function (a,b,c) {
    console.log(this,a,b,c);
};

func.apply{{x:1},[4,5,6]}; // {x:1} 4 5 6


var obj = {
    a =1,
    method: funcction(x,y) {
        console.log(this.a,x,y);
    }
};

obj.method.apply({a:4},[5,6]); // 4 5 6

obj.method는 원래 obj의 메서드이지만,
apply로 this를 {a: 4}로 바꿔서 호출한 것


call/apply 메서드의 활용
유사배열객체에 배열 메서드를 적용
slice 메서드는 매개변수를 아무것도 넘기지 않을 경우에는 그냥 원본 배열의 얕은 복사본을 반환한다
call 메서드를 이용해 원본 유사배열객체의 얕은 복사를 수행하면 slice 메서드가 배열 메서드기 때문에 복사본은 배열로 반환하게 된다

유사배열객체는 call/apply 메서드를 이용해 모든 배열 메서드를 적용할 수 있다
사실 메서드의 의도와는 동떨어진 활용법이라
ES6에서는 Array.from 메서드를 새로 도입했다


생성자 내부에서 다른 생성자를 호출
call 또는 apply를 이용해 다른 생성자를 호출하면 반복을 줄일 수 있다


여러 인수를 묶어 하나의 배열로 전달하고 싶을 때(apply)
var numbers = [10,20,3,16,45];
var max = Math.max.apply(null,numbers);
var min = Math.min.apply(null,numbers);
console.log(max,min);

ES6에서는 펼치기 연산자(spread operator)를 이용하면 편하다


bind 메서드
call하고 비슷한데 즉시 호출은 안하고 넘겨받은 걸 바탕으로 새로운 함수를 반환하기만 한다
즉 함수에 this를 미리 적용하는 것과 부분 적용 함수를 구현하는 두 가지 목적을 가진다


bind 메서드를 적용해 새로 만든 함수는 name 프로퍼티에 bound라는 접두어가 붙는다(코드 추적 수월해짐)

상위 컨텍스트의 this를 내부함수나 콜백함수에 전달할 때도 이전에는 self(변수)를 이용한 우회법을 사용했지만, 이제는 call apply bind를 이용할 수도 있다


화살표함수 (ES6도입) this가 함수 내부에 없고, 접근하려하면 가장 가까운 this에 접근하게 된다



콜백함수 내의 this
메서드의 thisArg 값을 지정하면 콜백 함수 내부에서 this 값을 원하는 대로 변경할 수 있다

<정리>
전역공간에서 this는 전역객체를 참조한다
. 있으면 호출 주체를 참조
콜백 함수 내부에서의 this는 해당 콜백 함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우에는 전역 객체를 참조합니다.
없으면 전역객체 참조
생성자 함수의 this는 생성될 인스턴스를 참조


call,apply는 this를 명시적으로 지정하면서 함수/메서드를 호출
bind 메서드는 this 함수에 넘길 인수를 일부 지정해서 새로운 함수를 만듦
콜백함수를 반복호출하는 메서드는 별도의 인자로 this를 받기도