apply()和call()函數怎么在JavaScript中使用

apply()和call()函數怎么在JavaScript中使用？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

JavaScript的函數是對象，因此有屬性和方法。每個函數都包含兩個屬性：length和prototype，每個函數都包含兩個非繼承而來的方法：apply()和call()。

今天先來介紹一下前端面試中經常問到的apply()和call()的區別吧！

這兩個方法的作用是在函數調用時改變函數的執行上下文，也就是函數內的this，apply()方法接收兩個參數，一個是在其中運行函數的作用域，另一個可以是arguments對象，也可以是參數數組。

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

JavaScript的參數在內部就是用一個數組來表示的，從這個意義上來說，apply比call的使用率更高，不必關心具體有多少個參數被傳入函數，只要用apply一股腦傳進去即可。若明確知道函數接收幾個參數，且想一目了然地表達形參與實參的對應關系，可以使用call。

當使用call或apply時，若傳入的第一個參數是null，函數體內的this會指向默認的宿主對象，在瀏覽器中是window，但在嚴格模式下，函數體內的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));//輸出：30
alert(applyFunc2(10, 20));//輸出：30
alert(callFunc(10, 20));//輸出：30

JS中的函數其實是對象，函數名是對Function對象的引用。

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

如果你認為apply()和call()的作用在于傳遞參數，那就錯了，它們真正強大的地方在于能夠擴充函數賴以運行的作用域。

call和apply的用途：

（1）改變this的指向。

call和apply最常見的用途是改變函數內部的this指向。如上述例子所示。

（2）借用其他對象的方法。

1）借用方法的第一種場景是借用其他對象的構造函數。

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

2）借用方法的第二種場景是借用其他對象的方法。

當運行showColor.call(obj)時，函數的執行環境就進到了對象中。

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

不需要把showColor()函數放到對象obj中，再通過obj來調用。

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

看完上述內容，你們掌握apply()和call()函數怎么在JavaScript中使用的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！