DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript中call,apply,bind的用法對比分析
javascript中call,apply,bind的用法對比分析
編輯:關於JavaScript     

關於call,apply,bind這三個函數的用法,是學習javascript這門語言無法越過的知識點。下邊我就來好好總結一下它們三者各自的用法,及常見的應用場景。

首先看call這個函數,可以理解成"借用“,"請求"。想像一下如下的情景:你孤單一人漂泊在外,有急事想往家裡打電話,可是很不巧,手機欠費了,或者沒電了,或者掉坑裡了,總之你的手機就是用不成。可是你非打這個電話不可,於是你可以去借一下朋友的手機,或者借用一下鄰居的手機,或者公用電話,這樣呢,你就可以在自己沒有手機可用的情況下,完成打電話這個事情,而至於你是用誰的電話打的,就不重要了,反正和用你自己的手機打的電話是一樣的效果。call這個函數的初衷也和這個類似,下面我用代碼來模擬一下它的應用情景:

代碼如下:
    var frog = {
        name : 'frog',
        say  : function(){
            alert(this.name);
        }
    }
    var rabbit = {
        name : 'rabbit'
    }
    frog.say.call(rubbit) // rabbit

rubbit這個對象是個啞吧,但是他想要說出自己的名字,光憑它自己的能力,是不可能實現的,好在呢,它有一個叫frog的好基友,它可以說話。於是呢,rubbit就請求frog替它實現這個心願。frog.say.call()的第一個參數,一定是要填寫發出請求的人,律師喜歡稱為委托人。這裡是rubbit請求frog替它say名字,所以填寫rubbit。這樣一來,在say的時候,就會查找rubbit的name,而不是frog的name了。如果這裡填寫frog會是什麼樣子呢?這就好比是自己請求自己做某事,喂自己代鹽也是可以的。可以試一下:

代碼如下:
  var frog = {
        name : 'frog',
        say  : function(){
            alert(this.name);
        }
    }
    var rabbit = {
        name : 'rabbit'
    }
    frog.say.call(frog) // frog

自己喂自己袋鹽,肯定是說自己的名字啦,這完全沒有什麼意外的。下面我們來看看call的經典用法:

代碼如下:
//把參數轉化成真正的數組對象
function frog(){
    var arr = [].slice.call(arguments);
    console.log(arguments.slice,arr.slice)
        //  undefined function slice() { [native code] }
}
    frog(1,2,3,4)

能過這麼一call,我們就可以把arguments對象當成數組對象來使用了。關於call的用法很多,翻開jquery的源碼,很容易就能找到很多運用的地方。在此不一一列舉了,還是回到我們前面的情景,借電話這種事太簡單了,打完電話,肯定還想捎點什麼東西回去,畢竟這麼多年漂泊在外,沒有好好孝敬下老人,買點當地的特產回去,肯定是極好的。可是外邊的生活壓力是如此之大,每天除了上班還要加班,如果請假的話,不但工資要扣,還要花費不少的路費,這些錢加起來,估計都夠老人在家裡一年的用度了。想想不劃算,於是又想到call這個函數,請它幫忙,順道帶回去是非常明智的選擇,而且它不收費,不限量,不限重,有多少,帶多少。我再次用代碼來演示一下:

代碼如下:
  var frog = {
        name : 'frog',
        send  : function(money,food,milk,suagate){
            alert(money+food+milk+suagate);
        }
    }
    var rabbit = {
        name : 'rabbit'
    }
    frog.send.call(rubbit,'money','food','milk','suagate')

如果你有錢任性,甚至可以把iphone6 plus什麼的也寄幾個回去。.^_^.

說到這裡call就差不多結束了,我也不知道上面的情景劇,是不是讓你明白了call是怎麼回事,如果只是勾起了你的思鄉之情,那我表示抱歉。

call還有一個同父異母的兄弟,叫apply,如果弄明白了call的用法,那麼apply其實也是一回事,唯一的區別呢,就是apply不喜歡傳東西的時候,一個東西打一個包,顯得很麻煩不說,還不環保。於是他就提供一個裝東西的大箱子,你把你要傳的東西全放在它提供的箱子裡就好了。這個大箱子,就是一個數組。上面的例子,用apply來做的話,就是這樣子的:

代碼如下:
var frog = {
        name : 'frog',
        send  : function(money,food,milk,suagate){
            alert(money+food+milk+suagate);
        }
    }
    var rabbit = {
        name : 'rabbit'
    }
                //注意參數的區別
    frog.send.apply(rubbit,['money','food','milk','suagate'])

以上就是apply,call的前世今生了。可是萬萬沒想到,apply和call的爸爸,前些年搞房地產發了財,在外邊還有一個叫bind 的私生子。雖然比call和apply這兩個哥哥晚出道幾年,但是能力也不容小視。只不過,他的身份,在某些地方,是不承認的。比如IE6。下面我還是用代碼來演示下他的本領:

代碼如下:
    var name = 'rubbit';
    var frog = {
        name : 'frog',
        say : function(){
            setTimeout(function(money,milk){
                alert(this.name+money+milk)
            }.bind(this,'money','milk'),1000)
        }
    }
    frog.say();

通過對比發現,bind可以直接連在function(){}後面用。相當於把call 和 apply 都省了,直接在函數後面指定委托人和要傳遞的參數。從傳參的風格上來說,更像call一些。

關於bind ,我們再來看一段經典的用法:

代碼如下:
var obj = {
    name : 'frog'
}
document.addEventListener('click',function(){
    alert(this.name); // frog
}.bind(obj),false);

總結一下,apply,call,bind,這三兄弟的相同點是:

 1. 第一個參數都是邦定作用域,即是在誰的地盤上做事。

 2. 都可以傳遞參數

不同點是:

  apply,call 兼容性更好,bind某些低版本的浏覽器不支持。

  apply 傳遞的參數必須是用數組進行包裝的,而 call 和 bind 則是將要傳遞的參數一一列出。

大家是否對call,apply,bind三個函數的用法有了更深入的認識了呢,希望本文能對大家有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved