1. 程式人生 > 程式設計 >Javascript call及apply應用場景及例項

Javascript call及apply應用場景及例項

一、作用及應用場景

call和apply是Function的方法,他的第一個引數是this,第二個是Function的引數。call 和 apply 都是為了改變某個函式執行時的 context 即上下文而存在的,換句話說,就是為了改變函式體內部 this 的指向。因為 JavaScript 的函式存在「定義時上下文」和「執行時上下文」以及「上下文是可以改變的」這樣的概念。二者的作用完全一樣,只是接受引數的方式不太一樣。

call 需要把引數按順序傳遞進去,而 apply 則是把引數放在數組裡。

例如,有一個函式 func1 定義如下:

var func1 = function(arg1,arg2) {};

就可以通過 func1.call(this,arg1,arg2); 或者 func1.apply(this,[arg1,arg2]); 來呼叫。其中 this 是你想指定的上下文,他可以任何一個 JavaScript 物件(JavaScript 中一切皆物件)。

JavaScript 中,某個函式的引數數量是不固定的,因此要說適用條件的話,當你的引數是明確知道數量時,用 call,而不確定的時候,用 apply,然後把引數 push 進陣列傳遞進去。當引數數量不確定時,函式內部也可以通過 arguments 這個陣列來便利所有的引數。

二、存在call和apply的原因

在javascript OOP中,我們經常會這樣定義:

function cat(){
}
cat.prototype={
food:"fish",say: function(){
alert("I love "+this.food);
}
}
var blackCat = new cat;
blackCat.say();

但是如果我們有一個物件whiteDog = {food:"bone"},我們不想對它重新定義say方法,那麼我們可以通過call或apply用blackCat的say方法:blackCat.say.call(whiteDog);

所以,可以看出call和apply是為了動態改變this而出現的,當一個object沒有某個方法,但是其他的有,我們可以藉助call或apply用其它物件的方法來操作。

用的比較多的,通過document.getElementsByTagName選擇的dom 節點是一種類似array的array。它不能應用Array下的push,pop等方法。我們可以通過:

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

這樣domNodes就可以應用Array下的所有方法了。

三、例子

call中的第一個引數用於指定將要呼叫此函式的物件,例子中changeStyle函式將被box物件呼叫,this指向了box物件。

function changeStyle(attr,value){
  this.style[attr] = value;
}
var box = document.getElementById('box');
window.changeStyle.call(box,"height","200px");

Javascript call及apply應用場景及例項

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。