this

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다.
함수를 호출할 때 생성되는 실행 컨텍스트 객체다.

특징

• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
• this는 자바스크립트 엔진에 의해 암묵적으로 생성된다.
• this는 코드 어디서든 참조할 수 있다.
• 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.(객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로)
• 함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달된다.
• 함수 내부에서 인자를 지역 변수처럼 사용할 수 있는 것처럼, this도 지역 변수처럼 사용할 수 있다.
• this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

this 바인딩이란?

바인딩이란 식별자(변수)와 값(원시 값 또는 객체)을 연결하는 과정을 의미한다.
예를 들어, 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩하는 것이다.
this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것이다.

상황별 this가 가르키는것

• 전역 공간에서의 this -> 전역 객체(window/ global)

• 일반 함수호출 내부에서 this -> 전역 객체(window/ global)

• 콜백 함수호출 내부에서의 this -> 전역 객체(window/ global)

• 생성자 함수호출 내부에서의 this -> 생성자 함수가 (미래에)생성할 인스턴스

• 내부 함수호출 내부에서의 this -> 전역 객체(window/ global)

• 메서드 호출 내부에서의 this -> 메서드를 호출한 객체

• Function.prototype.apply/call/bind 메서드에 의한 간접 호출 내부에서의 this -> apply/call/bind 메서드에 첫 번째 인수로 전달한 객체

전역에 선언된 공간에서 this

console.log(this)            // {alert: f(), atob: f(), blur: f(), ...}
console.log(window)          // {alert: f(), atob: f(), blur: f(), ...}
console.log(this === window) // true 

일반 함수호출 내부에서 this

//function → global (window, global) 인 경우이다.
function myFn () {
  return this;
}
myFn(); // window 객체 출력

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

const fn = {
  title: 'Hello World!',
  tags: [1, 2, 3, 4],
  showTags() {
    this.tags.forEach(function(tag) {
      console.log(tag);
      console.log(this); // window
    });
  }
}
fn.showTags();
// 1
// window 객체 출력
// 2
// window 객체 출력
// 3
// window 객체 출력
// 4
// window 객체 출력

생성자 함수에서 this

<생성자 함수에서 this>
//생성자 함수 MyFn가 빈 객체를 만들고, 이 생성자 함수에서 this가 이 빈 객체를 가리키도록 설정하였다.
function MyFn() {
  this.title = 'Hello World!';
  return this;
}
const myfn = new MyFn();
myfn // MyFn {title: 'Hello World!'}

객체의 메소드에서 this

//showTitle()는 fn의 메소드이기 때문에 this는 fn 객체를 참조한다.
const fn = {
  title: 'Hello World!',
  showTitle() {
    console.log(this.title);
  }
};
fn.showTitle(); // 'Hello World!'

객체의 메소드 안의 함수에서 this

const fn = {
  title: 'Hello World!',
  tags: [1, 2, 3, 4],
  showTags() {
    this.tags.forEach(function(tag) {
      console.log(this); // window
    });
  }
}
fn.showTags(); //메서드 안의 함수
// window 객체 출력
// window 객체 출력
// window 객체 출력
// window 객체 출력

화살표 함수에서의 메소드 안 함수의 this

const cat = {
  name: 'meow',
  foo1: function() {
    const foo2 = () => {
      console.log(this.name);
    }
    foo2();
  }
};
cat.foo1();	// meow
//함수선언신과 다르게 화살표함수는 전역객체가 아닌 cat객체를 가르킵니다

이게 가능한 이유는 화살표 함수에는 this가 아예 없기 때문이다.
function으로 선언한 함수를 실행할 땐 this가 존재하긴 하지만 값을 지정하지 않는데,
화살표 함수에는 this라는 변수 자체가 존재하지 않기 때문에 그 상위 환경에서의 this를 참조하게 된다.

화살표 함수 안에서 this는 언제나 상위 스코프의 this를 가리킨다.
화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

반면에,
일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되지 않고,
함수를 호출 할 때 함수가 어떻게 호출 되는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

use strict모드에서의 this?

일반함수에서의 this는 undefined가 바인딩 됨