函數(shù)調(diào)用方法

在談?wù)揓avaScript中apply、call和bind這三兄弟之前，我想先說(shuō)下，函數(shù)的調(diào)用方式有哪些：

•作為函數(shù)

•作為方法

•作為構(gòu)造函數(shù)

•通過(guò)它們的call()和apply()方法間接調(diào)用

前面的三種調(diào)用方法，我們都知道且不在這篇文章的討論范圍內(nèi)，就不說(shuō)了。

下面我們來(lái)說(shuō)說(shuō)這第四種調(diào)用方法

通過(guò)call()和apply()間接調(diào)用

其實(shí)，我們可以將這兩個(gè)函數(shù)看做是某個(gè)對(duì)象的方法，通過(guò)調(diào)用方法的方式來(lái)間接調(diào)用函數(shù)：

function f(){}
f.call(o);
f.apply(o); 

call()和apply()的第一個(gè)參數(shù)是要調(diào)用函數(shù)的母對(duì)象，它是調(diào)用上下文，在函數(shù)體內(nèi)通過(guò)this來(lái)獲得對(duì)它的引用。

那么他們是一樣的，還是有區(qū)別的，還有bind方法呢？君莫急，下面詳細(xì)的解析他們?nèi)叩膮^(qū)別和聯(lián)系。

call()

call()方法給調(diào)用它的方法指定特定的this指針（習(xí)慣用語(yǔ)，不要和我糾結(jié)它的正確性）和參數(shù)。例如有這么一個(gè)函數(shù)：

var fn = function (arg1, arg2) {
console.log(this, arg1, arg2); 
} 

我來(lái)調(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方法的返回值是什么呢？不廢話(huà)，請(qǐng)看：

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)很好的說(shuō)明了call方法了。（window很高級(jí)，微軟偷笑中...）

我們注意到call方法，第一個(gè)參數(shù)是指定this指針，后面每個(gè)參數(shù)指定需要的參數(shù)，注意我用的是“每個(gè)”，這意味著你需要幾個(gè)參數(shù)就要想調(diào)用函數(shù)那樣，一個(gè)個(gè)參數(shù)寫(xiě)進(jìn)去。

apply()

apply()是call()的兄弟啊，其他地方長(zhǎng)的都一樣，都是男的，就一個(gè)地方不一樣。先看例子：

fn.apply(null, ['Skylor', 'min']); //1
fn.apply(fx, ['Skylor', 'min']); //2 

哥們，你是不是寫(xiě)錯(cuò)了，多了個(gè)中括號(hào)啊。不，不，不，這就是他和call長(zhǎng)的不一樣的地方，它的第二個(gè)參數(shù)是個(gè)需要的參數(shù)Array。

bind()

bind()嘛，他們?nèi)齻€(gè)不是仨兄弟嘛，，這個(gè)我懂，blabla....不不不，它是和apply、call結(jié)拜的兄弟，不是親兄弟。

當(dāng)然，bind方法也是允許你指定this指針，但是它不是調(diào)用函數(shù)，而是返回一個(gè)（或者說(shuō)是拷貝）調(diào)用它的函數(shù)的函數(shù)，并給這個(gè)函數(shù)指定特定的this指針和參數(shù)。慣例，例子說(shuō)明一切：

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è)來(lái)的。

最后來(lái)一個(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(推薦)的全部?jī)?nèi)容，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論