js apply/call/caller/callee/bind使用方法與區(qū)別分析

更新時(shí)間：2009年10月28日 20:41:44 作者：

js apply/call/caller/callee/bind使用方法與區(qū)別分析,需要的朋友可以參考下。

一、call 方法
調(diào)用一個(gè)對(duì)象的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象(其實(shí)就是更改對(duì)象的內(nèi)部指針，即改變對(duì)象的this指向的內(nèi)容)。
Js代碼
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
參數(shù)
thisObj
可選項(xiàng)。將被用作當(dāng)前對(duì)象的對(duì)象。
arg1, arg2, , argN
可選項(xiàng)。將被傳遞方法參數(shù)序列。
說(shuō)明
call 方法可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法。call 方法可將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。如果沒有提供 thisObj 參數(shù)，那么 Global 對(duì)象被用作 thisObj。
Js代碼

復(fù)制代碼代碼如下:

 
<input type="text" id="myText" value="input text"> Code 
function Obj(){this.value="對(duì)象！";} 
var value="global 變量"; 
function Fun1(){alert(this.value);} 
window.Fun1(); //global 變量 
Fun1.call(window); //global 變量 
Fun1.call(document.getElementById('myText')); //input text 
Fun1.call(new Obj()); //對(duì)象！ 

Js代碼
Code

復(fù)制代碼代碼如下:

 
var first_object = { 
num: 42 
}; 
var second_object = { 
num: 24 
}; 
function multiply(mult) { 
return this.num * mult; 
} 
multiply.call(first_object, 5); // returns 42 * 5 
multiply.call(second_object, 5); // returns 24 * 5 

二、apply方法
apply方法的第一個(gè)參數(shù)也是要傳入給當(dāng)前對(duì)象的對(duì)象，即函數(shù)內(nèi)部的this。后面的參數(shù)都是傳遞給當(dāng)前對(duì)象的參數(shù)。
對(duì)于apply和call兩者在作用上是相同的，但兩者在參數(shù)上有區(qū)別的。對(duì)于第一個(gè)參數(shù)意義都一樣，但對(duì)第二個(gè)參數(shù)：apply傳入的是一個(gè)參數(shù)數(shù)組，也就是將多個(gè)參數(shù)組合成為一個(gè)數(shù)組傳入，而call則作為call的參數(shù)傳入（從第二個(gè)參數(shù)開始）。
如 func.call(func1,var1,var2,var3)對(duì)應(yīng)的apply寫法為：func.apply(func1,[var1,var2,var3])同時(shí)使用apply的好處是可以直接將當(dāng)前函數(shù)的arguments對(duì)象作為apply的第二個(gè)參數(shù)傳入。
Js代碼

復(fù)制代碼代碼如下:

 
var func=new function(){this.a="func"} 
var myfunc=function(x,y){ 
var a="myfunc"; 
alert(this.a); 
alert(x + y); 
} 
myfunc.call(func,"var"," fun");// "func" "var fun" 
myfunc.apply(func,["var"," fun"]);// "func" "var fun" 

三、caller 屬性
返回一個(gè)對(duì)函數(shù)的引用，即調(diào)用了當(dāng)前函數(shù)的函數(shù)體。
functionName.caller :functionName 對(duì)象是所執(zhí)行函數(shù)的名稱。
說(shuō)明:
對(duì)于函數(shù)來(lái)說(shuō)，caller 屬性只有在函數(shù)執(zhí)行時(shí)才有定義。如果函數(shù)是由 JScript 程序的頂層調(diào)用的，那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 屬性，那么結(jié)果和 functionName.toString 一樣，也就是說(shuō)，顯示的是函數(shù)的反編譯文本。
Js代碼

復(fù)制代碼代碼如下:

 
function CallLevel(){ 
if (CallLevel.caller == null) 
alert("CallLevel was called from the top level."); 
else 
alert("CallLevel was called by another function:\n"+CallLevel.caller); 
} 
function funCaller(){ 
CallLevel(); 
} 
CallLevel(); 
funCaller() 

