搜尋
首頁web前端js教程js中arguments詳解
js中arguments詳解Mar 14, 2018 pm 04:52 PM
javascript詳解

當我們在js中在呼叫一個函數的時候,我們常常會給這個函數傳遞一些參數,js把傳入到這個函數的全部參數儲存在一個叫做arguments的東西裡面,那麼這到底是什麼東西?

在js中萬物皆對象,甚至數組字串函數都是對象。所以這個叫做arguments的東西也是個對象,而且是一個特殊的對象,它的屬性名是按照傳入參數的序列來的,第1個參數的屬性名是'0',第2個參數的屬性名是'1',以此類推,而且它還有length屬性,儲存的是目前傳入函數參數的數,很多時候我們把這種物件叫做類別數組物件。類別數組物件和數組都是物件這個媽生的,但是數組是大哥比類別數組物件多了很多其他的玩具(方法),類別數組物件只是長得很像數組的弟弟而已。

慢著,剛剛不是說數組也是物件嗎,現在這個類別數組物件又是什麼? 沒辦法,js就是這麼的靈活。這個類別數組物件不僅儲存給函數傳入的參數,也具有一些其他的屬性,等下會一一道來。

因為類別陣列物件和陣列有很多的共通性,所以我們常常可以用call方法,讓類別陣列物件也使用的陣列的一些方法,就是讓這個弟弟去玩哥哥的玩具,例如… ,還是不扯遠了,這篇文章只是說什麼是arguments,想知道更多關於物件如何借調數組方法的話,請參考這篇文章。


arguments的屬性

接下來我們來看看arguments對象裡面到底有些什麼東西,是騾子是馬拉出來溜溜。

function showargs() {
    console.log( arguments );
}

showargs(1,2,3,4,5);

下面我們用console.log的方式,將arguments物件輸出到控制台,這裡不得不說一句,chrome的console工具好用得不得了(我不是來打廣告的)。

<br/>

這裡我們可以看到arguments物件將我傳入的五個參數以數組的形式保存在裡面,還有保存了我傳入函數的實參的個數(length)。而且我們可以看到arguments對象的 ==_ proto _== 是指向object的,這也說明了他是個類別數組對象,而不是數組。

有了這個物件我們以後寫函數的時候,就不用給所有的形參指定參數名,然後透過參數名的方式取得參數了,我們可以直接使用arguments物件來取得實參,這樣是不是方便了很多。
有些語言在我們給函數指定了參數名稱之後,當呼叫函數時,會判斷目前傳入的參數是否與函數定義的參數個數相等,不相等就會報錯,但是靈活的js(不是我說,js是真的很靈活)並不會驗證傳遞給函數的參數個數是否等於函數定義的參數個數。所以為了裝逼(程式碼的簡潔度),我們使用arguments呼叫參數可以不混淆不同函數之間的參數名稱。另外為了裝逼(程式碼的嚴整度),我們也能用arguments來判斷目前傳入參數的數量是否與我們需要的數量一致。

下面舉個栗子:

function add() {
    if( arguments.length == 2 ){        return arguments[0] + arguments[1];
    }else{        return &#39;传入参数不合法&#39;;
    }
}

console.log( add(2,3) );
console.log( add(1,2,3) );

看看結果:

js中arguments詳解

#最後我們還可以看到arguments還有一個叫做callee的屬性,這個屬性是表示的是當前函數的一個引用,簡單點說,這個屬性裡面存儲的我們調用的這個函數的程式碼,實在無法理解的時候,又到了console.log大顯身手的時候了。

function showcallee() {
    var a = &#39;这里是代码&#39;;    var b = &#39;这是另一段代码&#39;;    var c = a + b;

    console.log(arguments.callee);    return c;
}
showcallee();

js中arguments詳解

看到結果的你是不是和我一樣驚呆了呢,這不就是我寫的程式碼嗎,arguments.callee完完整整的把這個函數的這段程式碼回傳了。


arguments的一些妙用

1.利用arguments實作方法的重載

下面我們利用arguments物件來實作一個參數相加的函數,不論傳入多少參數都行,傳入的參數相加後回傳。

function add() {
    var len = arguments.length,       
     sum = 0;    
     for(;len--;)
     {        sum += arguments[len];
    }    return sum;
}console.log( add(1,2,3) );  
 //6console.log( add(1,3) );     
 //4console.log( add(1,2,3,5,6,2,7) );   
 //26

由於js是一種弱類型的語言,沒有重載機制,當我們重寫函數時,會將原來的函數直接覆蓋,這裡我們能利用arguments,來判斷傳入的實參類型與數量進行不同的操作,然後傳回不同的數值。

2.利用arguments.callee實作遞歸

先來看看之前我們是怎麼實作遞歸的,這是一個結算階乘的函數

function factorial(num) { 
    if(num<=1) { 
        return 1; 
    }else { 
        return num * factorial(num-1); 
    } 
}

但是當這個函數變成了一個匿名函數時,我們就可以利用callee來遞歸這個函數。

function factorial(num) { 
    if(num<=1) { 
        return 1; 
    }else { 
        return num * arguments.callee(num-1); 
    } 
}

这个方法虽然好用,但是有一点值得注意,ECMAScript4中为了限制js的灵活度,让js变得严格,新增了严格模式,在严格模式中我们被禁止不使用var来直接声明一个全局变量,当然这不是重点,重点是arguments.callee这个属性也被禁止了。不过这都不是事儿,ES6为我们新增了很多好用的变量声明方式和新的语法糖,作为一个时髦的前端,我们赶紧学习一些ES6的新语法吧。

相关推荐:

js中arguments.length解析

js函数的调用及有关隐式参数arguments和this的问题

JavaScript arguments 对象详解

以上是js中arguments詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境