this

this = '이것'

this는 자바스크립트 함수 안에서 사용하는 키워드이다.
this는 함수안에서 사용할 수 있는 일종의 약속되어있는 변수인데,
자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.
그리고 변수안의 값은 함수를 어떻게 호출하냐에 따라 달라진다.
즉 상황에 따라 this가 바라보는 대상이 달라진다고 할 수 있다.

인스턴스란?
비슷한 속성을 가진 여러개의 객체를 만들기 위해 생성자 함수를 사용하는데 이렇게 생성된 객체를 인스턴스라 부를 수 있고 .prototype을 통해 만들어 낸 것이 인스턴스라 볼 수 있다.

1) 함수에서 this

함수호출

function f(){
	if(window === this){
    	console.log('window === this');
    }
}
f(); // window === this

this는 함수 안에서 전역객체인 window를 의미한다.

2) 메서드에서 this

메서드의 호출

	var o = { // o변수에 객체를 정의해서 할당함
    	f : function(){  // 프로퍼티f의 값이 함수 => 메서드
        	if(o === this){
            	console.log('o === this');
            }
        }
    }
    o.f(); // o === this

메소드 호출 => 객체를 담고있는 변수 o와 메서드 안의 this의 값이 같은지 확인

어떤 객체에서 그 메서드를 호출하면 this로 메서드가 소속되어 있는 객체에 접근 할 수 있기 때문이다.

위의 함수 호출 코드처럼 함수가 어느 객체에 소속되어 있지 않은 경우에 호출하면 this === window.
메서드로 호출하면 this === o.
즉, 그냥 함수에서의 this는 전역객체인 window였고
메소드에서 this는 객체였다.

이것은 같다고 할 수 있다.
그 이유는, 전역변수나 전역객체는 window가 암시적으로 생략되어 있고 실제로는 window라는 객체의 메소드가 된다. 그렇기 때문에 this값이 window가 된다는 것은 메서드로 호출 시 this값이 그 메서드의 소속인 객체를 가리킨다는 것과 같은 말이라고 할 수 있다..

3) 생성자의 호출

	var funcThis = null;
    
    function Func(){
    	funcThis = this;  // var를 사용하지 않은 함수 내 지역변수는 전역변수가 된다.
    }
    var o1 = Func();   //일반 함수 호출
    if(funcThis === window){
    	console.log('window');
    }
    var o2 = new Func();   //생성자 호출 -> 
    if(funcThis === o2){
    	console.log('o2');
    }

일반함수로 호출 시 -> 함수 안에서 this는 window를 가리킨다.
생성자로 호출 시 -> this는 생성될 객체를 가리킴
=> 1.생성자를 만들면 자바스크립트는 비어있는 객체를 만들게 된다.
2.생성자 안의 this는 생성자가 새로 만든 객체가 된다.

4) apply로 호출했을 때 this

	var o = {}
    var p = {}
    function f(){
    	switch(this){
        	case o :
            	console.log('o');
                break;
            case p :
            	console.log('p');
                break;
            case window :
            	console.log('window');
                break;
        }
    }
    f();
    f.apply(o);
    f.apply(p);

스위치문 괄호안에 어떤 값이 들어가면 그 값과 같은 case안에 들어있는 구간이 실행된다.(break를 만날 때 까지) 스위치는 if문과 대체제관계에있다.
f();를 함수로 호출하게 되면 this는 window를 의미해서 case-window를 실행한다.
f.apply();는 f 함수는 객체이기 때문에 메소드를 가질 수 있고 내장메서드인 apply를 가지고 있다.
apply를 호출하면서 첫번째 인자로 o를 주게 되면 f함수가 실행이 되면서 this값이 o가 된다.

• =>함수를 어떻게 호출하냐에 따라서 어디에 소속되는지 달라진다.

코어자바스크립트 - this

JavaScript에서의 this는 매우 중요한 개념으로, 함수가 어떻게 호출되느냐에 따라 동적으로 결정됩니다. 여러 상황에서 this의 동작을 이해하는 것이 중요합니다.
this는 함수를 호출할 때 결정된다.

전역 공간:
전역에서 함수가 호출되면 this는 전역 객체
브라우저에서는 window, Node.js에서는 global
(전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당한다)
var로 변수를 선언하더라도 실제 자바스크립트 엔진은 어떤 특정객체의 프로퍼티로 인식하기 때문에 var로 변수를 선언하는 대신 window의 프로퍼티에 직접 할당하더라도 결과적으로 똑같이 동작한다.
그러나 '삭제'명력에 대해서는 그렇지 않다.

메서드 호출:
함수와 메서드를 구분하는 유일한 차이는 "독립성"
함수: 그 자체로 독립적인 기능을 수행함
메서드: 자신을 호출한 대상 객체에 관한 동작을 수행함
메서드로의 호출 : 점 표기법, 대괄호 표기법 ( 뭐가 됐든 그 앞에 객체가 명시돼 있는 경우에는 메서드로 호출한 것)
객체의 메서드로 함수가 호출될 때, this는 해당 메서드를 소유한 객체를 참조
객체 내부의 함수에서 this를 사용하면 this는 그 함수가 속한 객체

함수 호출:
실행컨텍스트를 활성화할 당시에 this가 지정되지 않은 경우 this는 전역 객체를 바라본다고 함 => 함수가 독립적으로 호출될 때, this는 전역 객체
이는 메서드의 내부 함수에서도 동일하게 적용

콜백 함수:
콜백 함수에서 this는 함수를 호출한 주체에 따라 결정
주로 이벤트 핸들러나 비동기 함수의 콜백에서 발생
콜백함수의 제어권을 가지는 함수(메서드)가 콜백함수에서의 this를 무엇으로 할지를 결정하며, 특별히 정의하지 않은 경우에는 기본적으로 함수와 마찬가지로 전역객체를 바라봄.
예) 대표적으로 setTimeout, eventHandler

생성자 함수:
생성자함수?: 어떤 공통도니 성질을 지니는 객체들을 생성하는 데 사용하는 함수
함수가 new 키워드와 함께 생성자로 사용될 때, this는 새로 생성된 인스턴스

명시적 바인딩
call 또는 apply 메서드를 사용하여 this를 명시적으로 지정 가능
이를 통해 함수 호출 시 특정 객체에 this를 바인딩 가능

call : 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령
(함수를 그냥 실행하면 this는 전역객체를 참조하지만 call메서드를 이용하면 임의의 객체를 this로 지정 가능)
apply : 두번째 인자를 배열로 받음
bind : this 및 함수에 넘길 인수를 일부 지정해서 새로운 함수를 만듦

화살표 함수의 예외사항
: 화살표 함수는 실행 컨텍스트 생성 시 this를 바인딩하는 과정이 제외
즉, 이 함수 내부에는 this가 ㅇ예 없으며, 접근하고자 하면 스코프체인상 가장 가까운 this에 접근

this 인자를 받는 메서드:
일부 메서드는 콜백 함수 내에서 this 값을 제어하기 위해 별도의 this 인자를 제공합니다.
요소를 순회하면서 콜백 함수를 반복 호출하는 내용의 일부 메서드는 별도의 인자로 this를 받기도 함