本文實例分析了JavaScript函數(shù)apply()和call()用法與異同。分享給大家供大家參考,具體如下:
JavaScript的函數(shù)是對象,因此有屬性和方法。每個函數(shù)都包含兩個屬性:length和prototype,每個函數(shù)都包含兩個非繼承而來的方法:apply()和call()。
今天先來介紹一下前端面試中經(jīng)常問到的apply()和call()的區(qū)別吧!
這兩個方法的作用是在函數(shù)調(diào)用時改變函數(shù)的執(zhí)行上下文,也就是函數(shù)內(nèi)的this,apply()方法接收兩個參數(shù),一個是在其中運行函數(shù)的作用域,另一個可以是arguments對象,也可以是參數(shù)數(shù)組。
call()方法與apply()方法的作用相同,它們的區(qū)別僅在于接收參數(shù)的方式不同,第一個參數(shù)不變,變化的是其余參數(shù)都直接傳遞給函數(shù),也就是說,傳遞給函數(shù)的參數(shù)必須逐個列舉出來。
JavaScript的參數(shù)在內(nèi)部就是用一個數(shù)組來表示的,從這個意義上來說,apply比call的使用率更高,不必關(guān)心具體有多少個參數(shù)被傳入函數(shù),只要用apply一股腦傳進去即可。若明確知道函數(shù)接收幾個參數(shù),且想一目了然地表達形參與實參的對應(yīng)關(guān)系,可以使用call。
當使用call或apply時,若傳入的第一個參數(shù)是null,函數(shù)體內(nèi)的this會指向默認的宿主對象,在瀏覽器中是window,但在嚴格模式下,函數(shù)體內(nèi)的this還是為null。有時,使用call或apply的目的不在于指定this指向,而是另有用途,如借用其他對象的方法,則此時可以傳入null來替代某個具體的對象,如Math.max.apply(null, [1,5,2,4,3]]);
下面來舉個例子:
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));//輸出:30alert(applyFunc2(10, 20));//輸出:30alert(callFunc(10, 20));//輸出:30JS中的函數(shù)其實是對象,函數(shù)名是對Function對象的引用。
function add(a,b) { alert(a+b);}function sub(a,b) { alert(a-b);}add.call(sub,3,1); //輸出:30如果你認為apply()和call()的作用在于傳遞參數(shù),那就錯了,它們真正強大的地方在于能夠擴充函數(shù)賴以運行的作用域。
call和apply的用途:
(1)改變this的指向。
call和apply最常見的用途是改變函數(shù)內(nèi)部的this指向。如上述例子所示。
(2)借用其他對象的方法。
1)借用方法的第一種場景是借用其他對象的構(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()); // 輸出:Alice
新聞熱點
疑難解答
圖片精選