JavaScript에서의 this는 C언어에서의 포인터 느낌이라고 할 수 있겠다.
물론 syntax적으로 같다는 의미는 아니고 이해하기 까다로운 맥락에서 같다는 의미이다.

대부분 개발을 처음 배우는 사람들이 C언어의 포인터에서 벽을 느끼고 어려워 하니 JS에서는 this가 그 역할을 하지 않나 생각해본다.

아니면 다른 언어를 배우다 JS를 배워서 this가 더 헷갈리는 것일 수 도 있다.

상황별 this 차이

1. 일반 함수로 실행

• 일반 함수 실행 방식으로 호출된 함수 내의 this는 Global Object를 가리킨다.
  이는 브라우저상에서는 window 객체를 말한다.

function foo () {
	console.log(this);
}
foo();

2. 도트 표기법으로 실행

• Object 안에 key: value 형식으로 선언된 함수를 불러오거나 클래스로 선언된 객체의 메소드를 불러오는 방법으로 호출할 시 호출된 해당 메소드 안의 this는 도트 앞에 써져 있는 객체 자체를 가리킨다.

var age = 100;
var ken = {
  age: 35,
  foo: function () {
  console.log(this.age); // 35
  }
}
ken.foo();

3. 명백한 바인딩으로 실행

• bind(), apply(), call() 을 이용하여 바인딩되어 있는 함수가 호출 될 경우 호출된 함수 안의 this는 바인딩된 객체를 가리킨다.

  • apply()
    작성법 : function.apply(thisArg, [argsArray])
    this가 가리킬 인자를 첫번째 인자로 받고, 두번째 인자로는 배열을 받음
  • call()
    작성법 : function.call(thisArg[, arg1[, arg2[, ...]]])
    this가 가리킬 인자를 첫번째 인자로 받고, 두번째 인자부터는 배열이 아닌 각 인자로 받음
  • bind()
    작성법 : function.bind(thisArg[, arg1[, arg2[, ...]]])
    call과 인자 작성법은 동일하나 apply, call과 달리 바로 메소드가 실행되지 않음. this가 가리킬 인자를 바인딩하는 역할만 함.

func.bind(obj, 32, 23);
func.call(obj, 32, 23); // 바로 실행
func.apply(obj, [32, 23]); // 바로 실행

4. new 키워드로 실행

• new 키워드로 생성자 함수를 만들고 해당 함수를 호출하면 그 안의 this는 빈 객체를 가리킨다.
• 생성자 함수의 특징
  • 생성자 함수는 return 문이 없더라도 빈 객체를 return한다.
  • return 문이 있는데 객체를 반환하는 경우에는 해당 객체를 반환하고 객체가 아니라면 return문을 무시하고 기존의 빈 객체를 반환한다.

function Foo () {
  console.log(this.age); // undefined
  this.age = 100; // 빈 객체에 속성 추가
  console.log(this.age); // 100
}
new Foo();

5. 콜백함수에서의 this

• 콜백 함수로 호출 된 함수 내부의 this는 따로 지정되지 않았다면 브라우저에서는 전역 객체인 window 객체를 가리킨다.
  (콜백 함수로 전달만 하는거지 정작 실행할 때는 일반 함수 실행 방식으로 실행되기 때문.)

6. 화살표 함수에서의 this

• 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다.(Lexical this)
  또한 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.
• 화살표 함수의 this는 자신이 종속된 인스턴스를 가리킨다.
• 자신과 가장 가까운 함수 스코프에서 this를 받아온다고 생각하면 되겠다.

function fun() {
  this.name = "하이";
  return {
    name: "바이",
    speak: function () {
      console.log(this.name);
    },
  };
}

function arrFun() {
  this.name = "하이";
  return {
    name: "바이",
    speak: () => {
      console.log(this.name);
    },
  };
}

const fun1 = new fun();
fun1.speak(); // 바이

const fun2 = new arrFun();
fun2.speak(); // 하이

• 추가로 화살표 함수는 argument 인자를 사용할 수 없고 생성자 함수로 사용할 수 없다.