[JS] this (1)

JS의 this?

배경
💡 js에서 this는,
자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)입니다.
이 this는, 함수가 호출되면 arguments객체와 this가 암묵적으로 함수 내부에 전달되면서 만들어지게 됩니다. 하지만 함수 호출방식에 따라서 this에 바인딩되는 객체는 동적으로 결정됩니다.

함수 호출 방식과 this바인딩

💡 만들어진 함수를 어떻게 호출하느냐에 따라 this에 바인딩될 객체가 동적으로 결정됩니다.

함수의 호출방식

1. 함수호출
2. 메소드 호출
3. 생성자 함수 호출
4. Fucntion.prototype.apply/call/bind 메소드에 의한 간접 호출

const foo = function() {
	console.dir(this); 
};

// 1. 일반함수 호출
// foo내부의 this는 window를 가리키게 된다 
foo(); // window

// 2. 메소드로서 호출
// 메소드로 호출하기 위해, 한 객체의 property값으로 함수를 할당 
// foo내부에서 this는 메소드를 프로퍼티로 가지면서, 호출한 객체 obj를 가리키게 된다
const obj = { foo : foo};
obj.foo(); // obj 

// 3. 생성자 함수로서 호출하기
// 함수를 new연산자를 사용해서 생성자 함수로서 호출한다 
// foo내부의 this는, 이 생성자 함수가 만들어낸 인스턴스를 가리키게 된다 
new foo(); 

// 4. apply/call/bind메소드 
// 이때는, 좀 더 익숙하게 알고 있는 방식!
// foo내부의 this는, 전달받을 인수에 의해서 결정된다 
const bar = {name: 'bar'};

foo.call(bar);
foo.apply(bar);
foo.bind(bar)(); 

---

1. 함수호출

배경

• js에서 전역객체는 모든 객체의 유일한 최상위 객체를 의미하는 것으로, 전역스코프를 갖는 전역변수를 property로 소유하게 됩니다.
• Browser-side → window
• Server-side → global

this가 기본적으로 바인딩되는 객체는?

• 전역함수는 물론
• 전역함수안의 내부함수도
• 메소드의 내부함수일 때도
• 콜백함수의 경우까지 ..

// 메소드의 내부함수인 경우

var value = 1;

var obj = {
  value: 100,
  foo: function() {
    console.log("foo's this: ",  this);  // obj
    console.log("foo's this.value: ",  this.value); // 100
    **function bar() {
      console.log("bar's this: ",  this); // window
      console.log("bar's this.value: ", this.value); // 1
    }**
    bar();
  }
};

obj.foo();

📝 내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관게없이 this는 전역객체에 바인딩된다

---

this가 전역객체를 참조하는 것을 회피해보자

var value = 1; 

const obj= {
	value : 100, 
	foo() {
		// this에 바인딩된 객체(obj)를, 변수를 만들어서 할당해보자
		const that = this; 

		// 내부 메소드에서 활용하기
		setTimeout(function() {
			console.log(that.value); // 100 
		}, 100); 
	}
}; 

obj.foo(); 

Function.prototype.apply / call / bind 메소드를 활용해보자

var value = 1;

const obj = {
  value: 100,
  foo() {
    // 콜백 함수에 명시적으로 this를 바인딩한다.
    **setTimeout(function () {
      console.log(this.value); // 100
    }.bind(this), 100);**
  }
};

obj.foo();

화살표 함수도 활용해보자

var value = 1;

const obj = {
  value: 100,
  foo() {
    **// 화살표 함수 내부의 this는 상위 스코프의 this를 가리킨다.**
    setTimeout(() => console.log(this.value), 100); // 100
  }
};

obj.foo();

요약

📜 js에서 this는, 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)입니다.
이 this는, 함수가 호출되면 arguments객체와 this가 암묵적으로 함수 내부에 전달되면서 만들어지게 됩니다. 하지만 함수 호출방식에 따라서 this에 바인딩되는 객체는 동적으로 결정됩니다.

this의 바인딩에 관여하는 함수호출 방식에는 함수호출, 메소드 호출, 생성자 함수호출, apply/call/bind메소드에 의한 간접호출 방식이 있습니다.

일반적인 함수 호출의 경우, this에는 기본적으로 전역객체가 바인딩되게 됩니다. 그래서 this가 전역객체를 참조하는 것을 피하기 위해, 메소드 상위에서 const변수를 활용해 this를 바인딩해두고, 메소드내에서 참조하는 방법이 있습니다. 그 밖에도, Function객체의 apply, call, bind메소드와 화살표 함수를 활용해서도 자동참조를 피할 수 있습니다.

---

• 🍯 참고 https://poiemaweb.com/js-this https://github.com/FE-Lex-Kim/-TIL/blob/master/Javascript/this.md