JavaScript中arguments和this對象用法分析
本文實例講述了JavaScript中arguments和this對象用法。分享給大家供大家參考,具體如下:
在函數(shù)內部有兩個特殊的對象 : arguments和this。
1、arguments對象
js函數(shù)不介意定義多少參數(shù),也不在乎傳遞進來多少參數(shù),也就是說,即使定義的函數(shù)只接收2個參數(shù),在調用時候也未必傳遞2個參數(shù),因為js的函數(shù)參數(shù)在內部使用一個數(shù)組表示的,在函數(shù)體內可以通過arguments對象訪問此參數(shù)數(shù)組。因此,js函數(shù)可以不顯式地使用命名參數(shù)。
當函數(shù)被調用時,傳入的參數(shù)將保存在arguments類數(shù)組對象中,通過arguments可以訪問所有該函數(shù)被調用時傳遞給它的參數(shù)列表。
arguments是一個類數(shù)組對象,因為arguments可以通過方括號語法訪問每一個元素,且擁有一個length屬性,但它缺少所有的數(shù)組方法,因此并不是一個真正的數(shù)組。
使用arguments可以實現(xiàn)一個求和函數(shù):
function add() { var sum = 0; for (var i = 0, len = arguments.length; i < len; i++) sum += arguments[i]; return sum; }
雖然arguments的主要用途是保存函數(shù)參數(shù),但這個對象還有一個callee屬性,該屬性是一個指針,指向擁有這個arguments對象的函數(shù)。
使用arguments.callee
屬性可以實現(xiàn)一個階乘函數(shù):
function factorial(num) { if (num <= 1) return 1; else return num * arguments.callee(num - 1); }
注意:
在嚴格模式下,不能使用arguments.callee
屬性,也不能對arguments對象賦值,更不能用arguments對象跟蹤參數(shù)的變化。
可以使用命名函數(shù)表達式來達成同樣的效果:
var factorial = (function func(num) { if (num <= 1) return 1; else return num * func(num - 1); ));
由于js函數(shù)沒有簽名(定義接受的參數(shù)的類型和數(shù)量),js函數(shù)沒有重載,對于同名函數(shù),后定義的函數(shù)會覆蓋先定義的函數(shù)。當然,通過檢查傳入的參數(shù)的類型和數(shù)量并做出不同的反應,可以模仿方法的重載。
2、this對象
與別的語言不同,JavaScript的this總是指向一個對象,而具體指向哪個對象是在運行時基于函數(shù)的執(zhí)行環(huán)境動態(tài)綁定的,而非函數(shù)被聲明時的環(huán)境。
- this是執(zhí)行上下文的一個屬性,其值在進入上下文時確定,且在上下文運行期間永久不變。
- this 是動態(tài)綁定的,即在運行期綁定。
- this可以是全局對象,當前對象或任意對象,取決于函數(shù)的調用方式。函數(shù)的調用方式有以下幾種:作為普通函數(shù)調用,作為對象方法調用,作為構造函數(shù)調用,使用
call()
和apply()
調用。
(1)作為普通函數(shù)調用
當函數(shù)不作為對象的屬性被調用,即直接被調用時,this會被綁定到全局對象。在瀏覽器的JavaScript里,該全局對象是window對象。
var name = "Alice"; function getName (name) { return this.name; } alert(getName()); // 輸出:Alice var name = "Alice"; var obj = { name: 'Bruce', getName: function(name) { return this.name; } }; var getName = obj.getName(); alert(getName()); // 輸出:Alice
以上兩個實例中,this都被綁定到了全局對象。
var firstname = "A"; var lastname = "B"; var person = { firstname : "Alice", lastname : "Bruce", setName : function(firstname, lastname) { var setFirstName = function(firstname) { this.firstname = firstname; }; var setLastName = function(lastname) { this.lastname = lastname; }; setFirstName(firstname); setLastName(lastname); } }; person.setName("Cindy", "David"); alert(firstname);//Cindy alert(lastname);//David alert(person.firstname);//Alice alert(person.lastname);//Bruce
問題:在函數(shù)內部定義的函數(shù),this也可能會指向全局,而希望的是內部函數(shù)的this綁定到外部函數(shù)對應的對象上。
原因:內部函數(shù)永遠不可能直接訪問外部函數(shù)中的this變量。
解決:在外部函數(shù)體中,要進入內部函數(shù)時,將this保存到一個變量中,再運用該變量。
var firstname = "A"; var lastname = "B"; var person = { firstname: "Alice", lastname: "Bruce", setName: function(firstname, lastname) { var that = this; var setFirstName = function(firstname) { that.firstname= firstname; }; var setLastName = function(lastname) { that.lastname= lastname; }; setFirstName(firstname); setLastName(lastname); } }; person.setName("Cindy", "David"); alert(firstname);//A alert(lastname);//B alert(person.firstname);//Cindy alert(person.lastname);//David
(2)作為對象方法調用
當函數(shù)作為對象方法調用時,this會被綁定到當前對象。
var firstname = "A"; var lastname = "B"; var person = { firstname : "Alice", lastname : "Bruce", setName : function(firstname, lastname) { this.firstname = this.firstname + firstname; this.lastname = this.lastname + lastname; } }; person.setName("Cindy", "David"); alert(firstname);//A alert(lastname);//B alert(person.firstname);//AliceCindy alert(person.lastname);//BruceDavid
this被綁定到了當前對象,即person對象。
(3)作為構造函數(shù)調用
JavaScript中沒有類,但可以從構造器中創(chuàng)建對象,同時也提供了new運算符,使得構造器看起來更像一個類。
利用構造函數(shù)創(chuàng)建新對象時,可以將this來指向新創(chuàng)建的對象,避免函數(shù)中的this指向全局。
var name = "Alice"; function Person(name) { this.name = name; } var person = new Person("Bruce"); alert(name);//Alice alert(person.name);//Bruce
利用構造函數(shù)創(chuàng)建新對象person,this指向了person。
用new調用構造器時。還要注意一個問題,若構造器顯式返回了一個object類型的對象,構造器返回的結果將是這個對象,而不是this。
function Person() { this.name = "Alice" return { name: "Bruce" } } var person = new Person(); alert(person.name);//Bruce
(4)call()和apply()調用
call()
和apply()
切換函數(shù)執(zhí)行的上下文環(huán)境,即this綁定的對象;this指向的是apply()
和call()
中的第一個參數(shù)。
function Person(name) { this.name = name; this.setName = function(name) { this.name = name; } } var person1 = new Person("Alice"); var person2 = {"name": "Bruce"}; alert("person1: " + person1.name); // person1: Alice person1.setName("David"); alert("person1: " + person1.name); // person1: David alert("person2: " + person2.name); // person2: Bruce person1.setName.apply(person2, ["Cindy"]); alert("person2: " + person2.name); // person2: Cindy
apply()
將person1的方法應用到person2上,this也被綁定到person2上。
3、this優(yōu)先級
(1)函數(shù)是否在new中調用,是的話this綁定到新創(chuàng)建的對象。
(2)函數(shù)是否通過call、apply調用,是的話this綁定到指定對象。
(3)函數(shù)是否在某個上下文對象中調用,是的話this綁定到該上下文對象。
(4)若都不是,使用默認綁定,若在嚴格模式下,綁定到undefined,否則綁定到全局對象。
4、this丟失的問題
eg1:
var person = { name: "Alice", getName: function() { return this.name; } }; alert(person.getName()); // Alice var getName = person.getName; alert(getName()); // undefined
當調用person.getName()
時,getName()
方法是作為person對象的屬性被調用的,因此this指向person對象;
當用另一個變量getName來引用person.getName
,并調用getName()
時,是作為普通函數(shù)被調用,因此this指向全局window。
eg2:
<div id="div">正確的方式</div> <script> var getId = function(id) { return document.getElementById(id); }; alert(getId('div').innerText); </script> <div id="div">錯誤的方式</div> <script> var getId = document.getElementById; alert(getId('div').innerText); // 拋出異常 </script>
問題:第一段調用正常,但第二段調用會拋出異常。
原因:許多引擎的document.getElementById()
方法的內部實現(xiàn)中需要用到this,this本來期望指向的是document,當?shù)谝欢未a在getElementById()
方法作為document對象的屬性被調用時,方法內部的this確實是指向document的,而第二段代碼中,用getId來引用document.getElementById
之后,再調用getId,此時就成了普通函數(shù)調用,函數(shù)內部的this指向了window,而不是原來的document。
解決:利用apply把document當作this傳入getId函數(shù),修正this。
<div id="div">修正的方式</div> <script> document.getElementById = (function(func) { return function() { return func.apply(document, arguments); }; })(document.getElementById); var getId = document.getElementById; alert(getId('div').innerText); // 拋出異常 </script>
更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《javascript面向對象入門教程》、《JavaScript常用函數(shù)技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
基于JS代碼實現(xiàn)當鼠標懸停表格上顯示這一格的全部內容
這篇文章主要介紹了基于JS代碼實現(xiàn)當鼠標懸停表格上顯示這一格的全部內容 的相關資料,需要的朋友可以參考下2016-06-06JavaScript中valueOf函數(shù)與toString方法深入理解
基本上,所有JS數(shù)據(jù)類型都擁有valueOf和toString這兩個方法,null除外。它們倆解決javascript值運算與顯示的問題,本文將詳細介紹,有需要的朋友可以參考下2012-12-12