摘要：只有兩個參數，并且第二個參數必須為數組，數組中的所有元素一一對應原函數的參數。語法語法語法調用調用后立即執行原函數。

call(),apply(),bind() 函數大家可能都有所了解，但是在平時搬磚過程中很可能或者基本沒用過，學過但都淡忘了。

但是在大量第三方的框架(庫)，甚至js自己都在 源碼中大量使用 call,apply 函數。所以今天和大家仔細討論下它們在 開發中的應用場景 。

他們的作用都是改變函數內部的this。

這三個函數都是函數對象的方法，也就是說只有函數才可以直接調用這些方法。

ps：call,apply,bing屬于this顯示綁定，還有好幾種其他的this綁定方式，感興趣的可以點這里。

參數： 三個函數的第一個參數都是需要綁定的 this。

call： 可以有n個參數，從第二個參數開始的所有參數都是原函數的參數。

`apply`：只有兩個參數，并且第二個參數必須為數組，數組中的所有元素一一對應原函數的參數。

`bind`： 只有一個參數，即要綁定的this。

    call 語法：  foo.call(this, arg1,arg2, ... ,argn );
    apply 語法： foo.apply(this, [ arg1,arg2, ... ,argn ] );
    bind 語法：  foo.bind(this);

調用：

call,apply： 調用后立即執行原函數。

`bind`： 調用后返回已經綁定好this的函數。

小例子一枚：

    function foo(a,b){
        console.log(a+b);
    }
    foo.call(null,"海洋","餅干");        // 海洋餅干  這里this指向不重要就寫null了
    foo.apply(null, ["海洋","餅干"] );   // 海洋餅干
    var fun = foo.bind(null);
    fun("海洋","餅干");                  // 海洋餅干

這是我們今天討論的主題，這三個函數如何應用？什么情況下使用？能改變this指向又能咋滴？

先考慮一個問題，如果你使用var arr = document.getElementsByTagName("li")獲取了5個li元素，你現在需要獲取其中的第2,3,4三個元素，你會怎么做？

這樣arr.slice(1,4);？ 啊哦，TypeError -- arr.slice is not a function(slice不是函數)，數組操作在日常搬磚中非常常見，我見過最傻的解決這個問題的方式是使用循環，將需要的元素一個個添加到一個新數組里0.0，下面我介紹的方法完全可以在實戰中使用，可以給你的代碼加分哦,非常方便簡潔(中高級前端程序員中，算是基本操作了)。

先要介紹一個概念( 偽數組 )，這也是為什么我們剛剛slice切割數組時出錯的原因： (對新手來說算是干貨了，知道的可以跳過)

什么是偽數組？( 字面的意思已經呼之欲出了 )

有length屬性

能按索引存儲數據

能像遍歷數組一樣來遍歷

不能使用數組的push()、slice()等方法

簡單來說就是可以像數組一樣操作的對象，但是沒有數組的方法。

js中存在大量偽數組，如 ：

1. function的arguments對象。
2. getElementsByName(),getElementsByTagName(),childNodes/children 等方法的返回值。
3. 還有比較常見的jquery,使用它獲取的元素也是偽數組。

回到原來的問題，如何截取偽數組中的元素：偽數組沒有這些方法，我們"借用"Array的slice不就行了

[].slice.call(arr,1,4);  // 推薦寫法

不想借用你可以直接給偽數組添加一個slice函數，如

arr.slice = [].slice;
arr.slice(1,4);

當然，"借用" 更方便，直接添加會導致偽數組對象"污染"。

如果可以隨意改變原對象，可以 直接將其轉成真正的數組對象。

[].slice.call(arr);

繼承方式多種多樣,我們現在討論的這種是其中很重要的一種實現方式，用call實現 js 構造函數繼承 。

單繼承

function person(name){
    this.name = name
}
function man(name){
    this.age = "男";
    person.call(this,name);              // 繼承 man
}
var me = new man("海洋餅干");

console.log(me.name,me.age);             // "海洋餅干" "男"

多繼承

function person(name){
    this.name = name
}
function man(name){
    this.age = "男";
}
function manProgrammer(name){
    this.girlfriend = null;
    person.call(this,name);  // 繼承 person
    man.call(this,name);     // 繼承 man
}
var me = new manProgrammer("海洋餅干");

console.log(me.name,me.age,me.girlfriend);   // "海洋餅干" "男" null

將一個對象強制且永久性綁定到函數的this上，使用call,apply或者其他的綁定方式都無法改變(除了new綁定，當然，可以手動擼一個new都無法改變的硬綁定)

直接看例子：

var fun ;
var obj = {
    a : 1,
    foo : function(){
        var _this = this;            //平時有沒有過這種寫法？ 為了防止this指向問題
                                     //將this賦值給一個變量,間接維持了this的安全性
       fun = function(){
            console.log(_this.a);
        }
    }
}
obj.foo();
fun();                 // 1

var obj1 = { a : 2}
obj.foo.call(obj1);    // 直接修改_this所綁定的值,boom了
fun();                 // 2

但是這種方法感覺上是在逃避問題，直接不使用this了 ? 這真的不是什么好的解決問題的態度。下面使用我們的bind來優化一下：

var fun ;
var obj = {
    a : 1,
    foo : function(){            // 不使用 _this， 避免無謂的變量聲明
        fun = function(){
            console.log(this.a);
        }.bind(this);            // 代碼很簡潔,很漂亮（b格）
    }
}
var obj1 = { a : 2}
obj.foo();
fun();             // 1
fun.call(obj1);    // 1  call ,apply等綁定 無法修改
                   // 這里和上面call的位置不同是因為this所處于不同的位置

這樣替代 _this 很規(zhuang)范(b)呢

ps：call,apply,bing屬于this顯示綁定，還有好幾種其他的this綁定方式，感興趣的可以點這里。

Math.max和min方法，接收多個參數，比較出極值，這里用到apply的一個默認功能：展開數組，傳入一個數組參數就可以默認將這個數組轉成一個個參數的形式賦給原函數

var num = [6,9,-3,-5];
console.log(Math.max.apply(Math,num)); // 9  等價  console.log(Math.max(6,9,-3,-5));
console.log(Math.min.apply(Math,num)); // -5 等價  console.log(Math.min(6,9,-3,-5));

合并數組常見有三種方式，1.循環 2.Array的concat() 3. 使用apply()合并

這里是使用最簡便的apply

var a = [1,2,3];
var b = [4,5,6];
[].push.apply(a,b);    // 借用數組的push方法 等價 a.push(4,5,6);
console.log(a);        // [1, 2, 3, 4, 5, 6]

覺得對你有幫助點個贊唄555

大家有什么實用點的黑科技歡迎私信評論 分享，我會貼上id和你的分享 >_<