22. this

1. this 키워드

- 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.

- 객체 리터럴의 경우 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다.

- 생성자방식으로 인스턴스를 참조하려면 함수를 정의하는 시점에는 인스턴스가 없기 때문에 식별자를 알 수 없다.

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

- this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

- this는 엔진에 의해 암묵적으로 생성되며 코드 어디서든 참조할 수 있다.

- this바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

* this 바인딩

  -> 바인딩은 식별자와 값을 연결하는 과정을 의미한다.

  -> this바인딩은 this키워드와 this가 가리킬 객체를 바인딩하는것이다.

- 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.

- 자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩 될 값, 즉 this 바인딩이 동적으로 결정된다.

- strict mode가 적용된 일반 함수 내부의 this에는 undefined가 바인딩된다. (this를 사용할 필요가 없기 때문)

2. 함수 호출 방식과 this 바인딩

- tihs 바인딩은 함수 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다.

* 렉시컬 스코프와 this 바인딩은 결정 시기가 다르다.

  -> 모든 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정한다.

  -> this 바인딩은 함수 호출 시점에 결정된다.

 

  2.1 일반 함수 호출

• 기본적으로 this에는 전역 객체가 바인딩 된다.
• 일반 함수로 호출하면 함수 내부의 this에는 전역 객체가 바인딩 된다.
• strict mode에서는 this에 undefined가 바인딩된다.
• 메서드 내부에서 정의한 중첨함수도 일반함수로 호출되면 중첩함수 내부의 this에는 전역 객체가 바인딩된다.
• 콜백함수가 일반함수로 호출된다면 콜백함수 내부의 this에도 전역 객체가 바인딩된다.
• 일반함수로 호출된 모든 함수(중첩함수, 콜백함수 포함) 내부의 this에는 전역 객체가 바인딩된다. 
• /** 객체 내부의 중첩함수에서 this를 바인딩 시키는 법. */ var value = 1; const obj = { value : 100, foo(){ this 바인딩을 변수 that에 할당한다. const that = this; // 콜백함수 내부에서 this 대신 that을 참조한다. setTimeout(function(){ console.log(that.value); // 100 },100); } }​

  2.2 메서드 호출

• 메서드 내부에서의 this는 메서드를 호출한 객체를 의미한다.

  2.3 생성자 함수 호출

• 생성자 함수 내부의 this에는 생성자 함수가 미래에 생성할 인스턴스가 바인딩 된다.

  2.4 Function.prototype.apply/ call/ bind 메서드에 의한 간접 호출

• apply, call, bind 메서드는 Function.prototype의 메서드이다. 따라서 모든 함수가 상속받아 사용할 수 있다.
• apply와 call메서드는 this로 사용할 객체와 인수 리스트를 인수로 전달받아 함수를 호출한다.
• apply와 call메서드의 본절적인 기능은 함수를 호출하는 것이다. 
• apply 메서드는 호출할 함수의 인수를 배열로 묶어 전달한다.
• call 메서드는 호출할 함수의 인수를 쉼표로 구분해서 전달한다.
• 이 메서드들의 대표적인 용도는 arguments객체와 같은 유사 배열 객체에 배열 메서드를 사용하는 경우다.
• bind 메서드는 tih와 메서드 내부의 중첩함수 또는 콜백함수의 this가 불일치하는 문제를 해결하기 위해 사용된다.