자바스크립트 this

자바스크립트의 this

자바스크립트의 this 는 상황에 따라 달라집니다.
자바스크립트의 일반적인 this 는 전역 객체를 바라봅니다.
또한 use strict 모드에서는 this 는 undefined 입니다.

// 일반함수 (전역객체)
function normal() {
    console.log(this); // Window

    // 내부함수 (전역객체) 함수의 함수를 선언해도 this 는 Window 로 같습니다.
    function inside() {
        console.log(this); // Window
    }
    inside();
}

normal();

// 콜백함수 (전역객체)
// 화살표 함수 (전역객체)
const cb = {
    callback: function() {
        setTimeout(function() {
            console.log(this); // window
        }, 50);
    },
    arrow: () => console.log(this) // window
}

cb.callback();

객체의 함수로 정의할 시, this 는 해당 객체를 바라봅니다.

// obj 객체의 apple 이라는 함수 선언
const obj = {
    apple: function () {
        // this 는 해당 객체의 this를 바라봅니다.
        console.log(this); // apple
    }
}

obj.apple();

하지만, obj.apple 을 다른 외부 객체에서 재정의해서 사용 시에는 this는 window 를 바라봅니다.

const banana = obj.apple;
banana(); // window

call

call 은 this를 다른 함수로 바인딩하면서 함수를 호출한다.
첫 번째 인자는 함수 호출에 제공되는 this 이고 두 번째 인자는 호출하는 함수의 인자들이 들어갑니다.

apply

apply는 call과 마찬가지로 this를 다른 함수로 바인딩하면서 함수를 호출합니다.
첫번째 인자는 함수 호출에 제공되는 this 이고 두번째 인자는 호출하는 함수의 인자들이 배열로 들어갑니다.

const func = function (a, b) {
    console.log (this, a, b);
}

func(1, 1); // window, 1, 1
func.call("call", 1, 1); // "call", 1, 1
func.apply("apply", [1, 1]); // "apply", 1, 1

bind

bind는 모든 함수에서 사용할 수 있다.
bind를 사용하게 되면 this를 직접 정해서 고정시킬 수 있다.
첫번째 인자는 함수 호출에 제공될 this 임으로, 객체 형식으로 넘겨주고 두번째 인자는 호출하는 함수의 인자들이 들어갑니다.

const sum = function (a, b) {
    console.log(this.title + "= " + a + b);
}

this.title = "window";
sum(1, 2); // window= 12

sum.bind({title: "bind"}, 1, 2)(); // bind= 12