首頁  >  文章  >  web前端  >  跟我學習javascript的arguments物件_javascript技巧

跟我學習javascript的arguments物件_javascript技巧

WBOY
WBOY原創
2016-05-16 15:31:531229瀏覽

1、什麼是arguments

arguments 是是JavaScript裡的內建對象,它很古怪,也常被人忽視,但實際上是很重要的。所有主要的js函數庫都利用了arguments物件。所以agruments物件對於javascript程式設計師來說是必需熟悉的。在javascript函數體內,標識符arguments具有特殊意義。它是呼叫物件的一個特殊屬性,用來引用Arguments物件。 Arugments物件就像數組,注意這裡只是像並不是哈。

javascript函數體內,arguments像數組(並不是真的數組,是一個Arguments對象,再次強調)一樣,有length屬性,可以代表傳給函數的參數的個數。

javascript中Arguments物件是函數的實際參數,arguments物件的長度是由實參個數而不是形參個數決定的。形參是函數內部重新開啟記憶體空間儲存的變量,但是其與arguments物件記憶體空間並不重疊。

js不會主動為你判斷你到底給函數傳了多少個參數,如果你多傳了,多餘的部分就沒有被使用,如果你少傳了,那麼沒傳的參數值就是undefined.所以我們可以藉助arguments的length屬性來偵測呼叫函數時是否使用了正確數目的實際參數,因為javascript是不會為你做這些事的

function f(x,y,z)
{
 //首先检查传递的参数数量是否正确
 if(arguments.length != 3)
 {
  throw new Error("function f called with " + arguments.length + "arguments");
 }
 //下面运行真正的函数
}

2、arguments建立可變參數清單函數

arguments也提供了我們一個可能,就是為一個函數傳任意數目的實際參數:

比如說,我想用一個display()函數來計算每個公司的員工工資總額,對,沒錯,你傳多少參數都行,但是前提是你要傳數字,因為我在函數內部懶得判斷了。

 function display(){
  var sum=0; //总额
  for(var i=0;i<arguments.length;i++){
   sum+=arguments[i];
  }
  document.write(sum+'<br>');
 }

 //A公司
 display(10000,2000,5000);
 //B公司
 display(1000,2000,5000,8000,10000);

怎麼樣?這個方法很巧妙吧?

說明arguments與真正傳的形式參數是一致的:

對於arguments和值都存在的情況下,兩者值是同步的改變其中一個值,即改變了二者所有的值

function f(a, b, c){
 alert(arguments.length); // result: "2"
 a = 100;
 alert(arguments[0]);  // result: "100"
 arguments[0] = "qqyumidi";
 alert(a);     // result: "qqyumidi"
 alert(c);     // result: "undefined"
 c = 2012;
 alert(arguments[2]);  // result: "undefined"
}

f(1, 2);

3、永遠不要修改arguments物件

函數中聲明的參數和arguments之間的聯繫很脆弱,每個聲明的參數實際上只是arguments物件中對應位置的一個引用。

值得注意的是,在ES5的strict mode中,函數宣告的參數並不會引用arguments:

function strict(x) {
 "use strict";
 arguments[0] = "modified";
 return x === arguments[0];
}
function nonstrict(x) {
 arguments[0] = "modified";
 return x === arguments[0];
}
strict("unmodified"); // false
nonstrict("unmodified"); // true

正因為在strict和非strict模式下,函數宣告的參數和arguments的關係不一致,所以為了避免出現問題,不去修改arguments物件才是最安全的做法。

如果確實需要修改arguments對象,那麼可以先賦值一份arguments對象:

var args = [].slice.call(arguments);
當slice方法不接受任何參數的時候,就會執行複製操作,得到的args也是真正的陣列物件。同時,args和函數宣告的參數之間也沒有任何關聯了,對它進行操作是安全的。

4、一個變數來保存arguments的引用

假設需要一個API用來遍歷若干元素,像下面這樣:

var it = values(1, 4, 1, 4, 2, 1, 3, 5, 6); 
it.next(); // 1 
it.next(); // 4 
it.next(); // 1 

對應的實作可以是:

function values() { 
 var i = 0, n = arguments.length; 
 return { 
  hasNext: function() { 
   return i < n; 
  }, 
  next: function() { 
   if (i >= n) { 
    throw new Error("end of iteration"); 
   } 
   return arguments[i++]; // wrong arguments 
  } 
 }; 
} 

但是執行的實際情況卻是:

var it = values(1, 4, 1, 4, 2, 1, 3, 5, 6); 
it.next(); // undefined 
it.next(); // undefined 
it.next(); // undefined 

原因在於:對於arguments物件的賦值是隱式完成的。在next方法內部,使用了arguments,然而此arguments和values方法開始處的arguments並不是一個物件。這裡的arguments物件是函數next()的。

解決方法也很簡單,就是將需要存取的arguments使用另外一個變數來引用。然後透過閉包的性質在其嵌套的函數中進行存取就可以了,像下面這樣:

function values() { 
 var i = 0, n = arguments.length, a = arguments; 
 return { 
  hasNext: function() { 
   return i < n; 
  }, 
  next: function() { 
   if (i >= n) { 
    throw new Error("end of iteration"); 
   } 
   return a[i++]; 
  } 
 }; 
} 
var it = values(1, 4, 1, 4, 2, 1, 3, 5, 6); 
it.next(); // 1 
it.next(); // 4 
it.next(); // 1 

5、arguments物件的callee屬性:

arguments的callee屬性是用來引用目前正在執行的函數,這對未命名的函數呼叫本身非常有好處。

首先用命名函數表達式實現遞歸的函數:

//函数直接量 指定函数名 递归函数
var result = function fact(x){
 if(x<=1) 
  return 1; 
 else 
  return x*fact(x-1);
};

那裡面,我提到可以為函數直接量以函數名。這樣實作遞歸可以很方便的呼叫自己。

現在用arguments的這個callee同樣可以簡單的實作

//用函数直接量,采用arguments.callee属性实现递归函数
var result = function(x){
 if(x<=1) return 1; 
 return x*arguments.callee(x-1);
};

在最后提醒大家一点,既然这个arguments这么厉害,那么我们就不要为变量命名为arguments了,事实上arguments是javascript的保留字之一。嗯。

最后补充一点:

区别caller

返回一个对函数的引用,该函数调用了当前函数。

  • - functionName.caller
  • - functionName 对象是所执行函数的名称。

对于函数来说,caller 属性只有在函数执行时才有定义。如果函数是由顶层调用的,那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 属性,那么结果和 functionName.toString 一样,也就是说,显示的是函数的反编译文本。

代码:

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->// caller demo {
function callerDemo() {
 if (callerDemo.caller) {
  var a= callerDemo.caller.toString();
  alert(a);
 } else {
  alert("this is a top function");
 }
}
function handleCaller() {
 callerDemo();
}

handleCaller();//弹出handleCaller的定义

以上就是针对javascript的arguments对象的相关介绍,希望对大家的学习有所帮助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn