function method, this

* this : 함수 스코프 내에서 자동으로 설정되는 특수한 식별자로, 실행 컨텍스트의 구성 요소 중 하나

 

  1. Global Reference : 기본적으로 window를 가리킴

  2. Function Invocation : 기본적으로 window를 가리킴

 

// Global Reference
console.log(this);
// Window {parent: Window, opener: null, top: Window, length: 4, frames: Window, …}


// Function Invocation
function foo(){
    console.log(this);
}

foo();
// Window {parent: Window, opener: null, top: Window, length: 4, frames: Window, …}

 

 

  3. .call / .apply Invocation : .call / .apply에 들어오는 첫번째 인자

   - call, apply, bind는 this를 특정한 객체로 묶을 수 있음

 

let obj = {
    a: 1,
    b: 2
}

function foo() {
    console.log(this);
}

foo.call(obj);  // {a: 1, b: 2} 

foo.apply(obj);  // {a: 1, b: 2} 

 

 

 

  4. Construction Mode : 생성된 인스턴스

 

function person(name){
    this.name = name;
}
const person1 = new Person('tomato');

console.log(person1.name);  // tomato

 

 

  5. Method Invocation : 부모 object (해당 메서드를 호출한 object)

 

let obj = {
	a: 'a',
	foo: function(){
	  console.log(this);
    }
}

obj.foo();  // {a: "a", foo: ƒ}

 

 

 

 * function method

  1. Function.prototype.call( this, arg1, arg2, ... )

    - 주어진 this값과 각각 전달된 인수 목록과 함께 함수를 호출

 

function max(a, b) {
    return Math.max(a, b);
}

max.call(null, 22, 100);  // 100

 

 

  2. Function.prototype.apply( this, [arg1, arg2, ...] )

    - 주어진 this값과 각각 전달된 인수 배열과 함께 함수를 호출

 

function max(a, b) {
    return Math.max(a, b);
}

max.apply(null, [22, 100]);  // 100

 

 

  3. Function.prototype.bind( this, arg1, arg2, ... )

    - bind 메소드가 호출되면 첫 인자로 받은 값을 this값으로, 이어지는 인자들은 인수로 설정된 새로운 함수를 생성

 

function max(a, b) {
    this.value = Math.max(a, b);
    console.log(this.value);
}

let obj = {
    value: 0
};

let boundFunc = max.bind(obj, 10, 55);  // this, 인자값 바인딩된 함수를 리턴
boundFunc();  // 5
console.log(obj);  // {value: 55}

 

 

 

* Arrow function

 - 원래의 this는 함수가 호출된 방식에 따라서 동적으로 변하는 값

 - arrow function 에서는 함수가 호출된 위치가 중요

 - arrow function 에서는 생성자 함수로 사용될 수 없고, 내부에서 arguments 역시 사용할 수 없음

 - function 메소드인 apply, call, bind로 바인딩된 this는 무시됨

 - arrow function에서는 block scope가 생성 (function scope X)

 - 그래서 상위 function scope의 this 값과 같은 this를 갖게 됨