首頁 > web前端 > js教程 > 主體

javascript中call,apply,bind的用法比較分析_基礎知識

WBOY
發布: 2016-05-16 16:14:29
原創
1033 人瀏覽過

關於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三個函數的用法有了更深入的認識了呢,希望本文能對大家有幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!