JavaScript中的call和apply的用途以及區(qū)別

var func = function( a, b, c ){
 alert ( [ a, b, c ] ); // 

在這段代碼中，參數(shù) 1、2、3 被放在數(shù)組中一起傳入func函數(shù)，它們分別對(duì)應(yīng)func參數(shù)列表中的a、b、c。

call 傳入的參數(shù)數(shù)量不固定，跟apply 相同的是，第一個(gè)參數(shù)也是代表函數(shù)體內(nèi)的this 指向，從第二個(gè)參數(shù)開始往后，每個(gè)參數(shù)被依次傳入函數(shù)：

var func = function( a, b, c ){
 alert ( [ a, b, c ] ); // 

當(dāng)調(diào)用一個(gè)函數(shù)時(shí)，JavaScript 的解釋器并不會(huì)計(jì)較形參和實(shí)參在數(shù)量、類型以及順序上的區(qū)別，JavaScript 的參數(shù)在內(nèi)部就是用一個(gè)數(shù)組來表示的。從這個(gè)意義上說，apply比call的使用率更高，我們不必關(guān)心具體有多少參數(shù)被傳入函數(shù)，只要用apply 一股腦地推過去就可以了。call是包裝在apply上面的一顆語法糖，如果我們明確地知道函數(shù)接受多少個(gè)參數(shù)，而且想一目了然地表達(dá)形參和實(shí)參的對(duì)應(yīng)關(guān)系，那么也可以用call 來傳送參數(shù)。

call和apply的用途

1. 改變this 指向

call 和apply 最常見的用途是改變函數(shù)內(nèi)部的this 指向，我們來看個(gè)例子：

var obj1 = {
 name: 'sven'
};
var obj2 = {
 name: 'anne'
};
window.name = 'window';
var getName = function(){
 alert ( this.name );
};
getName(); // 

當(dāng)執(zhí)行g(shù)etName.call( obj1 )這句代碼時(shí)，getName 函數(shù)體內(nèi)的this 就指向obj1 對(duì)象，所以此處的

var getName = function(){
alert ( this.name );
};

實(shí)際上相當(dāng)于：

var getName = function(){
alert ( obj1.name ); // 

在實(shí)際開發(fā)中，經(jīng)常會(huì)遇到this指向被不經(jīng)意改變的場(chǎng)景，比如有一個(gè)div節(jié)點(diǎn)，div節(jié)點(diǎn)的onclick 事件中的this 本來是指向這個(gè)div的：

document.getElementById( 'div1' ).onclick = function(){
 alert( this.id ); // 

假如該事件函數(shù)中有一個(gè)內(nèi)部函數(shù)func，在事件內(nèi)部調(diào)用func 函數(shù)時(shí)，func 函數(shù)體內(nèi)的this就指向了window，而不是我們預(yù)期的div，見如下代碼：

document.getElementById( 'div1' ).onclick = function(){
 alert( this.id ); // 

這時(shí)候我們用call 來修正func 函數(shù)內(nèi)的this，使其依然指向div：

document.getElementById( 'div1' ).onclick = function(){
 var func = function(){
 alert ( this.id ); // 

2. Function.prototype.bind

大部分高級(jí)瀏覽器都實(shí)現(xiàn)了內(nèi)置的Function.prototype.bind，用來指定函數(shù)內(nèi)部的this 指向，即使沒有原生的Function.prototype.bind 實(shí)現(xiàn)，我們來模擬一個(gè)也不是難事，代碼如下：

Function.prototype.bind = function( context ){
var self = this; // 保存原函數(shù)
return function(){ // 返回一個(gè)新的函數(shù)
 return self.apply( context, arguments ); // 執(zhí)行新的函數(shù)的時(shí)候，會(huì) 把之前傳入的context
 // 當(dāng)作新函數(shù)體內(nèi)的this
 }
};
var obj = {
 name: 'sven'
};
var func = function(){
 alert ( this.name ); // 

我們通過Function.prototype.bind 來“包裝”func 函數(shù)，并且傳入一個(gè)對(duì)象context 當(dāng)作參數(shù)，這個(gè)context 對(duì)象就是我們想修正的this 對(duì)象。

在Function.prototype.bind 的內(nèi)部實(shí)現(xiàn)中，我們先把func 函數(shù)的引用保存起來，然后返回一個(gè)新的函數(shù)。當(dāng)我們?cè)趯韴?zhí)行func 函數(shù)時(shí)，實(shí)際上先執(zhí)行的是這個(gè)剛剛返回的新函數(shù)。在新函數(shù)內(nèi)部，self.apply( context, arguments )這句代碼才是執(zhí)行原來的func 函數(shù)，并且指定context對(duì)象為func 函數(shù)體內(nèi)的this。

這是一個(gè)簡(jiǎn)化版的Function.prototype.bind 實(shí)現(xiàn)，通常我們還會(huì)把它實(shí)現(xiàn)得稍微復(fù)雜一點(diǎn)，

使得可以往func 函數(shù)中預(yù)先填入一些參數(shù)：

Function.prototype.bind = function(){
 var self = this, // 保存原函數(shù)
 context = [].shift.call( arguments ), // 需要綁定的this 上下文
 args = [].slice.call( arguments ); // 剩余的參數(shù)轉(zhuǎn)成數(shù)組
 return function(){ // 返回一個(gè)新的函數(shù)
 return self.apply( context, [].concat.call( args, [].slice.call( arguments ) ) );
 // 執(zhí)行新的函數(shù)的時(shí)候，會(huì)把之前傳入的context 當(dāng)作新函數(shù)體內(nèi)的this
 // 并且組合兩次分別傳入的參數(shù)，作為新函數(shù)的參數(shù)
 }
};
var obj = {
 name: 'sven'
};
var func = function( a, b, c, d ){
 alert ( this.name ); // 

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com