arguments和this對象怎么在JavaScript中使用

本篇文章給大家分享的是有關(guān)arguments和this對象怎么在JavaScript中使用，小編覺得挺實用的，因此分享給大家學(xué)習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

1、arguments對象

js函數(shù)不介意定義多少參數(shù)，也不在乎傳遞進來多少參數(shù)，也就是說，即使定義的函數(shù)只接收2個參數(shù)，在調(diào)用時候也未必傳遞2個參數(shù)，因為js的函數(shù)參數(shù)在內(nèi)部使用一個數(shù)組表示的，在函數(shù)體內(nèi)可以通過arguments對象訪問此參數(shù)數(shù)組。因此，js函數(shù)可以不顯式地使用命名參數(shù)。

當函數(shù)被調(diào)用時，傳入的參數(shù)將保存在arguments類數(shù)組對象中，通過arguments可以訪問所有該函數(shù)被調(diào)用時傳遞給它的參數(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ù)量并做出不同的反應(yīng)，可以模仿方法的重載。

2、this對象

與別的語言不同，JavaScript的this總是指向一個對象，而具體指向哪個對象是在運行時基于函數(shù)的執(zhí)行環(huán)境動態(tài)綁定的，而非函數(shù)被聲明時的環(huán)境。

• this是執(zhí)行上下文的一個屬性，其值在進入上下文時確定，且在上下文運行期間永久不變。

• this 是動態(tài)綁定的，即在運行期綁定。

• this可以是全局對象，當前對象或任意對象，取決于函數(shù)的調(diào)用方式。函數(shù)的調(diào)用方式有以下幾種：作為普通函數(shù)調(diào)用，作為對象方法調(diào)用，作為構(gòu)造函數(shù)調(diào)用，使用call()和apply()調(diào)用。

（1）作為普通函數(shù)調(diào)用

當函數(shù)不作為對象的屬性被調(diào)用，即直接被調(diào)用時，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ù)內(nèi)部定義的函數(shù)，this也可能會指向全局，而希望的是內(nèi)部函數(shù)的this綁定到外部函數(shù)對應(yīng)的對象上。

原因：內(nèi)部函數(shù)永遠不可能直接訪問外部函數(shù)中的this變量。

解決：在外部函數(shù)體中，要進入內(nèi)部函數(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）作為對象方法調(diào)用

當函數(shù)作為對象方法調(diào)用時，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）作為構(gòu)造函數(shù)調(diào)用

JavaScript中沒有類，但可以從構(gòu)造器中創(chuàng)建對象，同時也提供了new運算符，使得構(gòu)造器看起來更像一個類。

利用構(gòu)造函數(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

利用構(gòu)造函數(shù)創(chuàng)建新對象person，this指向了person。

用new調(diào)用構(gòu)造器時。還要注意一個問題，若構(gòu)造器顯式返回了一個object類型的對象，構(gòu)造器返回的結(jié)果將是這個對象，而不是this。

function Person() {
 this.name = "Alice"
 return {
  name: "Bruce"
 }
}
var person = new Person();
alert(person.name);//Bruce

（4）call()和apply()調(diào)用

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的方法應(yīng)用到person2上，this也被綁定到person2上。

3、this優(yōu)先級

（1）函數(shù)是否在new中調(diào)用，是的話this綁定到新創(chuàng)建的對象。

（2）函數(shù)是否通過call、apply調(diào)用，是的話this綁定到指定對象。

（3）函數(shù)是否在某個上下文對象中調(diào)用，是的話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

當調(diào)用person.getName()時，getName()方法是作為person對象的屬性被調(diào)用的，因此this指向person對象；

當用另一個變量getName來引用person.getName，并調(diào)用getName()時，是作為普通函數(shù)被調(diào)用，因此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>

問題：第一段調(diào)用正常，但第二段調(diào)用會拋出異常。

原因：許多引擎的document.getElementById()方法的內(nèi)部實現(xiàn)中需要用到this，this本來期望指向的是document，當?shù)谝欢未a在getElementById()方法作為document對象的屬性被調(diào)用時，方法內(nèi)部的this確實是指向document的，而第二段代碼中，用getId來引用document.getElementById之后，再調(diào)用getId，此時就成了普通函數(shù)調(diào)用，函數(shù)內(nèi)部的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>

以上就是arguments和this對象怎么在JavaScript中使用，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。