[JavaScript] this / call, apply 호출

What happens if I call the function?

- Local memory 생성

    - lexical scope 의존

- Local execution context 생성

Execution context (ㅠ)

- 어떤 함수가 호출되면, 실행 컨텍스트 execution context가 만들어진다

    - call stack에 push,

    - 함수를 벗어나면 call stack에서 pop

- scope 별로 생성

- 여기에 담긴 것

    - scope 내 변수 및 함수 (Local, Global)

    - 전달 인자 (arguments)

    - 호출된 근원 (caller)

    - this 

'this' keyword

- 모든 함수 scope 내에서 자동으로 설정되는 특수한 식별자

- execution context의 구성요소 중 하나로, 함수가 실행되는 동안 이용할 수 있다.

5 Patterns of Binding 'this'

1. Global : window

2. Function 호출 : window

3. Method 호출 : 부모 object

4. Construction mode (new 연산자로 생성된 function 영역의 this) : 새로 생성된 객체

5. .call or .apply 호출 : call, apply의 첫번째 인자로 명시 된 객체

1. Global : window

window는 전역객체이다. 

var test = '123';
test === window.test  // true
test === this.test  // true

2. Function 호출 : window

var name = 'Global Variable';
console.log(this.name);  // 'Global Variable'
 
function foo() {
    console.log(this.name);  // 'Global Variable'
}
 
foo();

var name =  'Global Variable';
 
function outer() {
    function inner() {
        console.log(this.name);  // 'Global Variable' (this는 window)
    }
 
    inner();
}
 
outer();

var name = 'Global Variable';
 
function outer2() {
    var closure = function() {
        console.log(this. name);  // 'Global Variable' (this는 window)
    }
    return closure;
}
 
outer2()();

3. Method 호출 : 부모 object

객체안에서 불리는 function은 method다!!

var counter = {
    var: 0,
    increment : function() {   // increment는 method
        this.val += 1;   // 여기서 this는 counter
    }
};
 
counter.increment();  // method 인보케이션
console.log(counter.val);  // 1
counter['increment']();
console.log(couter.val);  // 2

var obj = {
    fn: function(a, b) {
        return this;
    }
};
var obj2 = {
    method: obj.fn
};
 
console.log(obj2.method() === obj2);  // true 앞에꺼랑 같아서  true로 나온거임
console.log(obj.fn() ===  obj);  // true   (obj === obj 이기 때문에)

4. Construction mode (new 연산자로 생성된 function 영역의 this) : 새로 생성된 객체

function Car(brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
}
 
var avante = new Car('현대', '아반떼', 'gray');
(avante = 인스턴스 instance)
 
avante.brand  // '현대'
 
var bmw = new Car('BMW', '520d', 'yellow');
 
bmw.name  // '520d'

5. .call or .apply 호출 : call, apply의 첫번째 인자로 명시 된 객체

function add(x, y) {
    console.log(this);
    return x + y;
}
 
add(4, 5);  // 9
add.call(null, 4, 5);  // 9
add.apply(null, [4, 5]);  // 9 (인자를 배열로 입력)

add.call(null, 4, 5); << null위치에 어떤값을 입력함에 따라 this가 달라진다

예제

function identify() {
    return this.name.toUpperCase();
}
function speak() {
    var greeting = 'Hello, I'm ' + identify.call(this);
    console.log(greeting);
}
var me = { name : 'Kyle' };
var you = { name : 'Reader' };

identify.call(me);  // KYLE
identify.call(you);  // READER
speak.call(me);  // Hello, I'm KYLE
speak.call(you);  

→ this를 명시적으로 넣어주기

function foo() {
    console.log(this)
}
 
foo();   // window
// foo는 window.foo이기 때문에 this는 부모를 찾는 것임으로,
// this는 window다.