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实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 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中的常用函数回顾
2013/07/11 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHP.vs.JAVA
2016/04/29 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
Python 专题一 函数的基础知识
2017/03/16 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
利用Python优雅的登录校园网
2020/10/21 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
初中三好学生事迹材料
2014/01/13 职场文书
推广普通话标语
2014/06/27 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
公司员工手册范本
2015/05/14 职场文书
社团招新宣传语
2015/07/13 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android