全面解析JavaScript中apply和call以及bind(推薦)
函數(shù)調(diào)用方法
在談?wù)揓avaScript中apply、call和bind這三兄弟之前,我想先說下,函數(shù)的調(diào)用方式有哪些:
•作為函數(shù)
•作為方法
•作為構(gòu)造函數(shù)
•通過它們的call()和apply()方法間接調(diào)用
前面的三種調(diào)用方法,我們都知道且不在這篇文章的討論范圍內(nèi),就不說了。
下面我們來說說這第四種調(diào)用方法
通過call()和apply()間接調(diào)用
其實(shí),我們可以將這兩個(gè)函數(shù)看做是某個(gè)對象的方法,通過調(diào)用方法的方式來間接調(diào)用函數(shù):
function f(){}
f.call(o);
f.apply(o);
call()和apply()的第一個(gè)參數(shù)是要調(diào)用函數(shù)的母對象,它是調(diào)用上下文,在函數(shù)體內(nèi)通過this來獲得對它的引用。
那么他們是一樣的,還是有區(qū)別的,還有bind方法呢?君莫急,下面詳細(xì)的解析他們?nèi)叩膮^(qū)別和聯(lián)系。
call()
call()方法給調(diào)用它的方法指定特定的this指針(習(xí)慣用語,不要和我糾結(jié)它的正確性)和參數(shù)。例如有這么一個(gè)函數(shù):
var fn = function (arg1, arg2) {
console.log(this, arg1, arg2);
}
我來調(diào)用它:
fn.call(null, 'Skylor', 'min'); //1
fn.call(undefined, 'Skylor', 'min'); //2
var fx = function() {}
fn.call(fx, 'Skylor', 'min'); //3
這三個(gè)call方法的返回值是什么呢?不廢話,請看:
1. null "Skylor" "min" 2. undefined "Skylor" "min" 3. fx "Skylor" "min"
真的是這樣嗎,機(jī)智的你,去瀏覽器控制臺(tái)小試了一下,我去,你這坑貨,不是這樣的:
chrome 1. Window "Skylor" "min" 2. Window "Skylor" "min" 3. fx "Skylor" "min"
好吧,你機(jī)智。但這已經(jīng)很好的說明了call方法了。(window很高級,微軟偷笑中...)
我們注意到call方法,第一個(gè)參數(shù)是指定this指針,后面每個(gè)參數(shù)指定需要的參數(shù),注意我用的是“每個(gè)”,這意味著你需要幾個(gè)參數(shù)就要想調(diào)用函數(shù)那樣,一個(gè)個(gè)參數(shù)寫進(jìn)去。
apply()
apply()是call()的兄弟啊,其他地方長的都一樣,都是男的,就一個(gè)地方不一樣。先看例子:
fn.apply(null, ['Skylor', 'min']); //1 fn.apply(fx, ['Skylor', 'min']); //2
哥們,你是不是寫錯(cuò)了,多了個(gè)中括號(hào)啊。不,不,不,這就是他和call長的不一樣的地方,它的第二個(gè)參數(shù)是個(gè)需要的參數(shù)Array。
bind()
bind()嘛,他們?nèi)齻€(gè)不是仨兄弟嘛,,這個(gè)我懂,blabla....不不不,它是和apply、call結(jié)拜的兄弟,不是親兄弟。
當(dāng)然,bind方法也是允許你指定this指針,但是它不是調(diào)用函數(shù),而是返回一個(gè)(或者說是拷貝)調(diào)用它的函數(shù)的函數(shù),并給這個(gè)函數(shù)指定特定的this指針和參數(shù)。慣例,例子說明一切:
var fnbound = fn.bind(null, 'Skylor', 'min');
這時(shí),fnbound是一個(gè)函數(shù),一個(gè)this指向null,參數(shù)為['Skylor', 'min']的另一個(gè)函數(shù)。調(diào)用之:
fnbound();
結(jié)果:
null, 'Skylor', 'min'
不要和我糾結(jié)Window的事了。。。。。
bind和其他兩個(gè)兄弟不一樣的地方,是,它不是調(diào)用函數(shù),而是返回一個(gè)新的函數(shù),同樣,它也是指定this指針和參數(shù)的,指定參數(shù)的方式和call一樣,是一個(gè)一個(gè)來的。
最后來一個(gè)例子唄:
var shoppingCart = (function(){
var _calculatePrice = function () {
return this.price * this.amount;
};
return {
calculatePrice : _calculatePrice
}
})();
var goods = {
name : ‘hammer',
price: 199,
amount : 2
};
shoppingCart.calculatePrice.call(goods);
到此結(jié)束。!
以上所述是小編給大家介紹的JavaScript中apply和call以及bind(推薦)的全部內(nèi)容,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- JavaScript函數(shù)之call、apply以及bind方法案例詳解
- JavaScript中call、apply、bind實(shí)現(xiàn)原理詳解
- 原生js如何實(shí)現(xiàn)call,apply以及bind
- javascript中call,apply,bind的區(qū)別詳解
- JavaScript中的this/call/apply/bind的使用及區(qū)別
- 如何使用50行javaScript代碼實(shí)現(xiàn)簡單版的call,apply,bind
- 詳解JS中的this、apply、call、bind(經(jīng)典面試題)
- 淺談JavaScript中的apply/call/bind和this的使用
- javascript中apply/call和bind的使用
- javascript中call,apply,bind函數(shù)用法示例
- Javascript中call,apply,bind方法的詳解與總結(jié)
- 實(shí)例講解JavaScript中call、apply、bind方法的異同
- Javascript中apply、call、bind的巧妙使用
- 深入理解JavaScript中的call、apply、bind方法的區(qū)別
- 關(guān)于JS中的apply,call,bind的深入解析
- javascript中apply、call和bind的使用區(qū)別
- JS 函數(shù)的 call、apply 及 bind 超詳細(xì)方法
相關(guān)文章
JavaScript如何實(shí)現(xiàn)元素全排列實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于JavaScript如何實(shí)現(xiàn)元素全排列的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
ES6中Array.includes()函數(shù)的用法
這篇文章主要介紹了ES6中Array.includes()函數(shù)的用法,需要的朋友可以參考下2017-09-09
javascript中的注釋使用與注意事項(xiàng)小結(jié)
在javascript中有兩種注釋方式,單行注釋與多行注釋。2011-09-09
element select下拉框編輯時(shí)回顯已經(jīng)刪除的數(shù)據(jù)操作代碼
今天做項(xiàng)目遇到一個(gè)棘手的問題,關(guān)于element select下拉框編輯時(shí)回顯問題,下面小編通過實(shí)例代碼介紹element select下拉框編輯時(shí)回顯已經(jīng)刪除的數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-05-05
javascript實(shí)現(xiàn)貪吃蛇游戲(娛樂版)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)貪吃蛇,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08
JavaScript實(shí)現(xiàn)讀取條碼中的二進(jìn)制數(shù)據(jù)
條碼是一種以機(jī)器可讀的可視形式表示數(shù)據(jù)的方法,我們可以從條碼獲取二進(jìn)制數(shù)據(jù),并通過不同方法去讀碼,下面我們就來看看如何實(shí)現(xiàn)讀取條碼中的二進(jìn)制數(shù)據(jù)吧2024-03-03

