JS中call()和apply()的功能及用法實(shí)例分析
本文實(shí)例講述了JS中call()和apply()的功能及用法。分享給大家供大家參考,具體如下:
1.call()和apply()的作用
首先引出問(wèn)題:用call()和apply()的目的是什么?
來(lái)看個(gè)例子,在javascript OOP中,我們經(jīng)常會(huì)這樣定義:
function cat(){ } cat.prototype={ food:"fish", say: function(){ alert("I love "+this.food); } } var blackCat = new cat; blackCat.say();
但是如果我們有一個(gè)對(duì)象whiteDog = {food:"bone"}
,我們不想對(duì)它重新定義say方法,那么我們可以通過(guò)call或apply用blackCat的say方法:blackCat.say.call(whiteDog);
所以,可以看出call和apply是為了動(dòng)態(tài)改變this而出現(xiàn)的,當(dāng)一個(gè)object沒(méi)有某個(gè)方法,但是其他的有,我們可以借助call或apply用其它對(duì)象的方法來(lái)操作。
在實(shí)際中用的比較多的是,通過(guò)document.getElementsByTagName
選擇的dom 節(jié)點(diǎn)是一種類(lèi)似array的對(duì)象。它不能應(yīng)用Array下的push,pop等方法。我們可以通過(guò):
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
這樣domNodes就可以應(yīng)用Array下的所有方法了。
2.call()和apply()的區(qū)別
首先apply的定義如下:
- apply方法能劫持另外一個(gè)對(duì)象的方法,繼承另外一個(gè)對(duì)象的屬性
- Function.apply(obj,args)方法能接收兩個(gè)參數(shù),第一個(gè)參數(shù)是在其中運(yùn)行函數(shù)的作用域,另一個(gè)是參數(shù)數(shù)組。其中,第二個(gè)參數(shù)可以是數(shù)組,也可以是arguments對(duì)象
- obj:這個(gè)對(duì)象將代替Function類(lèi)里this對(duì)象
- args:這個(gè)是數(shù)組,它將作為參數(shù)傳給Function(args–>arguments)
apply()
的用法
//定義一個(gè)人類(lèi) function Person(name,age){ this.name = name; this.age = age; } //定義一個(gè)學(xué)生類(lèi) function Student(name,age,grade){ Person.apply(this,arguments);//傳入arguments對(duì)象 //Person.apply(this,[num1,num2]);//傳入數(shù)組 this.grade = grade; } //創(chuàng)建一個(gè)學(xué)生類(lèi) var student = new Student('A','10','一年級(jí)'); //測(cè)試 console.log('name:'+student.name+'age:'+student.age+'grade:'+student.grade);
學(xué)生類(lèi)里沒(méi)有給name和age屬性賦值啊,為什么又存在這兩個(gè)屬性的值呢,這個(gè)就是apply的神奇之處。
分析:Person.apply(this,arguments);
- this:代表的是student,表示將Person中的this指向student。
- arguments:是一個(gè)數(shù)組,在例子中表示[‘A','10','一年級(jí)'];
通俗一點(diǎn)講就是:用student去執(zhí)行Person這個(gè)類(lèi)里面的內(nèi)容,在Person這個(gè)類(lèi)里面存在this.name
等之類(lèi)的語(yǔ)句,這樣就講屬性創(chuàng)建到了student對(duì)象里面.
apply()
和call()
的作用是一樣的,他們的區(qū)別僅在于接收參數(shù)的方式不同,call()
需要把參數(shù)一個(gè)個(gè)列出來(lái)。
call()的用法
在Student函數(shù)里面可以將apply中修改成如下:
Person.call(this,name,age);
3.什么情況下用apply(),什么情況下用call()
至于是使用apply()
還是call()
,取決于采取那種給函數(shù)傳遞參數(shù)的方式最方便。
如果打算直接傳入arguments對(duì)象,或者是數(shù)組,并且參數(shù)列表相同則使用apply()
;否則,選擇call()
可能更合適。
例:apply示例里面?zhèn)鬟f了參數(shù)arguments,并且在調(diào)用Person的時(shí)候參數(shù)的列表是對(duì)應(yīng)一致的,也就是Person和Student的參數(shù)列表前兩位是一致的,就可以采用apply。
如果我的Person的參數(shù)列表是這樣的(age,name)而Student的參數(shù)列表是(name,age,grade),這樣的就可以用call來(lái)實(shí)現(xiàn)了Person.call(this,age,name,grade);
關(guān)于apply()的應(yīng)用可以參考://www.dbjr.com.cn/article/164140.htm
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專(zhuān)題:《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript字符與字符串操作技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- 原生js如何實(shí)現(xiàn)call,apply以及bind
- javascript中call,apply,bind的區(qū)別詳解
- Javascript call及apply應(yīng)用場(chǎng)景及實(shí)例
- JS call()及apply()方法使用實(shí)例匯總
- JS apply用法總結(jié)和使用場(chǎng)景實(shí)例分析
- JavaScript中的this/call/apply/bind的使用及區(qū)別
- JavaScript函數(shù)Call、Apply原理實(shí)例解析
- javascript中call,apply,callee,caller用法實(shí)例分析
- JS中apply()的應(yīng)用實(shí)例分析
- 分析ES5和ES6的apply區(qū)別
相關(guān)文章
教你用javascript實(shí)現(xiàn)隨機(jī)標(biāo)簽云效果_附代碼
下面小編就為大家?guī)?lái)一篇教你用javascript實(shí)現(xiàn)隨機(jī)標(biāo)簽云效果_附代碼。小編覺(jué)得很實(shí)用,現(xiàn)在分享給大家。給大家一個(gè)參考2016-03-03關(guān)于Google發(fā)布的JavaScript代碼規(guī)范你要知道哪些
代碼規(guī)范并不是一種編寫(xiě)正確JavaScript代碼的規(guī)則,而是為了保持源代碼編寫(xiě)模式一致的一種選擇。這篇文章給大家介紹了關(guān)于Google發(fā)布的JavaScript代碼規(guī)范你要知道哪些,感興趣的朋友一起看看吧2018-04-04微信開(kāi)發(fā) 消息推送實(shí)現(xiàn)代碼
這篇文章主要介紹了微信開(kāi)發(fā) 消息推送實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10微信小程序登錄數(shù)據(jù)解密及狀態(tài)維持實(shí)例詳解
這篇文章主要介紹了微信小程序登錄數(shù)據(jù)解密及狀態(tài)維持,結(jié)合實(shí)例形式分析了微信小程序解密敏感信息及獲取session保持登陸狀態(tài)的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05JavaScript無(wú)阻塞加載和defer、async詳解
JS具有阻塞特性,當(dāng)瀏覽器在執(zhí)行js代碼時(shí),不能同時(shí)做其它事情,所有瀏覽器在下載JS的時(shí)候,會(huì)阻止一切其他活動(dòng),比如其他資源的下載,內(nèi)容的呈現(xiàn)等等。至到JS下載、解析、執(zhí)行完畢后才開(kāi)始繼續(xù)并行下載其他資源并呈現(xiàn)內(nèi)容。2017-02-02Bootstrap CSS組件之分頁(yè)(pagination)和翻頁(yè)(pager)
這篇文章主要介為大家詳細(xì)紹了Bootstrap CSS組件之分頁(yè)和翻頁(yè)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12