코어JS 정리 📖 | this

자바스크립트에서 this가 바라보는 대상은 실행컨텍스트가 생성될 때, 즉 함수를 호출할 때 호출 방식에 따라 결정됩니다.

상황에 따라 달라지는 this

1. 전역공간에서의 this

브라우저 환경에서 전역객체는 window
Node.js 환경에서 전역객체는 global

2. 메서드 호출

메서드 호출 시, 메서드 내부의 this는 호출한 객체를 가리킵니다.

const obj = {
  a: 2,
  method1: function () {console.log(this)},
  method2: function () {console.log(this.a)},
  innerObj: {
    method3: function () {
      console.log(this);
    },
  },
};

obj.method1(); //obj
obj['method1'](); //obj

obj.method2(); //2
obj['method2'](); //2

obj.innerObj.method3(); //obj.innerObj
obj['innerObj']['method3'](); //obj.innerObj

3. 일반 함수 호출

일반함수 호출시, 함수 내부에서의 this는 전역객체를 가리킵니다.

const func = function() {console.log(this)};
func(); //전역객체

자동으로 전역객체를 바인딩하지 않고,
호출 당시 주변환경의 this를 그대로 상속받는 방법중 하나로
변수를 활용할 수 있습니다.

const obj = {
  innerFunc : function() {
    const self = this;
    console.log(self);
  },
}

obj.innerFunc(); //obj

화살표함수는 실행 컨텍스트를 생성할 때, this바인딩이 되지 않고 상위스코프의 this를 활용할 수 있습니다.

const obj = {
  outer: function() {
    console.log(this); //obj
    const innerFunc = () => {
      console.log(this);
    };
    innerFunc(); //obj (화살표함수이므로 this는 상위스포크인 obj)
  }
};

obj.outer();

this 바인딩

1. call 메서드

메서드 호출 주체인 함수를 즉시 실행하도록 하는 명령어입니다.

const func = function(a,b,c) {
  console.log(this, a,b,c);
};

func.call({x:1},2,3,4) // {x:1} 2 3 4
//call 메서드를 호출한 func가 바로 실행되고
//func함수 내의 this는 {x:1}에 바인딩

2. apply 메서드

call메서드와 기능적으로 동일합니다.
다만 apply 메서드는 두번째 인자를 배열로 받습니다.

const func = function(a,b,c) {
  console.log(this, a,b,c);
};

func.apply({x:1},[2,3,4]) // {x:1} 2 3 4

3. bind 메서드

call, apply 기능과 비슷하지만 함수를 즉시 호출하지 않습니다.
첫번째 인자로 받은 thisArg 및 인수들을 바탕으로 새로운 함수를 반환하는 메서드입니다.

const func = function(a,b,c) {
  console.log(this, a,b,c);
 };

const bindFunc1 = func.bind({x:1}); //this를 {x:1}에 바인딩한 함수를 반환
bindFunc1(2,3,4); // {x:1} 2 3 4

const bindFunc2 = func.bind({x:1},7,8); //this를 {x:1}에 바인딩.  하고 앞에서부터 두개의 인수를 7,8로 지정한 함수를 반환
bindFunc2(9); //{x:1} 7 8 9

4. 콜백함수 내부에서의 this

콜백함수도 함수이기 때문에 this는 전역객체를 참조합니다.

 [3,4,5].forEach(function(x){console.log(this,x)});
//전역객체 3
//전역객체 4
//전역객체 5 

const obj = {
  arr: function() {
    [3,4,5].forEach(function(x) {console.log(this,x)});
  }
}
obj.arr();
//전역객체 3
//전역객체 4
//전역객체 5 

콜백함수를 인자로 받는 메서드 중 일부는 this를 별도의 인자(thisArg)로 지정할 수 있습니다.
thisArg를 받는 경우 예시 - forEach메서드

const obj = {
  arr: function() {
    [3,4,5].forEach(function(x) {console.log(this,x)},this);
  }
}
obj.arr();
//obj 3
//obj 4
//obj 5