400-650-7353
您所在的位置:首頁(yè) > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎(chǔ)知識(shí)】call和apply的作用

【W(wǎng)eb前端基礎(chǔ)知識(shí)】call和apply的作用

  • 發(fā)布: Web前端培訓(xùn)
  • 來源:
  • 2021-07-26 15:31:02
  • 閱讀()
  • 分享
  • 手機(jī)端入口

this 在不同的地方有不同的含義:

1. 在事件處理函數(shù)中,this指向觸發(fā)函數(shù)的對(duì)象;

2. 在普通函數(shù)中,this指向window;

3. 當(dāng)作函數(shù)作為某個(gè)對(duì)象的方法調(diào)用時(shí),this指向那個(gè)對(duì)象;

4. 在構(gòu)造函數(shù)中this指向當(dāng)前實(shí)例化對(duì)象;

【W(wǎng)eb前端基礎(chǔ)知識(shí)】call和apply的作用

當(dāng)在一些情況中我們想要更改this的指向,這里就可以使用 call 與 apply 來改變 this 的指向,讓 this 指向特定的對(duì)象。

call 與 apply 的作用都是改變 this 的指向,基本的操作都是一樣的。其使用方法如下:

call(this指向,參數(shù)1,參數(shù)2...)

apply(this指向,[參數(shù)1,參數(shù)2...])

可以看到他們的傳參方式是不一樣的。想要修改this 的指向,那么必然有一個(gè)this修改后的指向,而函數(shù)必然后關(guān)系到傳參問題:call方法可以傳給該函數(shù)的參數(shù)分別作為自己的多個(gè)參數(shù),而apply方法必須將傳給該函數(shù)的參數(shù)合并成一個(gè)數(shù)組作為自己的一個(gè)參數(shù)。

  1. function sum(a,b){ 
  2. console.log(a+b);     // 30 
  3.        console.log(this);  // 原本指向window,現(xiàn)在指向sum了 
  4. sum.call(sum,10,20) 

通過使用call方法,使得sum函數(shù)中原本指向window的this現(xiàn)在指向了sum自身,當(dāng)然this的指向自己想指向哪里都可以。

另外還可以改變對(duì)象的this

  1. var obj1 = { 
  2.     "name":"韓梅梅", 
  3.     "getName":function(){ 
  4.         console.log(this.name); 
  5.     } 
  6. obj2 = { 
  7.     "name":"李雷" 
  8. obj1.getName();         // 韓梅梅 
  9. obj1.getName.call(obj2);// 李雷 

可以看到在obj1第一次調(diào)用getName方法時(shí),結(jié)果為韓梅梅,因?yàn)檎{(diào)用getName時(shí)this指向obj1自身。在第二次調(diào)用getName方法時(shí),使用了call方法改變了this的指向,讓this指向了obj2,故打印時(shí)this.name成了obj2.name,為李雷。

改變this一般用于借用別的對(duì)象的方法,當(dāng)想使用某個(gè)自己沒有而別的對(duì)象有的方法時(shí),就可以通過改變this的指向來借用別對(duì)象的方法。如:

  1. var n = {};  
  2. console.log(n.toString()); // [object Object]  
  3. // 對(duì)象的toString方法可以獲取數(shù)據(jù)的具體類型,若是也想獲取數(shù)組的具體數(shù)據(jù)類型可以借用對(duì)象的該方法。 
  4. console.log(Object.prototype.toString.call([]));    // [object Array] 

apply的使用和call的使用方式是一樣的,只是在于向函數(shù)傳參時(shí)是以一個(gè)數(shù)組的形式,就如上面例子中使用call改變函數(shù)sum的指向時(shí),若是使用apply則為:sum.apply(sum,[10,20]),第一個(gè)為改變后的this指向,第二個(gè)參數(shù)為數(shù)組,若在進(jìn)行傳參時(shí)第二個(gè)參數(shù)的格式不對(duì),會(huì)報(bào)錯(cuò)。

apply的巧妙用法:

使用Math.max可以得到數(shù)組中最大的一項(xiàng)

因?yàn)镸ath.max不支持Math.max([參數(shù)1,參數(shù)2...])也就是數(shù)組,但是它支持Math.max (參數(shù)1,參數(shù)2...)的形式,所以可以根據(jù)apply的特點(diǎn)來解決這個(gè)問題,因?yàn)閯偤胊pply的第二個(gè)參數(shù)為一個(gè)數(shù)組,可以將這個(gè)數(shù)組作為apply的第二個(gè)參數(shù)傳入,這樣apply會(huì)將一個(gè)數(shù)組轉(zhuǎn)換為一個(gè)參數(shù)接一個(gè)參數(shù)的方式傳遞給方法。

  1. var arr = [6,3,8,9,12,5] 
  2. console.log(Math.max.apply(1,arr)); // 12 

這樣就輕易的可以得到一個(gè)數(shù)組中的最大項(xiàng)。

這塊在調(diào)用的時(shí)候第一個(gè)參數(shù)給了1,這是因?yàn)闆]有對(duì)象去調(diào)用這個(gè)方法,我只需要用這個(gè)方法幫我運(yùn)算,得到返回的結(jié)果就行,所以直接傳遞了一個(gè)1過去。用這種方法也可以實(shí)現(xiàn)得到數(shù)組中的最小項(xiàng):Math.min.apply(1,array)

文章“【W(wǎng)eb前端基礎(chǔ)知識(shí)】call和apply的作用”已幫助

>>本文地址:http://hqfphsz.com/zhuanye/2021/69433.html

THE END  

聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。

1 您的年齡

2 您的學(xué)歷

3 您更想做哪個(gè)方向的工作?

獲取測(cè)試結(jié)果
  • 大前端大前端
  • 大數(shù)據(jù)大數(shù)據(jù)
  • 互聯(lián)網(wǎng)營(yíng)銷互聯(lián)網(wǎng)營(yíng)銷
  • JavaJava
  • Linux云計(jì)算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運(yùn)營(yíng)全域電商運(yùn)營(yíng)
  • 軟件測(cè)試軟件測(cè)試
  • 室內(nèi)設(shè)計(jì)室內(nèi)設(shè)計(jì)
  • 平面設(shè)計(jì)平面設(shè)計(jì)
  • 電商設(shè)計(jì)電商設(shè)計(jì)
  • 網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)
  • 全鏈路UI/UE設(shè)計(jì)UI設(shè)計(jì)
  • VR/AR游戲開發(fā)VR/AR
  • 網(wǎng)絡(luò)安全網(wǎng)絡(luò)安全
  • 新媒體與短視頻運(yùn)營(yíng)新媒體
  • 直播帶貨直播帶貨
  • 智能機(jī)器人軟件開發(fā)智能機(jī)器人
 

快速通道fast track

近期開班時(shí)間TIME