1. 程式人生 > >淺談bind、call、apply區別,使用方法及場景

淺談bind、call、apply區別,使用方法及場景

談到bind、call、apply,首先想到的是改變this全域性上下文指向,但三者的區別,就自己的使用淺談心得。

首先,直接呼叫三個方法並列印,獲取直觀對比,demo程式碼如下:

<script>
    var objA = {
        name: '小王',
    }
    var objB = {
        log: function () {
            return this.name
        }
    }
    console.log(objB.log.bind(objA))
    console.log(objB.log.call(objA))
    console.log(objB.log.apply(objA))
</script>

控制檯輸出結果如下:

在呼叫bind方法改變this指向時,執行的方法不會執行,而呼叫call方法和apply方法時,在改變this指向的同時,執行的方法也會執行;

除了以上這一直觀的區別外,在使用時傳入入參格式也有區別,demo程式碼如下:


<script>
    var objA = {
        name: '小王',
    }
    var objB = {
        log: function (age) {
            return `${this.name},年齡${age}歲`
        }
    }
    console.log(objB.log.bind(objA, 20)())
    console.log(objB.log.call(objA, 20))
    console.log(objB.log.apply(objA, [ 20 ]))
</script>

控制檯輸出如下:

使用bind方法和call方法時入參格式為逗號分割的入參,使用apply方法時入參格式為一個數組,入參依次為陣列元素,多個入參就在這一陣列中依次新增;

依據個人開發習慣:

在繫結方法時多使用bind方法;

在呼叫其他例項方法時,多使用call方法或apply方法;