javascript下arguments,caller,callee,call,apply示例及理解


Posted in Javascript onDecember 24, 2009

在提到上述的概念之前,首先想说说javascript中函数的隐含参数:arguments
Arguments
该对象代表正在执行的函数和调用它的函数的参数。

[function.]arguments[n]
参数function :选项。当前正在执行的 Function 对象的名字。 n :选项。要传递给 Function 对象的从0开始的参数值索引。
说明

Arguments是进行函数调用时,除了指定的参数外,还另外创建的一个隐藏对象。Arguments是一个类似数组但不是数组的对象,说它类似数组是因为其具有数组一样的访问性质及方式,可以由arguments[n]来访问对应的单个参数的值,并拥有数组长度属性length。还有就是arguments对象存储的是实际传递给函数的参数,而不局限于函数声明所定义的参数列表,而且不能显式创建 arguments 对象。arguments 对象只有函数开始时才可用。下边例子详细说明了这些性质:

//arguments 对象的用法。 
function ArgTest(a, b){ 
var i, s = "The ArgTest function expected "; 
var numargs = arguments.length; // 获取被传递参数的数值。 
var expargs = ArgTest.length; // 获取期望参数的数值。 
if (expargs < 2) 
s += expargs + " argument. "; 
else 
s += expargs + " arguments. "; 
if (numargs < 2) 
s += numargs + " was passed."; 
else 
s += numargs + " were passed."; 
s += "\n\n" 
for (i =0 ; i < numargs; i++){ // 获取参数内容。 
s += " Arg " + i + " = " + arguments[i] + "\n"; 
} 
return(s); // 返回参数列表。 
}

在此添加了一个说明arguments不是数组(Array类)的代码:
Array.prototype.selfvalue = 1; 
alert(new Array().selfvalue); 
function testAguments(){ 
alert(arguments.selfvalue); 
}

运行代码你会发现第一个alert显示1,这表示数组对象拥有selfvalue属性,值为1,而当你调用函数testAguments时,你会发现显示的是“undefined”,说明了不是arguments的属性,即arguments并不是一个数组对象。
在此附加上大家推荐的一个简单方法:
alert(arguments instanceof Array); 
alert(arguments instanceof Object);

caller
返回一个对函数的引用,该函数调用了当前函数。
functionName.caller
functionName 对象是所执行函数的名称。
说明
对于函数来说,caller 属性只有在函数执行时才有定义。如果函数是由顶层调用的,那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 属性,那么结果和 functionName.toString 一样,也就是说,显示的是函数的反编译文本。
下面的例子说明了 caller 属性的用法:

// caller demo { 
function callerDemo() { 
if (callerDemo.caller) { 
var a= callerDemo.caller.toString(); 
alert(a); 
} else { 
alert("this is a top function"); 
} 
} 
function handleCaller() { 
callerDemo(); 
}

callee

返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文。

[function.]arguments.callee
可选项 function 参数是当前正在执行的 Function 对象的名称。

说明

callee 属性的初始值就是正被执行的 Function 对象。

callee 属性是 arguments 对象的一个成员,它表示对函数对象本身的引用,这有利于匿名
函数的递归或者保证函数的封装性,例如下边示例的递归计算1到n的自然数之和。而该属性
仅当相关函数正在执行时才可用。还有需要注意的是callee拥有length属性,这个属性有时候
用于验证还是比较好的。arguments.length是实参长度,arguments.callee.length是
形参长度,由此可以判断调用时形参长度是否和实参长度一致。

示例

//callee可以打印其本身 
function calleeDemo() { 
alert(arguments.callee); 
} 
//用于验证参数 
function calleeLengthDemo(arg1, arg2) { 
if (arguments.length==arguments.callee.length) { 
window.alert("验证形参和实参长度正确!"); 
return; 
} else { 
alert("实参长度:" +arguments.length); 
alert("形参长度: " +arguments.callee.length); 
} 
} 
//递归计算 
var sum = function(n){ 
if (n <= 0) 
return 1; 
else 
return n +arguments.callee(n - 1) 
}

比较一般的递归函数:
var sum = function(n){ 
if (1==n) return 1; 
else return n + sum (n-1);

调用时:alert(sum(100));
其中函数内部包含了对sum自身的引用,函数名仅仅是一个变量名,在函数内部调用sum即相当于调用
一个全局变量,不能很好的体现出是调用自身,这时使用callee会是一个比较好的方法。

apply and call

它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数方式有所区别:

apply(thisArg,argArray);

call(thisArg[,arg1,arg2…] ]);

即所有函数内部的this指针都会被赋值为thisArg,这可实现将函数作为另外一个对象的方法运行的目的

apply的说明

如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisArg任何一个参数,那么 Global 对象将被用作 thisArg,
并且无法被传递任何参数。

call的说明

call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisArg指定的新对象。
如果没有提供 thisArg参数,那么 Global 对象被用作 thisArg

相关技巧:

应用call和apply还有一个技巧在里面,就是用call和apply应用另一个函数(类)以后,当前的
函数(类)就具备了另一个函数(类)的方法或者是属性,这也可以称之为“继承”。看下面示例:

// 继承的演示 
function base() { 
this.member = " dnnsun_Member"; 
this.method = function() { 
window.alert(this.member); 
} 
} 
function extend() { 
base.call(this); 
window.alert(member); 
window.alert(this.method); 
}

上面的例子可以看出,通过call之后,extend可以继承到base的方法和属性。

顺便提一下,在javascript框架prototype里就使用apply来创建一个定义类的模式,

其实现代码如下:

var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this, arguments); 
} 
} 
}

解析:从代码看,该对象仅包含一个方法:Create,其返回一个函数,即类。但这也同时是类的
构造函数,其中调用initialize,而这个方法是在类创建时定义的初始化函数。通过如此途径,
就可以实现prototype中的类创建模式

