[Javascript] thisBinding

this(정의, 활용방법, 바인딩, call, apply, bind)

다른 객체지향 언어에서의 this는 곧 클래스로 생성한 인스턴스를 말합니다. 그러나 자바스크립트에서는 this가 어디에서나 사용될 수 있음!

1. 상황에 따라 달라지는 this

- this는 실행 컨텍스트가 생성될 때 결정. this를 bind한다(=묶는다) 라고하고 this는 함수를 호출할 때 결정된다. 라고 할 수 있다.

- 메서드로서 호출할 때 그 메서드 내부에서의 this

a. 함수 vs 메서드
함수는 그 자체로 독립적인 기능을 수행.
함수명();
자신을 호출한 대상 객체에 대한 동작을 수행.
객체.메서드명();
b. this의 할당

// 호출 주체를 명시할 수 없기 때문에 this는 전역 객체를 의미해요.
var func = function (x) {
    console.log(this, x);
};
func(1); // Window { ... } 1

// CASE2 : 메서드
// 호출 주체를 명시할 수 있기 때문에 this는 해당 객체(obj)를 의미해요.
// obj는 곧 { method: f }를 의미하죠?
var obj = {
    method: func,
};
obj.method(2); // { method: ƒ } 2

c. 함수로서의 호출과 메서드로서의 호출 구분 기준 : . []

var obj = {
method: function (x) { console.log(this, x) }
};
obj.method(1); // { method: f } 1
obj['method'](2); // { method: f } 2

d. 메서드 내부에서의 this

 var obj = {
    methodA: function () { console.log(this) },
    inner: {
        methodB: function() { console.log(this) },
    }
};

obj.methodA();             // this === obj
obj['methodA']();          // this === obj

obj.inner.methodB();       // this === obj.inner
obj.inner['methodB']();    // this === obj.inner
obj['inner'].methodB();    // this === obj.inner
obj['inner']['methodB'](); // this === obj.inner

📌 중요!

- 함수로서 호출할 때 그 함수 내부에서의 this

a. 함수 내부에서의 this

어떤 함수를 함수로서 호출할 경우, this는 지정되지 않아
실행컨텍스트를 활성화할 당시 this가 지정되지 않은 경우, this는 전역 객체를 의미,
‘독립적으로’ 호출할 때는 this는 항상 전역객체를 가리킨다

b. 메서드의 내부함수에서의 this

어떤 함수를 함수로서 호출할 경우, this는 지정되지 않아

var obj1 = {
	outer: function() {
		console.log(this); // (1)
		var innerFunc = function() {
			console.log(this); // (2), (3)
		}
		innerFunc();

		var obj2 = {
			innerMethod: innerFunc
		};
		obj2.innerMethod();
	}
};
obj1.outer();

결과>>>>
(1) : obj1, (2) : 전역객체(function~), (3) : obj2

c. 메서드의 내부 함수에서의 this 우회

• 변수 활용

  var obj1 = {
      outer: function() {
          console.log(this); // (1) { outer: ƒ }
  
          // AS-IS
          var innerFunc1 = function() {
              console.log(this); // (2) 전역객체
          }
          innerFunc1();
  
          // TO-BE
          var self = this;
          var innerFunc2 = function() {
              console.log(self); // (3) { outer: ƒ }
          };
          innerFunc2();
      }
  };
  
  // 메서드 호출 부분
  obj1.outer();

• 화살표 함수(=this를 바인딩하지 않는 함수)
  일반 함수와 화살표 함수의 가장 큰 차이점=this binding

  var obj = {
     outer: function() {
         console.log(this); // (1) obj
         var innerFunc = () => {
             console.log(this); // (2) obj
         };
         innerFunc();
     }
  }
  obj.outer();