javascript奇异的arguments分析_javascript技巧

在每个函数中,都有个名为 arguments 的变量,它以类似数组的形式保存了当前调用的参数。而它实际上并不是个数组,使用 typeof arguments 语句尝试会返回“object”(对象),所以它不能像 Array 一样使用 push 和 pop 等方法。即便如此,仍然可以使用下标以及长度属性(length)获取它的值。

编写灵活的函数
虽看起来名不经传,但的确 arguments 是非常有用的对象。比如,你可以让函数处理不定数目的参数。在 Dean Edwards 写的 base2 库中,有个叫 format 的函数充分发挥了这一特性:

复制代码 代码如下:

function format(string) {
var args = arguments;
var pattern = new RegExp("%([1-" + arguments.length + "])", "g");
return String(string).replace(pattern, function(match, index) {
return args[index];
});
};

这个函数实现了模板替换,你可以在要动态替换的地方使用 %1 到 %9 标记,然后其余的参数就会依次替换这些地方。例如:

format("And the %1 want to know whose %2 you %3", "papers", "shirt", "wear");上面的脚本就会返回

"And the papers want to know whose shirt you wear" 。在这里需要注意的是,即便在 format 函数定义中,我们仅定义了个名为 string 的参数。而 Javascript 不管函数自身定义的参数数量,它都允许我们向一个函数传递任意数量的参数,并将这些参数值保存到被调用函数的 arguments 对象中。

转换成实际数组
虽然 arguments 对象并不是真正意义上的 Javascript 数组,但是我们可以使用数组的 slice 方法将其转换成数组,类似下面的代码

复制代码 代码如下:

var args = Array.prototype.slice.call(arguments);

这样,数组变量 args 包含了所有 arguments 对象包含的值。

创建预置参数的函数
使用 arguments 对象能够简短我们编写的 Javascript 代码量。下面有个名为 makeFunc 的函数,它根据你提供的函数名称以及其他任意数目的参数,然后返回个匿名函数。此匿名函数被调用时,合并的原先被调用的参数,并交给指定的函数运行然后返回其返回值。

复制代码 代码如下:

function makeFunc() {
var args = Array.prototype.slice.call(arguments);
var func = args.shift();
return function() {
return func.apply(null, args.concat(Array.prototype.slice.call(arguments)));
};
}

makeFunc 的第一个参数指定需要调用的函数名称(是的,在这个简单的例子中没有错误检查),获取以后从 args 中删除。makeFunc 返回一个匿名函数,它使用函数对象的(Function Object)apply 方法调用指定的函数。

apply 方法的第一个参数指定了作用域,基本上的作用域是被调用的函数。不过这样在这个例子中看起来会有点复杂,所以我们将其设定成 null ;其第二个参数是个数组,它指定了其调用函数的参数。makeFunc 转换其自身的 arguments 并连接匿名函数的 arguments,然后传递到被调用的函数。

有种情况就是总是要有个输出的模板是相同的,为了节省每次是使用上面提到的 format 函数并指定重复的参数,我们可以使用 makeFunc 这个工具。它将返回一个匿名函数,并自动生成已经指定模板后的内容:

复制代码 代码如下:

var majorTom = makeFunc(format, "This is Major Tom to ground control. I'm %1.");

你可以像这样重复指定 majorTom 函数:

复制代码 代码如下:

majorTom("stepping through the door");
majorTom("floating in a most peculiar way");

那么当每次调用 majorTom 函数时,它都会使用第一个指定的参数填写已经指定的模板。例如上述的代码返回:

复制代码 代码如下:

"This is Major Tom to ground control. I'm stepping through the door."
"This is Major Tom to ground control. I'm floating in a most peculiar way."

自引用的函数
您可能会认为这很酷,先别急着高兴,后面还有个更大的惊喜。它(arguments)还有个其他非常有用的属性:callee 。arguments.callee 包含了当前调用函数的被引用对象。那么我们如何使用这玩意做些的事情?arguments.callee 是个非常有用的调用自身的匿名函数。

下面有个名为 repeat 的函数,它的参数需要个函数引用和两个数字。第一个数字表示运行的次数,而第二个函数定义运行的间隔时间(毫秒为单位)。下面是相关的代码:

复制代码 代码如下:

function repeat(fn, times, delay) {
return function() {
if(times-- > 0) {
fn.apply(null, arguments);
var args = Array.prototype.slice.call(arguments);
var self = arguments.callee;
setTimeout(function(){self.apply(null,args)}, delay);
}
};
}

repeat 函数使用 arguments.callee 获得当前引用,保存到 self 变量后,返回个匿名函数重新运行原本被调用的函数。最后使用 setTimeout 以及配合个匿名函数实现延迟执行。

作为个简单的说明,比如会在通常的脚本中,编写下面的提供个字符串并弹出个警告框的简单函数:

复制代码 代码如下:

function comms(s) {
alert(s);
}

好了,后来我改变了我的想法。我想编写个“特殊版本”的函数,它会重复三次运行每次间隔两秒。那么使用我的 repeat 函数,就可以像这样做到:

复制代码 代码如下:

var somethingWrong = repeat(comms, 3, 2000);
somethingWrong("Can you hear me, major tom?");

结果就犹如预期的那样,弹出了三次警告框每次延时两秒。

最后,arguments 即便不会经常被用到,甚至显得有些诡异,但是它上述的那些惊艳的功能(不仅仅是这些!)值得你去了解它。

时间: 2024-09-20 08:41:36

javascript奇异的arguments分析_javascript技巧的相关文章

Javascript中的arguments对象_javascript技巧

在js中一切都是对象,连函数也是对象,函数名其实是引用函数定义对象的变量. 1.什么是arguments? 这个函数体内的arguments非常特殊,实际上是所在函数的一个内置类数组对象,可以用数组的[i]和.length. 2.有什么作用? js语法不支持重载!但可用arguments对象模拟重载效果. arguments对象:函数对象内,自动创建的专门接收所有参数值得类数组对象. arguments[i]: 获得传入的下标为i的参数值 arguments.length: 获得传入的参数个数!

javascript函数式编程实例分析_javascript技巧

本文实例讲述了javascript函数式编程.分享给大家供大家参考.具体分析如下: js像其他动态语言一样是可以写高阶函数的,所谓高阶函数是可以操作函数的函数.因为在js中函数是一个彻彻底底的对象,属于第一类公民,这提供了函数式编程的先决条件. 下面给出一个例子代码,出自一本js教程,功能是计算数组元素的平均值和标准差,先列出非函数式编程的一种写法: var data = [1,1,3,5,5]; var total = 0; for(var i = 0;i < data.length;i++)

javascript匿名函数实例分析_javascript技巧

本文实例讲述了javascript匿名函数的用法.分享给大家供大家参考.具体分析如下: 摘要: 本文讲解的是javascript最基础也是最重要的东西--函数,之所以写这篇文章,是因为面试的时候问到了,也算是温故而知新了. 先上个例子,如果你看懂了,说明你已经理解了本文要讲的. 复制代码 代码如下: var f = (function() {     function f() {return 10;}     return f();     function f() {return 20;}  

javascript函数特点实例分析_javascript技巧

本文实例分析了javascript函数特点.分享给大家供大家参考.具体分析如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript函数特点(重要)</title>

Javascript this关键字使用分析_javascript技巧

关于js中的this关键字的文章已经不少了,我看过几篇,我写这篇文章的目的是从实例中分析出this的工作原理,希望对大家有所帮助. 一.基本的: 复制代码 代码如下: function doSomething(){ alert(this.id); } alert(window.doSomething);//证明了doSomething是属于window的 doSomething();//undefined window.onload = function(){ document.getEleme

浅谈关于JavaScript的语言特性分析_javascript技巧

前言在JavaScript中,作用域.上下文.闭包.函数等算是精华中的精华了.对于初级JSer来说,是进阶必备.对于前端攻城师来说,只有静下心来,理解了这些精华,才能写出优雅的代码. 本文旨在总结容易忘记的重要知识,不会讲基本的概念.如果对基本知识不太熟悉,就去翻下< JavaScript权威指南>吧~ 语言特性函数表达式 先看代码段: 复制代码 代码如下: [javascript] view plaincopyprint?var f = function foo(){      return

javascript事件冒泡实例分析_javascript技巧

本文实例讲述了javascript事件冒泡.分享给大家供大家参考.具体分析如下: 事件冒泡:  如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发, 触发的顺序是"由内而外".验证:在页面上添加一个table,table里有tr,tr里有td,td里放一个p, 在p,td,tr,table中添加事件响应 <html xmlns="http://www.w3.org/1999/xhtml"> <he

JavaScript事件委托用法分析_javascript技巧

本文实例讲述了JavaScript事件委托用法.分享给大家供大家参考.具体分析如下: 一.点击页面任何部分触发事件 创建一个script1.js文件. 复制代码 代码如下: (function() {     eventUtility.addEvent(document, "click", function(evt) {         alert('hello');     }); }()); 页面部分. 复制代码 代码如下: <head> <meta http-e

JavaScript 高效运行代码分析_javascript技巧

作者 Mark 'Tarquin' Wilton-Jones · 2006年11月2日 本文翻译自 Efficient JavaScript 原译文地址 http://kb.operachina.com/node/207 传统上,网页中不会有大量的脚本,至少脚本很少会影响网页的性能.但随着网页越来越像 Web 应用程序,脚本的效率对网页性能影响越来越大.而且使用 Web 技术开发的应用程序现在越来越多,因此提高脚本的性能变得很重要. 对于桌面应用程序,通常使用编译器将源代码转换为二进制程序.编译