JavaScript中的call、apply、bind如何使用

時間 2019-12-14

標籤 javascript apply bind 如何使用欄目 JavaScript 简体版

原文原文鏈接

前言：開發中常常使用call、apply、bind方法，可是偶爾仍是會忘了它們之間的差異，這裏作個總結方便本身回顧。數組

JavaScript中全部函數都繼承了函數原型(Function.prototype)中的 call 與 apply 兩個方法，call和apply用於改變函數調用時函數內部this的指向。app

第一部分：apply、call方法dom

　　語法：func.apply(thisarg, argsArray)，調用一個函數, 指定的this值，和一個數組做爲函數調用的參數。函數

　　參數：this

　　　　thisarg: 調用func函數時，函數內部真正的this指向，非嚴格模式下該值爲null或undifined時，this默認指向window對象。spa

　　　　argsArray：調用func函數時傳遞的參數列表(以數組形式)，該值爲null或undifined時，表示不傳入任何參數。prototype

　　返回值：返回指定this和參數的函數的執行結果。code

　　舉例1：改變this的指向對象

        var name = 'jack'
        function SayHello() {
            console.log(this.name + ' say hello!')
        }
        //直接執行方法，內部this指向window
        SayHello()  //jack say hello!

        var stu = {
            name:'john'
        }
        //使用apply方法指定SayHello的調用對象爲stu,方法中的this就指向stu
        SayHello.apply(stu) //john say hello!

　　舉例2：調用別的對象的方法blog

        var person = {
            name: 'jack',
            introduce: function(){
                console.log('my name is ' + this.name)
            }
        }
        var manager = {
            name: 'jone'
        }
        //此時的manager對象沒有introduce，可是咱們又想調用此方法。
        person.introduce.apply(manager)

　　此例中，manager對象中沒有introduce方法，但同時又想調用此方法，咱們經過apply改變introduce方法中this的指向，從而實現方法的調用。

　　舉例3：參數爲數組的妙用

　　　　1.數組的拼接

        /* 
            1.數組push方法的參數是數組一個個的元素並不是完整的數組 
            2.若是直接array1.push(array2)程序會報錯
            3.apply要求參數是數組，這裏咱們就能夠借用apply簡化數組的追加運算。
        */
        var array1 = [12 , "foo" , -2458]
        var array2 = ["Doe" , 555 , 100]; 
        Array.prototype.push.apply(array1, array2);

　　　　2.最大最小數求值

        /* 
            1.Math對象的max方法的參數是數組。
            2.數組自己沒有max方法，藉助Math對象的max方法，apply調用傳入數組完美解決。
        */
        var  numbers = [5, 458 , 120 , -215 ] 
        var maxInNumbers = Math.max.apply(Math, numbers),   //458

　　apply和call的區別：對於 apply、call 兩者而言，做用徹底同樣，只是接受參數的方式不同，apply接收的是數組，call接收的是參數列表。

　　　　舉例：數組最大值

        /*  apply接收參數爲數組
        call接收參數爲參數列表 */
        var  numbers = [5, 458 , 120 , -215 ]; 
        var maxInNumbers = Math.max.apply(Math, numbers),   //458
            maxInNumbers = Math.max.call(Math, 5, 458, 120, -215); //458

第二部分：bind方法

　　與apply、call區別：

　　　　bind()也能夠改變調用函數體內this的指向，區別apply、call調用方法當即執行，bind()執行結果是返回一個函數並不是當即執行。

　　語法：func.bind(thisarg, arg...)， bind()建立一個新的函數，函數中this爲綁定時指定的值，參數列表爲綁定時指定的參數序列。

　　參數：

　　　　thisarg: 被綁定函數執行時，函數體內真正的this指向。

　　　　arg...：被綁定函數執行時，傳遞給函數的參數列表。

　　返回值：返回一個指定this和參數列表的函數。

　　在定時器，dom事件中都存在回到函數，咱們一般會使用_this，that，self等暫存this引用，當上下文改變後，咱們依然能夠調用。

　　舉例1：綁定到回到函數上

        /* 
            這裏給class爲name的dom元素綁定了單擊事件
            click事件只有在真正點擊dom元素時候纔會觸發，此時回到函數中的this表明當前dom元素。
        */
        var foo = {
            count: 1,
            clickEvent: function () {
                $('.name').on('click', function (event) {
                    console.log(this.count)     //undefined
                });
            }
        }

        /* 
            經過_this = this保留this指向，回掉函數中的this依舊指向foo對象
        */
        var foo = {
            count: 1,
            clickEvent: function () {
                var _this = this
                $('.name').on('click', function (event) {
                    console.log(_this.count)     //1
                });
            }
        }

        /* 
            經過bind()函數綁定函數執行時this的指向。
        */
        var foo = {
            count: 1,
            clickEvent: function () {
                $('.name').on('click', function (event) {
                    console.log(this.count)     //1
                }).bind(this)
            }
        }