1. 程式人生 > >JS----直接呼叫函式與call呼叫的區別 (函式的三種呼叫方式介紹)

JS----直接呼叫函式與call呼叫的區別 (函式的三種呼叫方式介紹)

直接呼叫

直接呼叫函式是最常見 最普通的方式,直接以函式附加的物件作為呼叫者, 在函式後括號內傳入引數來呼叫函式

例如:

window.alert("測試程式碼");

其中呼叫者如果是window可以省略, 即直接alert("測試程式碼");

以call() 方法呼叫函式

語法:call([thisObject[,arg1 [,arg2 [,...,argn]]]]);

新同學看來好像直接呼叫就夠了, 其實不然, 直接呼叫函式方式簡單易用但不夠靈活,  有些時候呼叫函式時需要動態地傳入一個函式的引用,此時為了動態地呼叫函式,就需要使用call方法來呼叫了

舉個例子:

 <script type="text/javascript">
 var each =function(array,fn)
 {
	for(var index in array)
	{
		fn.call(null,index,array[index]);
	}
 }
 each([4,20,3],function (index,ele)
				{
					document.write("第"+index+"個元素是"+ele+"<br/>");
				}
 
 );
 </script>

 乍看可能比較暈, 注意fn.call語句, call呼叫的格式是在引數第一個填呼叫者,後邊按順序輸入引數,  引數形式比較特別, 與直接呼叫不同,呼叫者不寫在前面, 而是引數第一項.   格式: fn.call(obj,args);

看到這裡大家應該會有疑問,  call到底和直接呼叫有什麼區別, 區別就在於call呼叫修改了this指標的指向, 如果被呼叫的函式裡壓根沒用到this也就沒有什麼區別了

再舉一個被呼叫函式有this指標的例子:

var x = "我是全域性變數";    //定義全域性變數x
function a(){         //定義函式類結構a  
    this.x = "我是在函式類結構a中宣告的哦";    
}
//定義普通函式,彈出當前指標所包含的變數x的值
function f(){       
    alert (this.x);
}
//返回值為“我是在函式類結構a中宣告的哦”
f.call(new a());

我的理解是,f.call(new a())就是把函式(其實也是物件)f複製到被呼叫物件“new a()”下面去解析,事實上和下面這段程式碼的解析結果一樣:

function a(){
  this.x = "我是在函式類結構a中宣告的哦";
  alert(this.x);    
}
a();

 事實上,是在呼叫f.call()的時候,修改了f()中的this指向。本來,f中的this.a,this.b屬性都是自身的,但是通過f.call()呼叫時,傳入了一個新的物件e()(this),這樣,將e繫結到了f的this中,本來是給f增加的屬性,加到了e中。(e與e(),f與f()都是等價的)有點類似於“繼承”,

但是這個應該叫 JS中物件冒充

以apply()方式呼叫函式

 apply() 方法與call()方法的功能節本相似 ,都可以用來動態地呼叫函式. apply()與call()的區別如下:

  • 通過call()呼叫函式時必須在括號中詳細地列出每個引數
  • apply()動態地呼叫函式時, 需要以陣列的形式一次性傳入所有呼叫引數

語法:apply([thisObj [,argArray] ]);

比如下面的兩個語句是相等的:

myfun.call(window,12,13);
myfun.capply(window,[12,13]);

修改this指標這點上,apply()與call()也保持一致, 

大體上來說apply()與call()只在傳參形式上有些差別而已.

call部分第二個例子引用的如下博主: