TIL 24. this

this란

this는 무엇을 가리킨다는 뜻이다.
this는 상황에 따라 가리키는 곳이 달라진다.

this는 실행 컨텍스트가 생성될 때 결정된다. 즉, 함수를 호출할 때 결정된다.

---

• 전역 공간에서의 this
  • 브라우저 환경과 node 환경에서는 각각 window, global을 가리킨다.
• 함수 : 함수는 자체적으로 독립적인 기능을 수행하기 때문에 this는 window다.

  function func () {
	console.log(this); -> window를 나타낸다.
	};
   func(); // Object [global] { … }

• 메서드 : 메서드는 자신을 호출한 대상에 관한 실행을 하기 때문에, this는 자신을 호출한 대상이다.

let obj = {
	method : function () {
		console.log(this); -> method를 나타낸다.
	},
};
obj.method(); // { method: [Function: method] }

메서드 내부라고 해도, 함수로서 호출한다면 this는 전역객체를(window or global) 가리킨다.

• 함수는 () 로 호출하고, 메서드는 . 또는 []로 호출한다.
  • 함수 : func()
  • 메서드 : obj.method() or obj[method]()

---

this가 상황에 따라 이것저것을 가리키다 보니, this가 내가 원하는 곳을 가리킬 수 있도록 지정해줄 수 있다.

변수에 this를 담아서 해당 객체만 가리키게 해서 사용할 수도 있다.
let self = this 처럼 말이다. 하지만 간지가 안 난다고 한다.

call, apply, bind를 사용할 수도 있다.
call은 호출 주체인 함수를 즉시 실행하고, apply는 call과 동일하지만, 두 번째 인자가 배열이다.
bind는 call과 비슷하지만, 즉시 실행하지 않고 넘겨받은 this, 인수들을 가지고 새로운 함수를 반환한다.

• call 메서드

func.call({ x: 1 }, 4, 5, 6}; // { x: 1 } 4 5 6

• aplly 메서드

func.apply({ x: 1 }, [4, 5, 6]); // { x: 1 } 4 5 6

• bind 메서드

var bindFunc = func.bind({ x: 1 });
bindFunc(5, 6, 7, 8); // { x: 1 } 5 6 7 8

화살표 함수도 사용할 수 있는데,
화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 없으므로 this는 상위값을 유지한다.

let obj = {
  outer: function () {
    console.log(this);
    let innerFunc = () => {
      console.log(this);
    };
    innerFunc();
  };
};
obj.outer();

bind, call, apply를 써서 우회하는 것보다 화살표 함수를 사용하면 더 편하게 this를 사용할 수 있다.