This

대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정된다.
실행 중에는 할당으로 설정할 수 없고 함수를 호풀할 때마다 다를 수 있다.

ES5의 경우

함수를 어떻게 호출했는 지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입

ES6의 경우

스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가

단독으로 쓴 this

냅다 this를 호출하는 경우에 this는 global object를 가리킨다.
- [object Window]
```
'use strict';
 
var x = this;
console.log(x); //Window
```

함수 안에서 쓴 this

함수 안에서 this는 함수의 주인에게 바인딩된다.

함수의 주인 ⇒ window 객체

function f1() {
  return this;
}

// 브라우저
f1() === window; // true

// Node.js
f1() === global; // true

엄격 모드에서 this 값은 실행 문맥에 진입하며 설정되는 값을 유지한다.
function f2() { "use strict"; // 엄격 모드 참고 return this; } f2() === undefined; // true

메서드 안에서 쓴 this

일반 함수가 아니고 메서드인 경우
메서드 호출 시 내부 코드에서 사용된 this는 해당 메서드를 호출한 객체로 바인딩된다.
var num = 0; function showNum() { console.log(this.num); } showNum(); //0 var obj = { num: 200, func: showNum, }; obj.func(); //200

이벤트 핸들러 안에서 쓴 this

이벤트 핸들러에서 this는 이벤트를 받는 HTML 요소를 말한다.
var btn = document.querySelector('#btn') btn.addEventListener('click', function () { console.log(this); //#btn });

생성자 안에서 쓴 this

생성자 함수가 생성하는 객체로 this가 바인딩 된다.
function Person(name) { this.name = name; } var kim = new Person('kim'); var lee = new Person('lee'); console.log(kim.name); //kim console.log(lee.name); //lee // new 키워드를 빼면 일반 함수 호출과 같아져서 window가 바인딩된다.

명시적 바인딩을 한 this

명시적 바인딩은 짝을 짓는다.

apply()

apply()에서 매개변수로 받은 첫번째 값은 함수 내부에서 사용되는 this에 바인딩된다.
두번째 값인 배열은 자신을 호출한 함수의 인자로 사용한다.

func.apply(thisArg, [argsArray]);

//인수들의 단일 배열을 받는다.

function Character(name, level) {
  this.name = name;
  this.level = level;
}
 
function Player(name, level, job) {
  Character.apply(this, [name, level]);
  this.job = job;
}
 
var me = new Player('Nana', 10, 'Magician');

call()

function whoisThis() {
  console.log(this);
}
 
whoisThis(); //window
 
var obj = {
  x: 123,
};
 
whoisThis.call(obj); //{x:123}

⇒ 인자를 this로 만드는 기능

두 메서드 모두 보통 유사배열 객체에게 배열 메서드를 쓰고자 할 때 사용한다.

화살표 함수로 쓴 this

화살표 함수에서 this는 자신을 감싼 정적 범위이다.
전역 코드에서는 전역 객체를 가리킨다.
화살표 함수는 전역 컨텍스트에서 실행되더라도 this를 새로 정의하지 않고, 바로 바깥 함수나 클래스의 this를 쓴다.
var Person = function (name, age) { this.name = name; this.age = age; this.say = function () { console.log(this); // Person {name: "Nana", age: 28} setTimeout(() => { console.log(this); // Person {name: "Nana", age: 28} console.log(this.name + ' is ' + this.age + ' years old'); }, 100); }; }; var me = new Person('Nana', 28); //Nana is 28 years old

Call / Apply / Bind

Call
- this를 바인딩하면서 함수를 호출하는 것
- 두번째 인자를 apply와 다르게 하나씩 넘기는 것
Apply
- this를 바인딩하면서 함수를 호추라는 것
- 두번째 인자가 배열
Bind
- 함수를 호출하는 것이 아닌 this가 바인딩 된 새로운 함수를 리턴

출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

https://nykim.work/71