四、callee屬性
返回正被執(zhí)行的 Function 對(duì)象，也就是所指定的 Function 對(duì)象的正文。
[function.]arguments.callee:可選項(xiàng) function 參數(shù)是當(dāng)前正在執(zhí)行的 Function 對(duì)象的名稱。
說(shuō)明:
callee 屬性的初始值就是正被執(zhí)行的 Function 對(duì)象。
callee 屬性是 arguments 對(duì)象的一個(gè)成員，它表示對(duì)函數(shù)對(duì)象本身的引用，這有利于匿
函數(shù)的遞歸或者保證函數(shù)的封裝性，例如下邊示例的遞歸計(jì)算1到n的自然數(shù)之和。而該屬性
僅當(dāng)相關(guān)函數(shù)正在執(zhí)行時(shí)才可用。還有需要注意的是callee擁有l(wèi)ength屬性，這個(gè)屬性有時(shí)
用于驗(yàn)證還是比較好的。arguments.length是實(shí)參長(zhǎng)度，arguments.callee.length是
形參長(zhǎng)度，由此可以判斷調(diào)用時(shí)形參長(zhǎng)度是否和實(shí)參長(zhǎng)度一致。
Js代碼

復(fù)制代碼代碼如下:

 
//callee可以打印其本身 
function calleeDemo() { 
alert(arguments.callee); 
} 
//用于驗(yàn)證參數(shù) 
function calleeLengthDemo(arg1, arg2) { 
if (arguments.length==arguments.callee.length) { 
window.alert("驗(yàn)證形參和實(shí)參長(zhǎng)度正確！"); 
return; 
} else { 
alert("實(shí)參長(zhǎng)度：" +arguments.length); 
alert("形參長(zhǎng)度： " +arguments.callee.length); 
} 
} 
//遞歸計(jì)算 
var sum = function(n){ 
if (n <= 0) 
return 1; 
else 
return n ＋arguments.callee(n - 1) 
} 

五、bind
Js代碼

復(fù)制代碼代碼如下:

 
var first_object = { 
num: 42 
}; 
var second_object = { 
num: 24 
}; 
function multiply(mult) { 
return this.num * mult; 
} 
Function.prototype.bind = function(obj) { 
var method = this, 
temp = function() { 
return method.apply(obj, arguments); 
}; 
return temp; 
} 
var first_multiply = multiply.bind(first_object); 
first_multiply(5); // returns 42 * 5 
var second_multiply = multiply.bind(second_object); 
second_multiply(5); // returns 24 * 5 

六、JS閉包(Closure)
所謂“閉包”，指的是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也是該表達(dá)式的一部分。
關(guān)于閉包，最簡(jiǎn)單的描述就是 ECMAScript 允許使用內(nèi)部函數(shù)－－即函數(shù)定義和函數(shù)表達(dá)式位于另一個(gè)函數(shù)的函數(shù)體內(nèi)。而且，這些內(nèi)部函數(shù)可以訪問它們所在的外部函數(shù)中聲明的所有局部變量、參數(shù)和聲明的其他內(nèi)部函數(shù)。當(dāng)其中一個(gè)這樣的內(nèi)部函數(shù)在包含它們的外部函數(shù)之外被調(diào)用時(shí)，就會(huì)形成閉包。也就是說(shuō)，內(nèi)部函數(shù)會(huì)在外部函數(shù)返回后被執(zhí)行。而當(dāng)這個(gè)內(nèi)部函數(shù)執(zhí)行時(shí)，它仍然必需訪問其外部函數(shù)的局部變量、參數(shù)以及其他內(nèi)部函數(shù)。這些局部變量、參數(shù)和函數(shù)聲明（最初時(shí)）的值是外部函數(shù)返回時(shí)的值，但也會(huì)受到內(nèi)部函數(shù)的影響。
簡(jiǎn)而言之，閉包的作用就是在out function執(zhí)行完并返回后，閉包使得Javascript的垃圾回收機(jī)制GC不會(huì)收回out function所占用的資源，因?yàn)閛ut function的內(nèi)部函數(shù)inner function的執(zhí)行需要依賴out function中的變量。
閉包的兩個(gè)特點(diǎn)：
1、作為一個(gè)函數(shù)變量的一個(gè)引用 - 當(dāng)函數(shù)返回時(shí)，其處于激活狀態(tài)。
2、一個(gè)閉包就是當(dāng)一個(gè)函數(shù)返回時(shí)，一個(gè)沒有釋放資源的棧區(qū)。
例1：
Html代碼

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function setupSomeGlobals() { 
// Local variable that ends up within closure 
var num = 666; 
// Store some references to functions as global variables 
gAlertNumber = function() { alert(num); } 
gIncreaseNumber = function() { num++; } 
gSetNumber = function(x) { num = x; } 
} 
</script> 
<button onclick="setupSomeGlobals()">生成 - setupSomeGlobals()</button> 
<button onclick="gAlertNumber()">輸出值 - gAlertNumber()</button> 
<button onclick="gIncreaseNumber()">增加 - gIncreaseNumber()</button> 
<button onclick="gSetNumber(5)">賦值5 - gSetNumber(5)</button> 

