JavaScript函數(shù)apply()和call()用法與異同分析

本文實(shí)例分析了JavaScript函數(shù)apply()和call()用法與異同。分享給大家供大家參考，具體如下：

JavaScript的函數(shù)是對(duì)象，因此有屬性和方法。每個(gè)函數(shù)都包含兩個(gè)屬性：length和prototype，每個(gè)函數(shù)都包含兩個(gè)非繼承而來(lái)的方法：apply()和call()。

今天先來(lái)介紹一下前端面試中經(jīng)常問到的apply()和call()的區(qū)別吧！

這兩個(gè)方法的作用是在函數(shù)調(diào)用時(shí)改變函數(shù)的執(zhí)行上下文，也就是函數(shù)內(nèi)的this，apply()方法接收兩個(gè)參數(shù)，一個(gè)是在其中運(yùn)行函數(shù)的作用域，另一個(gè)可以是arguments對(duì)象，也可以是參數(shù)數(shù)組。

call()方法與apply()方法的作用相同，它們的區(qū)別僅在于接收參數(shù)的方式不同，第一個(gè)參數(shù)不變，變化的是其余參數(shù)都直接傳遞給函數(shù)，也就是說，傳遞給函數(shù)的參數(shù)必須逐個(gè)列舉出來(lái)。

JavaScript的參數(shù)在內(nèi)部就是用一個(gè)數(shù)組來(lái)表示的，從這個(gè)意義上來(lái)說，apply比call的使用率更高，不必關(guān)心具體有多少個(gè)參數(shù)被傳入函數(shù)，只要用apply一股腦傳進(jìn)去即可。若明確知道函數(shù)接收幾個(gè)參數(shù)，且想一目了然地表達(dá)形參與實(shí)參的對(duì)應(yīng)關(guān)系，可以使用call。

當(dāng)使用call或apply時(shí)，若傳入的第一個(gè)參數(shù)是null，函數(shù)體內(nèi)的this會(huì)指向默認(rèn)的宿主對(duì)象，在瀏覽器中是window，但在嚴(yán)格模式下，函數(shù)體內(nèi)的this還是為null。有時(shí)，使用call或apply的目的不在于指定this指向，而是另有用途，如借用其他對(duì)象的方法，則此時(shí)可以傳入null來(lái)替代某個(gè)具體的對(duì)象，如Math.max.apply(null, [1,5,2,4,3]]);

下面來(lái)舉個(gè)例子：

function sum(num1, num2) {
 return num1 + num2;
}
function applyFunc1(num1, num2) {
 return sum.apply(this, arguments);
}
function applyFunc2(num1, num2) {
 return sum.apply(this, [num1, num2]);
}
function callFunc(num1, num2) {
 return sum.call(this, num1, num2);
}
alert(applyFunc1(10, 20));//

JS中的函數(shù)其實(shí)是對(duì)象，函數(shù)名是對(duì)Function對(duì)象的引用。

function add(a,b) {
 alert(a+b);
}
function sub(a,b) {
 alert(a-b);
}
add.call(sub,3,1); //

如果你認(rèn)為apply()和call()的作用在于傳遞參數(shù)，那就錯(cuò)了，它們真正強(qiáng)大的地方在于能夠擴(kuò)充函數(shù)賴以運(yùn)行的作用域。

call和apply的用途：

（1）改變this的指向。

call和apply最常見的用途是改變函數(shù)內(nèi)部的this指向。如上述例子所示。

（2）借用其他對(duì)象的方法。

1）借用方法的第一種場(chǎng)景是借用其他對(duì)象的構(gòu)造函數(shù)。

var Student = function(name) {
 this.name = name;
};
var Teacher = function(name) {
 Student.apply(this,arguments);
};
Teacher.prototype.getName = function() {
 return this.name;
};
var teacher = new Teacher("Alice");
console.log(teacher.getName()); // 

2）借用方法的第二種場(chǎng)景是借用其他對(duì)象的方法。

當(dāng)運(yùn)行showColor.call(obj)時(shí)，函數(shù)的執(zhí)行環(huán)境就進(jìn)到了對(duì)象中。

window.color = "white";
var obj = {color: "black"};
function showColor() {
 alert(this.color);
}
showColor();//

不需要把showColor()函數(shù)放到對(duì)象obj中，再通過obj來(lái)調(diào)用。

window.color = "white";
var obj = {color : "black"};
function showColor() {
 alert(this.color);
}
showColor();//

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript常用函數(shù)技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

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