03. this

this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. this는 함수를 호출할 때 결정된다.

1. 전역공간에서의 this

• 브라우저 환경에서의 전역객체 - window
• 노드 환경에서의 전역객체 - global
• 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당한다

전역 공간에서는 var변수 대신 window프로퍼티에 직접 할당하더라도 결과적으로 var로 선언한 것과 똑같이 동작을 한다 . but, ‘삭제’의 명령에 대해선 다르다.

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

window.d = 4;
delete window.d; //true
console.log(d,window.d,this.d) // Uncaught referenceError: d is not defined

전역 변수로 선언한 경우 삭제가 되지 않는 이유는 사용자가 의도치 않게 삭제하는 것을 방지하기 위함?

→ 전역 변수를 선언하면 js 엔진이 자동으로 전역객체의 프로퍼티로 할당하면서 추가적으로 해당 프로퍼티의 configurable 속성을 false로 정의한다.

• 데이터 프로퍼티

  키와 값으로 형성된 실질적 값을 갖고있는 프로퍼티
  
  1)value - 실제 프로퍼티 값
  2)writable - 값을 수정 할 수 있는지 여부. false로 설정하면 프로퍼티 값을 수정 할 수 없다.
  3)enumrable - 열거가 가능한지 여부이다. for...in 룹 등을 사용 할 수 있으면 true를 반환한다.
  4)**configurable** - 프로퍼티 어트리뷰트의 재정의가 가능한지 여부를 판단한다.
  								false일 경우 프로퍼티 삭제나 어트리뷰트 변경이 금지된다.
  								단 writable이 true인 경우, 값 변경과 writable변경하는건 가능하다.

메서드로서 호출할 때 메서드 내부의 this

• (.)점의 여부로 간단하게 구분한다. (대괄호 표기법도 마찬가지)
• 메서드로서 호출하는 경우 호출 주체는 바로 함수명(프로퍼티명)앞의 객체 (ex. 점표기법의 경우 마지막 점 앞에 명시된 객체가 곧 this)

함수로서 호출할 때 함수 내부의 this

• 어떤 함수를 함수로서 호출할 경우에는 this가 지정되지 않는다 → this는 전역객체를 바라본다
• 호출 주체가 없을 때 자동으로 전역객체를 바인딩하지 않고 호출 당시 주변 환경의 this를 그대로 상속받아 사용하기 → 변수를 활용하기
• this 바인딩은 함수 호출 시점에 결정된다.

화살표 함수

• es6에서 함수 내부에서 this가 전역객체를 바라보는 문제를 보완하고자 this를 바인딩하지 않는 함수이다
• 선언될 당시에 상위 실행 문맥(상위 스코프)의 해당하는 this바인딩을 참조 → lexical this 라 부른다 (외부 환경 참조 Outer environment Reference와 비슷)

const obj = {
  name: '조인식',
  main: function () {
    setTimeout(() => {
      console.log(this);  //{ name: '조인식', main: [Function: main] }
    }, 1000);
  },
};

obj.main();

//this가 선언된 위치에서 결정. 바깥 lexical에 있는 this를 그대로 가져오기때문에.

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

• 함수 a의 제어권을 다른 함수 b에 넘겨주는 경우 함수 a를 콜백함수라 한다
• a는 함수 b의 내부 로직에 따라 실행되며, 제어권을 받은 함수에서 콜백 함수에 별도로 this가 될 대상을 지정하는 경우에는 그 대상을 참조한다.

생성자 함수 내부에서의 this

• this는 새로 만들 구체적인 인스턴스 자신이 된다.

2. 명시적으로 this 바인딩하기

• call 메서드
  • 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령
  • 임의의 객체를 this로 지정할 수 있다.
• apply 메서드
  • call 메서드와 기능적으로 완전히 동일하다.
  • call 메서드는 첫번째 인자를 제외한 나머지 모든 인자들을 호출할 함수의 매개변수로 지정하는 반면, apply메서드는 두번째 인자를 배열로 받는다.
• bind 메서드
  • 즉시 실행하지 않고 넘겨 받은 this, 인수들을 바탕으로 새로운 함수를 반환하는 메서드