详解javascript function中的caller,callee,call,apply
caller
返回一个对函数的引用,该函数调用了当前函数。也就是说,返回的是调用该函数的函数。
functionName.caller
functionName 对象是所执行函数的名称。
说明
对于函数来说,caller 属性只有在函数执行时才有定义。如果函数是由顶层调用的,那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 属性,那么结果和 functionName.toString 一样,也就是说,显示的是函数的反编译文本。值得注意的一点是,事件的触发总是带着一个匿名的函数。
点击查看--caller测试示例
callee
返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文,他是arguments对象的一个属性。[function.]arguments.callee,可选项 function 参数是当前正在执行的 Function 对象的名称。
说明
callee 属性的初始值就是正被执行的 Function 对象。
callee 属性是 arguments 对象的一个成员,它表示对函数对象本身的引用,这有利于匿名函数的递归或者保证函数的封装性,例如下边示例的递归计算1到n的自然数之和。而该属性仅当相关函数正在执行时才可用。还有需要注意的是callee拥有length属性,这个属性有时候用于验证还是比较好的。arguments.length是实参长度,arguments.callee.length是形参长度,由此可以判断调用时形参长度是否和实参长度一致。
点击查看--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应用另一个函数(类)以后,当前的
函数(类)就具备了另一个函数(类)的方法或者是属性,这也可以称之为“继承”。
点击查看--call 和 apply 测试示例
=====================================================================
基础练习,call,apply,caller,callee,prototype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript'>
//<![CDATA[
//---------------------arguments demo---------------------
function argDemo(a, b){
var i, msg = "The argDemo function expected ";
var numargs = arguments.length; //获取被传递参数的数值
var expargs = argDemo.length; //获取期望参数的数值
if (expargs < 2){
msg += expargs + "argument.";
}else{
msg += expargs + "arguments.";
}
if (numargs < 2){
msg += numargs + "was passed.";
}else{
msg += numargs + "were passed.";
}
msg += "\n\n";
for (i = 0; i < numargs; i++ ){ //获取参数内容
msg += " arg" + i + " = " + arguments[i] + "\n";
}
alert(msg);
return msg;
}
function testArg(){
alert(argDemo);
argDemo("aaa","bbb");
}
//--------------------- caller demo ---------------------
function callerDemo() {
if (callerDemo.caller) {
var a= callerDemo.caller.toString();
alert("the caller is \n" + a);
} else {
alert("this is a top function");
}
}
function handleCaller() {
callerDemo();
}
function handleCaller2(){
callerDemo();
}
function testCaller(){
alert(callerDemo);
alert(testCaller);
callerDemo();
alert(handleCaller);
handleCaller();
alert(handleCaller2);
handleCaller2();
}
//---------------callee demo--------------
function calleeDemo(){
alert(arguments.callee);
}
//用于验证参数
function calleeLengthDemo(arg1, arg2){
if (arguments.length == arguments.callee.length){
window.alert("验证形参和实参长度正确!");
}else{
alert("实参长度=" + arguments.length + "\n形参长度=" + arguments.callee.length);
}
}
//递归
var calleeSum = function(n){
if (n <= 1){
return 1;
}else{
return n + arguments.callee(n - 1);
}
}
var calleeSum2 = function(n){
if (n <= 1){
return 1;
}else{
return n + calleeSum2(n - 1);
}
}
function testCallee(){
alert(calleeDemo);
calleeDemo();
alert(calleeLengthDemo);
calleeLengthDemo("aabb");
alert(calleeSum);
alert("calleeSum=" + calleeSum(5));
alert(calleeSum2);
alert("calleeSum2=" + calleeSum2(5));
}
//-------------call apply------------------
function callBase(){
this.member = "callbase's property";
this.method = function(){
alert("base:"+this.member);
}
}
function callExtend(){
callBase.call(this);
alert(member);
alert("extend:" + this.method);
}
function testCall(){
alert(callExtend);
callExtend();
}
var applyShow = function (s){
alert(s);
}
function applyDemo(){
applyShow.apply(this,arguments);
alert(this.applyShow);
}
function testApply(){
applyDemo("hahahahah");
}
//-----------------prototype 继承---------------------
var Class = {
create: function(){
return function(){this.initialize.apply(this, arguments);}
}
}
var testClass = Class.create();
testClass.prototype={
initialize: function(name){
this.name = name;
},
al: function(){
this.show.apply(this,arguments);
},
al2 : function(){
return function(){
alert("this.show = \n" + this.show);
this.applyShow.apply(this,arguments);
};
},
show: function(s){
alert(s+"ccc"+this.name);
}
}
function testPrototype(){
var c = new testClass("gemini");
c.al("aaaa");
c.al2()("zzzzz");
}
//]]>
</script>
</head>
<body>
<input type='button' value='测试Arguments' οnclick='testArg();' /><br />
<input type='button' value='测试Caller' οnclick='testCaller();' /><br />
<input type='button' value='测试Callee' οnclick='testCallee();' /><br />
<input type='button' value='测试Call' οnclick='testCall();' /><br />
<input type='button' value='测试Apply' οnclick='testApply();' /><br />
<input type='button' value='测试Prototype' οnclick='testPrototype();' /><br />
</body>
</html>