javascript中call,apply,bind的區(qū)別詳解
在JS中,這三者都是用來(lái)改變函數(shù)的this對(duì)象的指向的,他們有什么樣的區(qū)別呢。
在說(shuō)區(qū)別之前還是先總結(jié)一下三者的相似之處:
1、都是用來(lái)改變函數(shù)的this對(duì)象的指向的。
2、第一個(gè)參數(shù)都是this要指向的對(duì)象。
3、都可以利用后續(xù)參數(shù)傳參。
那么他們的區(qū)別在哪里的,先看一個(gè)例子。
var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + " , " + this.gender + " ,今年" + this.age); } } var xh = { name : "小紅", gender : "女", age : 18 } xw.say();
顯示的肯定是小王 , 男 , 今年24。
那么如何用xw的say方法來(lái)顯示xh的數(shù)據(jù)呢。
對(duì)于call可以這樣:
xw.say.call(xh);
對(duì)于apply可以這樣:
xw.say.apply(xh);
而對(duì)于bind來(lái)說(shuō)需要這樣:
xw.say.bind(xh)();
如果直接寫(xiě)xw.say.bind(xh)是不會(huì)有任何結(jié)果的,看到區(qū)別了嗎?call和apply都是對(duì)函數(shù)的直接調(diào)用,而bind方法返回的仍然是一個(gè)函數(shù),因此后面還需要()來(lái)進(jìn)行調(diào)用才可以。
那么call和apply有什么區(qū)別呢?我們把例子稍微改寫(xiě)一下。
var xw = { name : "小王", gender : "男", age : 24, say : function(school,grade) { alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade); } } var xh = { name : "小紅", gender : "女", age : 18 }
可以看到say方法多了兩個(gè)參數(shù),我們通過(guò)call/apply的參數(shù)進(jìn)行傳參。
對(duì)于call來(lái)說(shuō)是這樣的
xw.say.call(xh,"實(shí)驗(yàn)小學(xué)","六年級(jí)");
而對(duì)于apply來(lái)說(shuō)是這樣的
xw.say.apply(xh,["實(shí)驗(yàn)小學(xué)","六年級(jí)"]);
看到區(qū)別了嗎,call后面的參數(shù)與say方法中是一一對(duì)應(yīng)的,而apply的第二個(gè)參數(shù)是一個(gè)數(shù)組,數(shù)組中的元素是和say方法中一一對(duì)應(yīng)的,這就是兩者最大的區(qū)別。
那么bind怎么傳參呢?它可以像call那樣傳參。
xw.say.bind(xh,"實(shí)驗(yàn)小學(xué)","六年級(jí)")();
但是由于bind返回的仍然是一個(gè)函數(shù),所以我們還可以在調(diào)用的時(shí)候再進(jìn)行傳參。
xw.say.bind(xh)("實(shí)驗(yàn)小學(xué)","六年級(jí)");
以上就是javascript中call,apply,bind的區(qū)別詳解的詳細(xì)內(nèi)容,更多關(guān)于JavaScript call,apply,bind的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
詳解webpack引入第三方庫(kù)的方式以及注意事項(xiàng)
這篇文章主要介紹了詳解webpack引入第三方庫(kù)的方式以及注意事項(xiàng),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01js實(shí)現(xiàn)一個(gè)頁(yè)面多個(gè)倒計(jì)時(shí)的3種方法
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)一個(gè)頁(yè)面多個(gè)倒計(jì)時(shí)的3種方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02純js實(shí)現(xiàn)div內(nèi)圖片自適應(yīng)大小(已測(cè)試,兼容火狐)
純js實(shí)現(xiàn)在img圖片大小未知,div大小未知的情況下,讓圖片自適應(yīng)大小,需要的朋友可以參考下2014-06-06javascript 中關(guān)于array的常用方法詳解
這篇文章主要介紹了javascript 中關(guān)于array的常用方法的相關(guān)資料,需要的朋友可以參考下2017-05-05JS實(shí)現(xiàn)生成由字母與數(shù)字組合的隨機(jī)字符串功能詳解
這篇文章主要介紹了JS實(shí)現(xiàn)生成由字母與數(shù)字組合的隨機(jī)字符串功能,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript生成隨機(jī)字符串的方法及相關(guān)優(yōu)化操作技巧,需要的朋友可以參考下2018-05-05JavaScript如何動(dòng)態(tài)監(jiān)聽(tīng)DOM元素高度詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript如何動(dòng)態(tài)監(jiān)聽(tīng)DOM元素高度,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-07-07