關於javascript中的bind、call、apply等函數的用法

關於javascript中的bind、call、apply等函數的用法

我GitHub上的菜鳥倉庫地址： 點擊跳轉查看其餘相關文章

文章在個人博客上的地址： 點擊跳轉

        前面的文章已經說到this的指向了，那麼這篇文章就要說一說和this相關的三個函數的用法：bind( )、call( )和apply( )。

        其實它們都很簡單，可是在處理一些與this相關的函數的時候，用來改變函數中this的指向，倒是必不可少的工具，因此必須掌握好它們的用法。

        好了，三管齊下，一塊兒比較地舉例子說一下：

//先來一個對象big吧
var big = {
    name:'BaBa',
    saying:function (age){
        console.log(this.name,'age:',age);
    }
};

//再來一個small對象
var small= {
    name:'ErZi'
};

//若是想調用big的saying方法來講出‘Erzi’:
//使用bind方法
big.saying.bind(small)(20);//打印結果爲ErZi age: 20
//使用call方法
big.saying.call(small,20);//打印結果爲ErZi age: 20
//使用apply方法
big.saying.apply(small,[20]);//打印結果爲ErZi age: 20

        因此，其實三種方法均可以達到同一個結果，至於區別就很顯而易見了。

        bind只是單純將一個函數裏的this的指向明確指定爲small了，若是要執行函數，就要在後面加括號調用了。

        call就是直接執行一個本身指定this指向的函數，參數是一個一個傳遞。

        apply和call的區別就是，參數是放進一個數組中傳遞。

        實際上，不少時候咱們在一個函數中，想用到其餘的函數，可是其餘函數的this指向就不明確，因此就會在本身的函數裏面經過這三個方法來調用函數，例如：

//先來一個對象big吧
var big = {
    name:'BaBa',
    age:50,
    saying:function (){
        console.log(this.name,'age:',this.age);
    }
};

//再來一個SayingAge的構造函數
function SayingAge(name,age){
    this.name = name;
    this.age = age;
    this.saying = big.saying.bind(this);
}

//實例化一個對象genius
var genius = new SayingAge('tiancai',18);
//調用genius的saying方法
genius.saying();//打印結果爲tiancai age: 18

        構造函數SayingAge就是將big的saying方法拿過來，並將saying函數裏面的this指向改成本身的this指向（指向實例化的對象）。

        若是想不僅僅是bind了一個函數的this指向，還想執行它，舉個call的例子（apply只是將參數放進數組）：

//先來一個對象big吧
var big = {
    name:'BaBa',
    age:50,
    saying:function (sex){
        console.log(this.name,'age:',this.age,'sex:',sex);
    }
};
//再來一個small對象
var small = {
    name:'ErZi',
    age:18
};
//借用big的saying方法看看small的saying是什麼
big.saying.call(small,'male');//打印結果爲ErZi age: 18 sex: male

        固然了，這個方法並無給small添加了saying方法，只不過調用了big的saying方法，並將裏面的this指向small而已。

        相信你們對這三個方法的應用都很輕鬆掌握了。