javascript中apply、call和bind的區別

標籤：

在JS中，這三者都是用來改變函數的this對象的指向的，他們有什麼樣的區別呢。
在說區別之前還是先總結一下三者的相似之處：
1、都是用來改變函數的this對象的指向的。
2、第一個參數都是this要指向的對象。
3、都可以利用後續參數傳參。
那麼他們的區別在哪裡的，先看一個例子。

        var melon = {            name : ‘melon‘,            sex : ‘女‘,            age : ‘2‘,            say : function (school,grade){                alert( ‘我是‘ + this.sex + ‘生,我今年‘ + this.age + ‘歲了‘)            }        }        var little = {            name : ‘little‘,            sex : ‘男‘,            age : ‘1‘                }

        melon.say();

 

本身沒什麼好說的，顯示的肯定是我是女生，我今年一歲了。
那麼如何用melon的say方法來顯示little的資料呢。
對於call可以這樣：

melon.say.call(little);

對於apply可以這樣：

melon.say.apply(little);

而對於bind來說需要這樣：

melon.say.bind(little)();

如果直接寫melon.say.bind(little)是不會有任何結果的，看到區別了嗎？call和apply都是對函數的直接調用，而bind方法返回的仍然是一個函數，因此後面還需要()來進行調用才可以。
那麼call和apply有什麼區別呢？我們把例子稍微改寫一下。

        var melon = {            name : ‘melon‘,            sex : ‘女‘,            age : ‘2‘,            say : function (school,grade){                alert( ‘我是‘ + this.sex + ‘生,我今年‘ + this.age + ‘歲了,我在‘ + school +‘上‘ + grade)            }        }        var little = {            name : ‘little‘,            sex : ‘男‘,            age : ‘1‘                }

可以看到say方法多了兩個參數，我們通過call/apply的參數進行傳參。

對於call來說是這樣的

melon.say.call(little,‘實驗小學‘,‘一年級‘);

而對於apply來說是這樣的

melon.say.apply(little,[‘第一小學‘,‘二年級‘]);

看到區別了嗎，call後面的參數與say方法中是一一對應的，而apply的第二個參數是一個數組，數組中的元素是和say方法中一一對應的，這就是兩者最大的區別。
那麼bind怎麼傳參呢？它可以像call那樣傳參。

melon.say.bind(little,‘實驗小學‘,‘一年級‘)();

但是由於bind返回的仍然是一個函數，所以我們還可以在調用的時候再進行傳參。

melon.say.bind(little)(‘環城小學‘,‘三年級‘);

 

javascript中apply、call和bind的區別