例2：
Html代碼

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function newClosure(someNum, someRef) { 
// Local variables that end up within closure 
var num = someNum; 
var anArray = [1,2,3]; 
var ref = someRef; 
return function(x) { 
num += x; 
anArray.push(num); 
alert('num: ' + num + 
' nanArray ' + anArray.toString() + 
' nref.someVar ' + ref.someVar); 
} 
} 
var closure1 = newClosure(40, {someVar:' never-online'}) 
var closure2 = newClosure(99, {someVar:' BlueDestiny'}) 
closure1(4) 
closure2(3) 
</script> 

例3：
Js代碼

復(fù)制代碼代碼如下:

 
<script language="javascript"> 
/* 聲明一個(gè)全局變量 - getImgInPositionedDivHtml - 并將一次調(diào)用一個(gè)外部函數(shù)表達(dá)式返回的內(nèi)部函數(shù)賦給它。 
這個(gè)內(nèi)部函數(shù)會(huì)返回一個(gè)用于表示絕對(duì)定位的 DIV 元素包圍著一個(gè) IMG 元素 的 HTML 字符串，這樣一來(lái)， 
所有可變的屬性值都由調(diào)用該函數(shù)時(shí)的參數(shù)提供： 
*/ 
var getImgInPositionedDivHtml = (function(){ 
/* 外部函數(shù)表達(dá)式的局部變量 - buffAr - 保存著緩沖數(shù)組。這個(gè)數(shù)組只會(huì)被創(chuàng)建一次，生成的數(shù)組實(shí)例對(duì)內(nèi)部函數(shù)而言永遠(yuǎn)是可用的 
因此，可供每次調(diào)用這個(gè)內(nèi)部函數(shù)時(shí)使用。 
其中的空字符串用作數(shù)據(jù)占位符，相應(yīng)的數(shù)據(jù) 
將由內(nèi)部函數(shù)插入到這個(gè)數(shù)組中： 
*/ 
var buffAr = [ 
'<div id="', 
'', //index 1, DIV ID 屬性 
'" style="position:absolute;top:', 
'', //index 3, DIV 頂部位置 
'px;left:', 
'', //index 5, DIV 左端位置 
'px;width:', 
'', //index 7, DIV 寬度 
'px;height:', 
'', //index 9, DIV 高度 
'px;overflow:hidden;\"><img src=\"', 
'', //index 11, IMG URL 
'\" width=\"', 
'', //index 13, IMG 寬度 
'\" height=\"', 
'', //index 15, IMG 調(diào)蓄 
'\" alt=\"', 
'', //index 17, IMG alt 文本內(nèi)容 
'\"><\/div>' 
]; 
/* 返回作為對(duì)函數(shù)表達(dá)式求值后結(jié)果的內(nèi)部函數(shù)對(duì)象。 
這個(gè)內(nèi)部函數(shù)就是每次調(diào)用執(zhí)行的函數(shù) 
- getImgInPositionedDivHtml( ... ) - 
*/ 
return (function(url, id, width, height, top, left, altText){ 
/* 將不同的參數(shù)插入到緩沖數(shù)組相應(yīng)的位置： 
*/ 
buffAr[1] = id; 
buffAr[3] = top; 
buffAr[5] = left; 
buffAr[13] = (buffAr[7] = width); 
buffAr[15] = (buffAr[9] = height); 
buffAr[11] = url; 
buffAr[17] = altText; 
/* 返回通過(guò)使用空字符串（相當(dāng)于將數(shù)組元素連接起來(lái)） 
連接數(shù)組每個(gè)元素后形成的字符串： 
*/ 
return buffAr.join(''); 
}); //:內(nèi)部函數(shù)表達(dá)式結(jié)束。 
})();//自調(diào)用 
alert(getImgInPositionedDivHtml);//顯示返回的函數(shù) 
alert(getImgInPositionedDivHtml("img.gif","img",100,50,0,0,"Test")); 
</script> 