示例:

var vehicle=Class.create(); 
vehicle.prototype={ 
initialize:function(type){ 
this.type=type; 
} 
showSelf:function(){ 
alert("this vehicle is "+ this.type); 
} 
} var moto=new vehicle("Moto"); 
moto.showSelf();

更详细的关于prototype信息请到其官方网站查看。

评论还有更精彩对此的理解,在这我就不再添加了,大家可以看看加深理解。
看完了上面的代码,就可以,下面的代码是给一些比较想立即看到效果的人看的。多测试。

<script language="JavaScript"> 
/**//* 
* 演示arguments的用法,如何获取实参数和形数数 
*/ 
function argTest(a,b,c,d){ 
var numargs = arguments.length; // 获取被传递参数的数值。 
var expargs = argTest.length; // 获取期望参数的数值。 
alert("实参数目为:"+numargs) 
alert("形数数目为:"+expargs) alert(arguments[0]) 
alert(argTest[0]) //undefined 没有这种用法 
} 
//argTest(1,2) 
//结果:实参数目为:2;形数数目为:4;1;undefined 
//argTest(1,2,3,4,5) 
//结果:实参数目为:5;形数数目为:4;1;undefined 
/*总结:js参数传递不像c#等语法要求的必须与函数定义一致,可以根据应用不同增加或减少参数,极端情况可以不声明参数,如*/ 
var test = function(){ 
var a = 0; 
var l = 0; 
while(l<arguments.length) 
{ 
a += arguments[l]; 
l++; 
} 
alert(a); 
} 
test();//0 
test(1,2);//3 
/**//* 
* arguments不是数组(Array类) 
*/ 
Array.prototype.selfvalue = 1; 
//此处就是为人诟病的渲染原声对象吧 
function testAguments(){ 
alert("arguments.selfvalue="+arguments.selfvalue); 
} 
//alert("Array.sefvalue="+new Array().selfvalue); 
/*上面的调用说明所有Array对象的selfvalue都等于1*/ 
//testAguments(); 
/*结果undefined说明arguments并非Array类型*/ 
/**//* 
* 演示函数的caller属性. 
* 说明:(当前函数).caller:返回一个对函数的引用,该函数调用了当前函数 
*/ 
function callerDemo() { 
if (callerDemo.caller) { 
var a= callerDemo.caller.arguments[0]; 
alert(a); 
} else { 
alert("this is a top function"); 
} 
} 
function handleCaller() { 
callerDemo(); 
} 
//callerDemo(); 
//结果:this is a top function 
//handleCaller("参数1","参数2"); 
//结果:参数1 
/*总结:caller应用于函数对象,可以取到上层调用的函数对象及参数 
*/ 
/**//* 
* 演示函数的callee属性. 
* 说明:arguments.callee:初始值就是正被执行的 Function 对象,用于匿名函数 
*/ 
function calleeDemo() { 
alert(arguments.callee); 
} 
//calleeDemo(); 
//(function(arg0,arg1){alert("形数数目为:"+arguments.callee.length)})(); 
/*总结:可用于实现递归,如:*/ 
var i = 0; 
var a = function(){ 
i += arguments[0]; 
if(i>100||i==0) 
alert(i); 
else 
arguments.callee(i); 
}; 
a(1); 
//结果128,其实就是2的7次方 

/**//* 
* 演示apply,call函数的用法 
* 说明:作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数方式有所区别: 
* apply(thisArg,argArray); 
* call(thisArg[,arg1,arg2…] ]); 
* 即所有函数内部的this指针都会被赋值为thisArg 
*/ 
function ObjectA(){ 
alert("执行ObjectA()"); 
alert(arguments[0]); 
this.hit=function(msg){alert(msg)} 
this.info="我来自ObjectA" 
} 
function ObjectB(){ 
alert("执行ObjectB()"); 
//调用ObjectA()方法,同时ObjectA构造函数中的所有this就会被ObjectB中的this替代 
ObjectA.apply(this,arguments);//ObjectA.call(this); 
alert(this.info); 
} 
//ObjectB('参数0'); 
/*总结:通常同callee联用*/ 
var i = 0 
function a(b) 
{ 
i++; 
if(i>4) 
return i; 
else 
return arguments.callee.call(this,b); 
} 
alert(a(0)); 
//讲述this作用域的问题 
var value="global 变量"; 
function Obj(){ 
this.value="对象!"; 
} 
function Fun1(){ 
alert(this.value); 
} 
//Fun1(); 
//结果:global 变量 
//Fun1.apply(window); 
//结果:global 变量,默认this=window 
//Fun1.apply(new Obj()); 
//结果:对象,this=new Obj();Obj中的this指的是函数对象实例 
</script>
Javascript 相关文章推荐
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
vue实现路由切换改变title功能
May 28 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 #Javascript
window.js 主要包含了页面的一些操作
Dec 23 #Javascript
js 效率组装字符串 StringBuffer
Dec 23 #Javascript
jquery 表单取值常用代码
Dec 22 #Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 #Javascript
JavaScript 图片预览效果 推荐
Dec 22 #Javascript
javascript 年月日联动实现核心代码
Dec 21 #Javascript
You might like
PHP 程序授权验证开发思路
2009/07/09 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
PHP实现递归的三种方法
2020/07/04 PHP
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
python中的编码知识整理汇总
2016/01/26 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
python多进程重复加载的解决方式
2019/12/13 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
文史专业毕业生自荐信
2013/11/17 职场文书
学生安全教育材料
2014/02/14 职场文书
师德建设实施方案
2014/03/21 职场文书
公证委托书大全
2014/04/04 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
第二次离婚起诉书
2015/05/18 职场文书