10分鐘快速瞭解js中call apply bind

前言

學習前端過的小夥伴們應該都知道call apply bind的存在，咱們用來改變 this 的指向的，由於他們有着很大的共同點但又有點不一樣，因此容易混淆，今天我來和你們講解下這三個方法。

1.call()

示例

function f(){
        console.log(this)
    }
    var obj = {
        f
    };
    var fn = obj.f;
    obj.f();//obj
    fn();//window
    
fn.call(context,1,2,3,4,5); call 是直接讓函數執行了
// 第一個參數是用來改變函數執行時內部 this 指向的
// 第二個參數及以後的參數 都是傳給fn函數的實參
複製代碼

2.apply()

示例

var obj ={
        q:123,w:234
    }
    var f =function(a,b,c,d){
        console.log(this);
        console.log(a,b,c,d)
    }
    f.apply(obj,[1,2,3,4]);
    // apply 的目的和call同樣 可是卻區別在於第二個參數
    // 雖然第二個參數是一個集合，可是函數執行時，仍是被散亂的傳過去；不是一個集合總體傳過去的。
複製代碼

3.bind()

示例

var a = {
        name : "LiMing",

        func1: function () {
            console.log(this.name)
        },

        func2: function () {
            setTimeout(  function () {
                this.func1()
            }.bind(a)(),100);
        }

    };

    a.func2()            // LiMing
    // bind 的用法跟 call 如出一轍 ；只是不讓函數當即執行，而是返回一個新函數
    // 新函數執行的時候 this 執行換掉了;新函數執行傳遞的參數會補在經過 bind綁定的參數後面
    // 咱們能夠把 bind 綁定的參數理解成新函數的默認參數
複製代碼

如何選用

若是不須要關心具體有多少參數被傳入函數，選用apply()；
若是肯定函數可接收多少個參數，而且想一目瞭然表達形參和實參的對應關係，用call()；
若是咱們想要未來再調用方法，不需當即獲得函數返回結果，則使用bind();

總結

call()和apply()惟一區別是參數不同；
bind()是返回一個新函數，供之後調用，而apply()和call()是當即調用。

以上就是本文的所有內容，但願對你們的學習有所幫助。