JavaScript中的arguments,callee,caller,call,appy [备忘]

最新推荐文章于 2014-08-20 19:33:00 发布

wangfishes

最新推荐文章于 2014-08-20 19:33:00 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVASCRIPT&&DHTML 文章标签： JavaScript HTML prototype ViewUI

本文链接：https://blog.youkuaiyun.com/wangfishes/article/details/83433036

JAVASCRIPT&&DHTML 专栏收录该内容

12 篇文章

订阅专栏

本文深入讲解JavaScript中的函数特性，包括arguments对象的使用方法、callee与caller属性的作用、以及apply与call函数的应用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.演示arguments的用法

Js代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<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 没有这种用法
}
/**
* 下面调用分别打印：
* "实参数目为:2"
* "形数数目为:4"
* "1"
* "undefined"
*/
argTest(1,2);
/**
* 下面调用分别打印：
* "实参数目为:5"
* "形数数目为:4"
* "1"
* "undefined"
*/
argTest(1,2,3,4,5)
//-->
</script>
</head>
<body></body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<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 没有这种用法 
 } 
 /** 
  * 下面调用分别打印： 
  * "实参数目为:2" 
  * "形数数目为:4" 
  * "1" 
  * "undefined" 
  */ 
  argTest(1,2);

  /** 
   * 下面调用分别打印： 
   * "实参数目为:5" 
   * "形数数目为:4" 
   * "1" 
   * "undefined" 
   */ 
   argTest(1,2,3,4,5) 
//--> 
</script> 
</head> 
<body></body>
</html>

2.arguments不是数组(Array类)

Js代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<script language= "JavaScript" >
<!--
/**
* arguments不是数组(Array类)
*/
Array.prototype.selfvalue = 1;
function testAguments(){
alert( "arguments.selfvalue=" + arguments.selfvalue);
}
alert( "Array.sefvalue=" + new Array().selfvalue); //打印 "Array.sefvalue=1"
testAguments(); //打印 "arguments.selfvalue=undefined"
//-->
</script>
</head>
<body>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="JavaScript">
<!-- 
 /** 
  * arguments不是数组(Array类) 
  */ 
 Array.prototype.selfvalue = 1;
 function testAguments(){ 
 alert("arguments.selfvalue=" + arguments.selfvalue);
 }

 alert("Array.sefvalue=" + new Array().selfvalue);//打印 "Array.sefvalue=1" 

 testAguments();//打印 "arguments.selfvalue=undefined" 
//-->
</script>
</head>
<body>
</body>
</html>

3.演示函数的caller属性

Js代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<script language= "JavaScript" >
<!--
/**
* 演示函数的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"
//-->
</script>
</head>
<body>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="JavaScript">
<!-- 
 /** 
  * 演示函数的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" 
//-->
</script>
</head>
<body>
</body>
</html>

4.演示函数的callee属性

Js代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<script language= "JavaScript" >
<!--
/**
* 演示函数的callee属性.
* 说明:arguments.callee:初始值就是正被执行的 Function 对象,用于匿名函数
*/
function calleeDemo() {
alert(arguments.callee);
}
calleeDemo(); // 打印 calleeDemo 整个函数体
( function (arg0,arg1){alert( "形数数目为:" +arguments.callee.length)})(); //打印 "形数数目为:2"
//-->
</script>
</head>
<body>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="JavaScript">
<!-- 
 /** 
  * 演示函数的callee属性. 
  * 说明:arguments.callee:初始值就是正被执行的 Function 对象,用于匿名函数 
  */ 
  function calleeDemo() { 
  alert(arguments.callee); 
  } 
  
  calleeDemo(); // 打印 calleeDemo 整个函数体 
  (function(arg0,arg1){alert("形数数目为:"+arguments.callee.length)})();//打印 "形数数目为:2" 
//-->
</script>
</head>
<body>
</body>
</html>

5.演示apply,call函数的用法

Js代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<script language= "JavaScript" >
<!--
/**
* 演示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);
this .hit( "来自A的hit函数" );
}
/**
*当ObjectB()函数中第三行为这样时：
*ObjectA.apply(this,arguments);
*下面的调用，依次打印：
* "执行ObjectB()"
* "执行ObjectA()"
* "参数0"
* "我来自ObjectA"
* "来自A的hit函数"
*-----------------------------------
*当ObjectB()函数中第三行为这样时：
*ObjectA.call(this);
*下面的调用，依次打印：
* "执行ObjectB()"
* "执行ObjectA()"
* "undefined"
* "我来自ObjectA"
* "来自A的hit函数"
*/
ObjectB( '参数0' );
//-->
</script>
</head>
<body>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="JavaScript">
<!-- 
 /** 
  * 演示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);
  this.hit("来自A的hit函数");
 } 
 
 /** 
  *当ObjectB()函数中第三行为这样时： 
  *ObjectA.apply(this,arguments);
  *下面的调用，依次打印： 
  * "执行ObjectB()" 
  * "执行ObjectA()" 
  * "参数0" 
  * "我来自ObjectA" 
  * "来自A的hit函数" 
  *----------------------------------- 
  *当ObjectB()函数中第三行为这样时： 
  *ObjectA.call(this);
  *下面的调用，依次打印： 
  * "执行ObjectB()" 
  * "执行ObjectA()" 
  * "undefined" 
  * "我来自ObjectA" 
  * "来自A的hit函数" 
  */ 
  ObjectB('参数0');
//-->
</script>
</head>
<body>
</body>
</html>

6.另外的对apply函数的演示

Js代码