深入理解call,apply最蕾,bind

call與apply的語法:

  • fun.call(thisArg[, arg1[, arg2[, ...]]])依溯。thisArg是函數(shù)運行時候指定的this,之后是執(zhí)行函數(shù)傳入的參數(shù)列表瘟则。
  • fun.apply(thisArg[, argsArray])黎炉。thisArg作用同上,不同call的是傳入的是一個參數(shù)的數(shù)組對象醋拧。

總結(jié)一下call與apply的作用:

  • 調(diào)用函數(shù)慷嗜。
  • 改變this的指向淀弹。

最重要的是,我們可以衍生出一個作用:借用庆械,借用薇溃,借用。

我們來看一下一個例子:

  • 求出數(shù)組arr=[1,7,10,5,0]中最大的值缭乘,一般可以選擇排序或者借個變量判斷痊焊。當然,我們也會想到Math.max()忿峻,但是薄啥,這個方法不接受數(shù)組,這個時候就可以使用apply去借用這個函數(shù)逛尚。
var arr=[1,7,10,5,0]
//這里this沒有任何意義
Math.max.apply(null,arr)//10
  • 再來一個例子垄惧,我們知道document.getElementByTagName()獲取的是一個類數(shù)組對象,不能使用數(shù)組的push,pop之類的方法绰寞,這時候可以用借用數(shù)組的slice(分割數(shù)組)的方法進行轉(zhuǎn)化到逊。
//先往頁面放幾個li
var lis=document.getElementsByTagName('li');
var arrLis = [].slice.call(lis)//或者Array.prototype.slice.call(lis)
console.log(arrLis.length);
arrLis.pop();
console.log(arrLis.length)

效果可看這里

  • 又或者我們有一個對象,想要用另一個對象去調(diào)用他的屬性方法滤钱。就可以這樣觉壶。
  function Animal (age){
        this.age=age;
  }
  function Cat(color,age){
      this.color=color;

      Animal.call(this,age)
  }
  var cat1 = new Cat('white',2)
  console.log(cat1.age)

我們再來說一說bind();

  • fun.bind(thisArg[, arg1[, arg2[, ...]]]),thisArg件缸,this的指向(使用new 調(diào)用的時候無效),之后的參數(shù)是一個參數(shù)列表铜靶。

MDN解釋

bind() 函數(shù)會創(chuàng)建一個新函數(shù)(稱為綁定函數(shù)),新函數(shù)與被調(diào)函數(shù)(綁定函數(shù)的目標函數(shù))具有相同的函數(shù)體(在 ECMAScript 5 規(guī)范中內(nèi)置的call
屬性)他炊。當目標函數(shù)被調(diào)用時 this 值綁定到 bind() 的第一個參數(shù)争剿,該參數(shù)不能被重寫。綁定函數(shù)被調(diào)用時痊末,bind() 也接受預設(shè)的參數(shù)提供給原函數(shù)蚕苇。一個綁定函數(shù)也能使用new
操作符創(chuàng)建對象:這種行為就像把原函數(shù)當成構(gòu)造器。提供的 this 值被忽略凿叠,同時調(diào)用時的參數(shù)被提供給模擬函數(shù)涩笤。

現(xiàn)在讓我們看個栗子:

  • 我們再使用原型對象綁定事件的時候通常都會把this賦值給self,_this...。但是我們可以使用bind()來設(shè)置得更好:
//先給頁面來個btn盒件;
function Btn (target) {
      this.target=target;
      this.addEvent();
}
Btn.prototype.addEvent = function(){
  this.target.onclick=function(){
    //這里的this變成函數(shù)外面的this了
      console.log(this.target.id)
      
   }.bind(this)
}
new Btn(document.querySelector('#btn'))

最后說一下3者的區(qū)別蹬碧;

前2者call與apply調(diào)用函數(shù):func.call(thisArg),func.apply(thisArg)。
而bind與上面2者不同:func.bind(thisArg)()履恩;(它的后面多了一個括號锰茉,也就是說bind()方法,不能調(diào)用函數(shù))

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末切心,一起剝皮案震驚了整個濱河市飒筑,隨后出現(xiàn)的幾起案子片吊,更是在濱河造成了極大的恐慌,老刑警劉巖协屡,帶你破解...
    沈念sama閱讀 206,723評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件俏脊,死亡現(xiàn)場離奇詭異,居然都是意外死亡肤晓,警方通過查閱死者的電腦和手機爷贫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來补憾,“玉大人漫萄,你說我怎么就攤上這事∮遥” “怎么了腾务?”我有些...
    開封第一講書人閱讀 152,998評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長削饵。 經(jīng)常有香客問我岩瘦,道長,這世上最難降的妖魔是什么窿撬? 我笑而不...
    開封第一講書人閱讀 55,323評論 1 279
  • 正文 為了忘掉前任启昧,我火速辦了婚禮,結(jié)果婚禮上劈伴,老公的妹妹穿的比我還像新娘密末。我一直安慰自己,他們只是感情好宰啦,可當我...
    茶點故事閱讀 64,355評論 5 374
  • 文/花漫 我一把揭開白布苏遥。 她就那樣靜靜地躺著,像睡著了一般赡模。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上师抄,一...
    開封第一講書人閱讀 49,079評論 1 285
  • 那天漓柑,我揣著相機與錄音,去河邊找鬼叨吮。 笑死辆布,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的茶鉴。 我是一名探鬼主播锋玲,決...
    沈念sama閱讀 38,389評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼涵叮!你這毒婦竟也來了惭蹂?” 一聲冷哼從身側(cè)響起伞插,我...
    開封第一講書人閱讀 37,019評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎盾碗,沒想到半個月后媚污,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體馅笙,經(jīng)...
    沈念sama閱讀 43,519評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡珍特,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,971評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了盟劫。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片航缀。...
    茶點故事閱讀 38,100評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡商架,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出芥玉,到底是詐尸還是另有隱情蛇摸,我是刑警寧澤,帶...
    沈念sama閱讀 33,738評論 4 324
  • 正文 年R本政府宣布飞傀,位于F島的核電站皇型,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏砸烦。R本人自食惡果不足惜弃鸦,卻給世界環(huán)境...
    茶點故事閱讀 39,293評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望幢痘。 院中可真熱鬧唬格,春花似錦、人聲如沸颜说。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽门粪。三九已至喊积,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間玄妈,已是汗流浹背乾吻。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留拟蜻,地道東北人绎签。 一個月前我還...
    沈念sama閱讀 45,547評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像酝锅,于是被迫代替她去往敵國和親诡必。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,834評論 2 345

推薦閱讀更多精彩內(nèi)容