說(shuō)明：其中的關(guān)鍵技巧在于通過(guò)執(zhí)行一個(gè)單行（in-line）函數(shù)表達(dá)式創(chuàng)建一個(gè)額外的執(zhí)行環(huán)境，而將該函數(shù)表達(dá)式返回的內(nèi)部函數(shù)作為在外部代碼中使用的函數(shù)。此時(shí)，緩沖數(shù)組被定義為函數(shù)表達(dá)式的一個(gè)局部變量。這個(gè)函數(shù)表達(dá)式只需執(zhí)行一次，而數(shù)組也只需創(chuàng)建一次，就可以供依賴它的函數(shù)重復(fù)使用。
七、原型鏈
ECMAScript 為 Object 類型定義了一個(gè)內(nèi)部 [[prototype]] 屬性。這個(gè)屬性不能通過(guò)腳本直接訪問，但在屬性訪問器解析過(guò)程中，則需要用到這個(gè)內(nèi)部[[prototype]] 屬性所引用的對(duì)象鏈－－即原型鏈?？梢酝ㄟ^(guò)一個(gè)公共的 prototype 屬性，來(lái)對(duì)與內(nèi)部的 [[prototype]] 屬性對(duì)應(yīng)的原型對(duì)象進(jìn)行賦值或定義。
例1：
Js代碼

復(fù)制代碼代碼如下:

 
<script language="javascript"> 
function NumObject(formalParameter){ 
this.testNumber = formalParameter; 
} 
function StrObject(formalParameter){ 
this.testString = formalParameter; 
} 
//用 NumObject類的實(shí)例替換了所有與 StrObject類的實(shí)例相關(guān)聯(lián)的原型。 
StrObject.prototype =new NumObject(6); 
var objRef = new StrObject( "String_Value" ); 
//當(dāng)某個(gè)屬性訪問器嘗試讀取由 objectRef 所引用的對(duì)象的屬性值時(shí)，整個(gè)原型鏈都會(huì)被搜索。 
//不論是在對(duì)象或?qū)ο蟮脑椭?，讀取命名屬性值的時(shí)候只返回首先找到的屬性值。而當(dāng)為對(duì)象的命名屬性賦值時(shí)，如果對(duì)象自身不存在該屬性則創(chuàng)建相應(yīng)的屬性。 
alert(objRef.testString);//output "String_Value" 
alert(objRef.testNumber);//output "6" 
alert(objRef.toString); 
//StrObject 的實(shí)例擁有一個(gè)原型鏈。該鏈中的第一個(gè)對(duì)象是在創(chuàng)建后被指定給 StrObject 構(gòu)造函數(shù)的 prototype 屬性的 NumObject 的一個(gè)實(shí)例。NumObject 的實(shí)例也有一個(gè)原型，即與 Object.prototype 所引用的對(duì)象對(duì)應(yīng)的默認(rèn)的 Object 對(duì)象的原型。最后， Object.prototype 有一個(gè)值為 null 的原型，因此這條原型鏈到此結(jié)束。 
objRef.testNumber = 3;//對(duì)象自身不存在該屬性則創(chuàng)建相應(yīng)的屬性 
alert(objRef.testNumber);//自身有了屬性，屬性訪問器不會(huì)再進(jìn)一步搜索原型鏈 
alert(NumObject.prototype.isPrototypeOf(objRef));// output "true" 
</script> 