欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中arguments和this對象用法分析

 更新時間:2018年08月08日 08:58:02   作者:筱葭  
這篇文章主要介紹了JavaScript中arguments和this對象用法,結合實例形式較為詳細的分析了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)當鼠標懸停表格上顯示這一格的全部內容

    這篇文章主要介紹了基于JS代碼實現(xiàn)當鼠標懸停表格上顯示這一格的全部內容 的相關資料,需要的朋友可以參考下
    2016-06-06
  • javascript實現(xiàn)的固定位置懸浮窗口實例

    javascript實現(xiàn)的固定位置懸浮窗口實例

    這篇文章主要介紹了javascript實現(xiàn)的固定位置懸浮窗口,以一個完整實例形式詳細分析了javascript實現(xiàn)固定位置懸浮窗口的相關技巧,非常具有實用價值,需要的朋友可以參考下
    2015-04-04
  • JavaScript中valueOf函數(shù)與toString方法深入理解

    JavaScript中valueOf函數(shù)與toString方法深入理解

    基本上,所有JS數(shù)據(jù)類型都擁有valueOf和toString這兩個方法,null除外。它們倆解決javascript值運算與顯示的問題,本文將詳細介紹,有需要的朋友可以參考下
    2012-12-12
  • 基于HTML+JS實現(xiàn)簡單的年齡計算器

    基于HTML+JS實現(xiàn)簡單的年齡計算器

    JavaScript提供了一些內置的日期和時間函數(shù),有助于從日期(出生日期)開始計算年齡。本文主要介紹了使用這些JavaScript方法,制作一個簡單的年齡計算器,快來跟隨小編一起學習學習吧
    2021-12-12
  • JS二分查找算法詳解

    JS二分查找算法詳解

    這篇文章主要為大家詳細介紹了JS二分查找算法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • js 調用父窗口的具體實現(xiàn)代碼

    js 調用父窗口的具體實現(xiàn)代碼

    想要實現(xiàn)如題所示:父窗體需要頂一個show()方法,具體實現(xiàn)代碼如下,感興趣的朋友可以參考下哈,希望對大家有所幫助
    2013-07-07
  • javascript克隆元素樣式的實現(xiàn)代碼

    javascript克隆元素樣式的實現(xiàn)代碼

    這是一個實驗用的玩意,它可以克隆指定元素的最終樣式,并包裝成一個css類,它還可以證明Oprea 11.10 是個混球
    2011-10-10
  • js 下拉菜單點擊旁邊收起實現(xiàn)(踩坑記)

    js 下拉菜單點擊旁邊收起實現(xiàn)(踩坑記)

    這篇文章主要介紹了js 下拉菜單點擊旁邊收起實現(xiàn)(踩坑記),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-09-09
  • Js 本頁面?zhèn)髦祵崿F(xiàn)代碼

    Js 本頁面?zhèn)髦祵崿F(xiàn)代碼

    記得以前在學校的時候,例如要修改信息,需要要修改的部分的值顯示出來,都是先把數(shù)據(jù)傳到后臺,然后再在前臺顯示的,想想真夠笨的,這個可以在客戶端就實現(xiàn)的,何必要傳到后臺呢
    2009-05-05
  • artdialog的圖片/標題以及關閉按鈕不顯示的解決方法

    artdialog的圖片/標題以及關閉按鈕不顯示的解決方法

    正如標題所言不顯示的原因是因其它css樣式文件中包含div{ overflow:hidden; }引起的artdialog的圖片以及關閉按鈕不顯示,具體的解決方法如下,感興趣的朋友可以參考下哈
    2013-06-06

最新評論