javascript call, apply, bind 차이점

 

call, apply, bind 공통점

함수를 호출하는 방법으로 쓰인다.

1. Call

call 은 함수를 호출 하며 첫 번째 인자에는 this에 바인딩 되는 값을 넘겨준다 다만 ex6 arrow function으로 사용할경우 특성상 window (최상위 scope)를 나타넨다 그리고 두번째 인자부터 파라미터 값을 넘겨줄 수 있다.

    const testFunction = function (e) {
        console.log(this, e)
    }

    const testArrowFunction = (i) => {
        console.log(this, i)
    }

    testFunction.call({name: 'testName'}, {old: 13})

    testArrowFunction.call({name: 'testName'}, {old: 13})

결과

// {name: "testName"} {old: 13}
// Window {window: Window, self: Window, document: document, name: "", location: Location, …} {old: 13}

2. apply

apply이는 기본적으로 call과 같으며 차이점은 두번째 인자를 배열로 넘긴다는 것 이다.

    const testFunction = function (e) {
        console.log(this, e)
    }

    const testArrowFunction = (i) => {
        console.log(this, i)
    }

    testFunction.apply({name: 'testName'}, [{old: 13}])

    testArrowFunction.apply({name: 'testName'}, [{old: 13}])

결과

// {name: "testName"} {old: 13}
// Window {window: Window, self: Window, document: document, name: "", location: Location, …} {old: 13}

 

3. bind

bind는 call, apply와 달리 바로 실행하는 것이 아니라 새로운 함수를 만들어 사용 된다는 것이 차이점이다.

    const testFunction = function (e) {
        console.log(this, e)
    }

    const testArrowFunction = (i) => {
        console.log(this, i)
    }

    const bindTestFunction = testFunction.bind({name: 'testName'}, {old: 13})
    const bindTestArrowFunction = testArrowFunction.bind(null, {old: 13})

    bindTestFunction()
    bindTestArrowFunction()

결과

// {name: "testName"} {old: 13}
// Window {window: Window, self: Window, document: document, name: "", location: Location, …} {old: 13}