JavaScript THIS!

This의 핵심 개념

• 동적으로 바인딩
  - 기본적으로 함수는 동적으로 this가 바인딩됨.(화살표 함수 제외) 여기서 동적이란 호출시에 this가 결정된다는 의미. 따라서 누가 어떻게 호출하였는지(호출한 놈!)를 유의해서 확인해야함
  
• 기본 바인딩

<script>
	function func() {
    	console.log(this);
    }
    
    func();
    
    console.log(this);
 </script>

• func()의 경우 undefined 출력, console.log(this)의 경우 global의 window객체 출력

• 암시적 바인딩

<script>
	const obj = {
    	name: 'wtlee',
        callName() {
        	console.log(this.name)
        }
    }
    
    obj.callName();			//	wtlee
</script>

- 암시적 바인딩에서 중요한 것은 메소드가 어디에 정의되어있는가가 아니라, 메소드를 "누가 호출하는가"이다.

<script>
	const obj1 = {
    	name: 'wtlee',
        callName() {
        	console.log(this.name)
        }
    }
    
    const obj2 = {
    	name: 'wtlee2',
        callName: obj1.callName,
    }

obj2.callName()		//	obj2 객체 호출됨.
</script>

- 위의 예제와는 달리 obj2가 callName()을 호출하고 있다. 따라서 this는 obj2가 된다.

• 명시적 바인딩
  - 명시적 바인딩은 Function.prototype에 정의되어 있는 call, apply, bind 메소드를 이용해 this를 바인딩하는 것을 말한다. (주로 bind) 말 그대로 this를 가리키는 것이 무엇인지 직접 명시적으로 설정해주는 행위이다.
  

<script>
	function sayName(a, b) {
      console.log(this.name, a, b);
    }

    const obj = {
      name: 'wtlee',
    };

    const bound = sayName.bind(obj, 1);
    bound(2); // wtlee 1 2
</script>

- bind는 함수를 호출하지 않고 this를 바인딩하여 새로운 함수를 반환한다. 이 때, bind의 두 번째 인자부터는 바인딩된 함수의 인자로 들어간다. 위의 경우 bound는 sayName() 함수를 바인딩한 새로운 함수이다. bound를 호출하면 sayName() 함수가 호출되는데, 이 때 sayName() 함수의 첫 번째 인자는 1이고, 두 번째 인자는 bound를 호출할 때 넣어준 2가 된다.