国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

javascript中call,apply,bind的用法對比分析

2019-11-20 13:10:13
字體:
來源:轉載
供稿:網友

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

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 宜州市| 元氏县| 勐海县| 肃南| 绵阳市| 冀州市| 连城县| 北海市| 高陵县| 阳城县| 民丰县| 通海县| 普定县| 长沙市| 城口县| 淮阳县| 疏勒县| 兴安县| 公主岭市| 扎囊县| 武清区| 淳安县| 安乡县| 桑日县| 南溪县| 新兴县| 清远市| 靖西县| 南城县| 太湖县| 蓝田县| 岳阳市| 黎川县| 景泰县| 宣汉县| 油尖旺区| 乳山市| 西贡区| 新民市| 高邮市| 安陆市|