this란?

this란?

---

this는 호출한 주체에 대한 정보를 담는다.

노드 환경에서는 global, 브라우저 환경에서는 window를 가리킨다.

// 독립적으로 함수 호출 시 this는 전역 객체를 가리킴
function independentFunction() {
  console.log(this); // 전역 객체를 가리킴
}

independentFunction(); // 독립적으로 호출 -> 전역 객체(window)를 가리킴

// 객체의 메서드 내부에서의 this는 해당 객체를 가리킴
var obj = {
  name: "John",
  sayName: function() {
    console.log(this.name); // 메서드가 속한 객체의 속성을 참조
  }
};

obj.sayName(); // John

this우회방법

---

함수 내에서 외부 this를 우회하는 방법을 여러가지가 존재한다.
주로 사용되는 두 가지 방법은 다음과 같다.

1. 변수에 this할당

var obj = {
  name: "abc",
  outerFunction: function() {
    var self = this; // 외부 함수의 this를 다른 변수에 할당
    var innerFunction = function() {
      console.log(self.name); // 변수 self를 통해 외부 함수의 컨텍스트에 접근
    };
    innerFunction();
  }
};

obj.outerFunction(); // abc

외부 함수의 this를 다른 변수에 할당한 후, 내부 함수에서 해당 변수를 사용한다.

2. bind메서드 사용

var obj = {
  name: "Bob",
  outerFunction: function() {
    var innerFunction = function() {
      console.log(this.name); // 내부 함수의 this는 바인딩되지 않아서 undefined
    }.bind(this); // 내부 함수의 this를 외부 함수의 this에 고정
    innerFunction();
  }
};

obj.outerFunction(); // Bob

내부 함수를 bind하여 내부 함수의 this를 외부 함수의 컨텍스트에 고정한다.

3. 화살표 함수 사용

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

// 화살표 함수this는 가장 가까운 this인 obj를 가리킴.

화살표 함수는 실행 컨텍스트 생성 시, this바인딩 과정이 제외된다.
화살표 함수 내부에는 this 할당 과정이 없으므로, this는 가장 가까운 this에 접근하게 된다.

위의 코드를 보면 화살표 함수는 자신의 this가 없기때문에, 외부 함수의 this에 접근한다.
따라서 innerFunc()의 this는 외부 함수 중 가장 가까운 this인 outer메서드의 this를 참조하게 된다.

결론

this는 호출한 주체에 대한 정보를 가지게 되며, 함수를 독립적으로 호출할 때 this는 전역 객체를 가리킨다.

함수 내에서 외부 this를 우회하는 방법으로는 변수 this를 할당하거나,
bind메서드를 사용하는 것 혹은 화살표 함수를 사용하여 내부 함수에서의 외부의 this를 참조할 수도 있다.

이러한 방법들을 통해 함수 내부에서 외부의 this를 쉽게 참조하고 활용할 수 있다.