This가 뭐지?

1. This가 무엇인가?

  영어에선 This : 👉 이것(지시대명사) 이다. 의미와 같은 역할을 한다 

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

  보통 객체지향에선 클래스로 생성한 인스턴스 객체를 의미한다. 즉 클래스에서만 사용가능!

 

  하지만 JS에서는... 어디서든 사용할 수 있다.

  그렇기에 어디서 어떻게 사용하는지 어떤 대상을 바라보는지 알아야 한다.

  함수와 객체(메서드)의 구분이 느슨한 JS에 this는 긴장감을 준다. 이 둘을 구분하기 때문

 

  this는 실행 컨택스트가 생성될 때(함수를 호출할 때)결정된다.  즉 함수를 어떻게 호출 하냐에 따라 값이 달라진다.

 

2. 함수와 메서드

• 함수를 실행하는 두가지 방법 : 함수로 호출 / 메서드로 호출
• 함수와 메서드의 차이? 독립성
   함수 : 그 자체로 독립적인 기능을 수행
   메서드 : 자신을 호출한 대상 객체에 관한 동작을 수행
   (함수를 객체의 프로퍼티로 할당한다고 무조건 메서드가 되는 것도 아님 호출된 경우만 메서드 아니면 함수가 될 수 있음)

//함수
let test = function(x) { console.log(this, x); };
test(1);
/*
전역객체 Window{..} 1
*/

//메서드
let obj = { method : test }; //test 함수 할당
obj.method(2);
/*
{method : f} 2
*/

 

• 메서드 호출(점/대괄호 호출)

//메서드
let obj = { 
	method :function(x) {console.log(this, x);}
}; //test 함수 할당

obj.method(1); //점 표기볍
obj.['method'](2); //대활호 표기법

/*
{method : f} 1
{method : f} 2
*/

  

 

• 함수 내부에서 this 
  - 함수를 함수로서 호출할경우 this는 지정되지 않고 전역(Global Object)을 가르킨다.
  - 함수에서 호출하는건 호출 주체(객체)를 명시하지 않고 개발자가 코드에 직접 관여해서 실행한 거라 호출 주체의 정보를 알 수 없다. 

var name = 'Julia';  	//전역객체
function foo () {
console.log(this.name); // 'Julia'
}
foo();

           - 이걸 방지하기 위해 스크립트 상단에 'use strict' 를 사용한다.(그러면 undefined가 출력된다)

  

 

• 메서드의 내부 함수에서 this
  - 메서드로 호출할경우 this는 바인딩을 수행한다
  - 해당 함수를 호출하는 구문앞의 . 혹은 대괄호 표기가 있는지 없는지가 관건

//함수
let obj1 = { 	
	method : function() { 
    	console.log(this);  					//obj1
        
        let innerfunc = function() {  
        	console.log(this); 					//전역객체 ,  obj2
        }
        innerfunc();						
        //. 이없기에 함수로 호출된 것 this 지정X
        
        var obj2 = { inner_method : innerfunc }; 
		obj.inner_method();		
        // 메서드로 호출됨
       	}
};
obj1.outer();
// 메서드로 호출

  

 

  

3. 명시적 바인딩 을 할 수 있는 방법

명시적 바인딩 이란? ( <-> 암시적 바인딩 )

 - 원하는 객체에 바인딩을 시키는 것
 - 어떤 함수안에서 사용되는 this의 값이 어디에 사용되야하는지 명확할때 사용하는 방식생성자 함수 호출

•  : 객체 생성 / 함수의 인자로 전달 받은 값을 객체의 속성에 할당하기 위해 사용

function func(a) {
  this.a = a;
}
var instance = new func(2); // instance

console.log(instance.a); // 2

 

 

• apply/call 호출
   : 함수 호출 / 유사배열 객체에 배열 메소드를 사용하는 경우에 활용
   : call은 첫번째 인자를 제외한 나머지를 매개변수로 사용하고,
    apply는 두번째 인자를 배열로 받아 배열 안에 있는 값들을 매개변수로 사용한다.

const Person = function (name) {
  this.name = name;
};
const func = {};

Person.apply(func, ['name']);
console.log(func); // { name: 'name' }

 

 

• bind 호출
  : this로 사용할 객체만 전달
    메서드의 thist와 매서드 내부의 중첩 함수 혹은 콜백함수의 this가 불일치하는 문제 해결을 위해 활용
    call과 비슷하지만 함수를 호출하는 것이 아니라 넘겨받은 this및 인자들을 넘겨받아 반환만 한다

function func(something) {
  console.log(this.a, something);
  return this.a + something;
}

function bind(fn, obj) {
  return function() {
    return fn.apply(obj, arguments);
  }
}

var obj = {
  a: 2
};

var bar = bind(func, obj); // bar는 foo()의 this에 obj를 바인딩한 함수를 할당 받는다.

var b = bar(3); // 2 3 
console.log(b); // 5

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

const binding = func.bind(1,2)
biunding(3,4,5,6) // 1 2 [3,4,5,6]

 

참고 : 

모던 자바스크립트(책)

https://jeonghwan-kim.github.io/2017/10/22/js-context-binding.html