javascript中call,apply,bind的區(qū)別詳解
在JS中，這三者都是用來改變函數(shù)的this對象的指向的，他們有什么樣的區(qū)別呢。
在說區(qū)別之前還是先總結(jié)一下三者的相似之處：
1、都是用來改變函數(shù)的this對象的指向的。
2、第一個參數(shù)都是this要指向的對象。
3、都可以利用后續(xù)參數(shù)傳參。
那么他們的區(qū)別在哪里的，先看一個例子。
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方法來顯示xh的數(shù)據(jù)呢。
對于call可以這樣：
xw.say.call(xh);
對于apply可以這樣：
xw.say.apply(xh);
而對于bind來說需要這樣：
xw.say.bind(xh)();
如果直接寫xw.say.bind(xh)是不會有任何結(jié)果的，看到區(qū)別了嗎？call和apply都是對函數(shù)的直接調(diào)用，而bind方法返回的仍然是一個函數(shù)，因此后面還需要()來進(jìn)行調(diào)用才可以。
那么call和apply有什么區(qū)別呢？我們把例子稍微改寫一下。
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方法多了兩個參數(shù)，我們通過call/apply的參數(shù)進(jìn)行傳參。
對于call來說是這樣的
xw.say.call(xh,"實驗小學(xué)","六年級");
而對于apply來說是這樣的
xw.say.apply(xh,["實驗小學(xué)","六年級"]);
看到區(qū)別了嗎，call后面的參數(shù)與say方法中是一一對應(yīng)的，而apply的第二個參數(shù)是一個數(shù)組，數(shù)組中的元素是和say方法中一一對應(yīng)的，這就是兩者最大的區(qū)別。
那么bind怎么傳參呢？它可以像call那樣傳參。
xw.say.bind(xh,"實驗小學(xué)","六年級")();
但是由于bind返回的仍然是一個函數(shù)，所以我們還可以在調(diào)用的時候再進(jìn)行傳參。
xw.say.bind(xh)("實驗小學(xué)","六年級");
以上就是javascript中call,apply,bind的區(qū)別詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript call,apply,bind的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了微信小程序sessionid不一致問題解決,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
js中symbol類型以及symbol的三大應(yīng)用場景詳解
Symbol是ES6新推出的一種基本類型,它表示獨一無二的值,它可以接受一個字符串作為參數(shù),帶有相同參數(shù)的兩個Symbol值不相等,這個參數(shù)只是表示Symbol值的描述而已,下面這篇文章主要給大家介紹了關(guān)于js中symbol類型以及symbol的三大應(yīng)用場景,需要的朋友可以參考下2022-09-09
js獲取觸發(fā)事件元素在整個網(wǎng)頁中的絕對坐標(biāo)(示例代碼)
這篇文章主要介紹了js獲取觸發(fā)事件元素在整個網(wǎng)頁中的絕對坐標(biāo)。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
js獲取select默認(rèn)選中的Option并不是當(dāng)前選中值
這篇文章主要介紹了js如何獲取select默認(rèn)選中的Option并不是當(dāng)前選中的值,需要的朋友可以參考下2014-05-05
js獲取對象為null的情況，想必很多的朋友都有遇到過吧，只要是js對字符串的解析跟對數(shù)字串的解析還是不太一樣，這是需要注意的地方2013-11-11
這篇文章主要為大家介紹了GoJs分組繪圖模板go.Group使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要為大家詳細(xì)介紹了如何通過原生JavaScript實現(xiàn)視頻截圖功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,需要的小伙伴可以參考一下2023-11-11
javascript判斷iphone/android手機橫豎屏模式的函數(shù)
iphone能很好的使用onorientationchange事件，但是android的onresize事件即使不旋轉(zhuǎn)也會觸發(fā)多次2011-12-12
本篇文章主要是對JS去掉第一個字符和最后一個字符的實現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
純javascript實現(xiàn)四方向文本無縫滾動效果
本文主要給大家分享了使用純javascript實現(xiàn)的可控制的四方向文本無縫滾動的代碼，效果非常不錯，有需要的小伙伴可以參考下。2015-06-06