코어 자바스크립트 - 3장 this

khundi·2023년 2월 8일

❗️해당 게시글은 공부한 내용을 정리한 글입니다.
❗️잘못된 내용이 있을 수 있습니다.
❗️혹시 잘못된 내용이 있다면 댓글로 피드백 부탁드리겠습니다! 🙇‍♂️

자바스크립트의 this

함수와 메서드는 미리 정의한 동작을 수행하는 코드 뭉치.
함수와 메서드의 유일한 차이는 독립성에 있다.
- 함수는 그 자체로 독립적인 기능을 수행한다.
- 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행한다.
- 자바스크립트는 상황별로 this 키워드에 다른 값을 부여함으로써 이를 구현함.
메서드는 ‘객체에 프로퍼티로 들어있는 함수’가 아니라 객체의 메서드로서 호출할 경우에만 메서드로 동작한다.
- ‘함수로서 호출’과 ‘메서드로서 호출’을 구분하는 방법 → 함수 앞에 점(.)이 있는지 여부만으로 구분가능
- 점 표기법이든 대괄호 표기법이든 어떤 함수를 호출할 때 그 함수 이름(프로퍼티명) 앞에 객체가 명시돼 있는 경우에는 메서드로 호출한 것이고, 그렇지 않은 모든 경우에는 함수로 호출한 것이다.

call 메서드
```
Function.prototype.call(thisArg[, arg1[, arg2[, ...]]])
```
call 메서드로 함수를 호출할 때 첫 번째 인자로 this를 바인딩 할 수 있다.
apply 메서드
```
Function.prototype.apply(thisArg[, argsArray])
```
apply 메서드는 call 메서드와 기능적으로 완전히 동일하다.
인자를 받는 방법에만 차이가 있다.
bind 메서드
```
Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]])
```
bind 메서드는 넘겨 받은 this 및 인수들을 바탕으로 새로운 함수를 반환하는 메서드이다.(call처럼 즉시 호출하지 않음)
- bind 메서드를 적용해서 새로 만든 함수에 name 프로퍼티에 ‘bound’라는 접두어가 붙는다.
```
const func = function (a, b, c, d) {
	console.log(this, a, b, c, d);
};
const bindFunc = func.bind({ x: 1 }, 4, 5);
console.log(func.name);     // func
console.log(bindFunc.name); // bound func
```
  - name 프로퍼티: length 프로퍼티와 동일하게 읽기 전용이며, 함수의 표준 프로퍼티이다.
    - name 프로퍼티는 함수의 이름이며 익명 함수인 경우 빈 값이다.

전역공간에서의 this는 전역객체(브라우저: window, Node.js: global)를 참조한다.
메서드로서 호출한 경우 this는 메서드 호출 주체(메서드명 앞의 객체)를 참조한다.
함수로서 호출한 경우 this는 전역객체를 참조한다. 메서드의 내부함수에서도 같다.
콜백 함수의 경우 내부에서의 this는 해당 콜백 함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우에는 전역객체를 참조한다.
생성자 함수에서의 this는 생성될 인스턴스를 참조한다.

call, apply 메서드는 this를 명시적으로 지정하면서 함수 또는 메서드를 호출한다.
bind 메서드는 this 및 함수에 넘길 인자를 지정해서 새로운 함수를 만든다.
요소를 순회하면서 콜백 함수를 반복 호출하는 내용의 일부 메서드는 별도의 인자로 this를 받기도 한다.(예. forEach, map, filter 등)

안녕하세요. 웹 프론트엔드 개발자 전성훈입니다.