`
gui1401
  • 浏览: 49953 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

caller,callee,call,apply

    博客分类:
  • js
阅读更多

Javascript - 全面理解 caller,callee,call,apply

Author: BlueDestiny, never-online From: http://www.never-online.net, Blog.csdn.net/BlueDestiny

1、caller

JScript参考中说明为:返回一个对函数的引用,该函数调用了当前函数。如何理解这句话, 先来举个简单的例子:
// caller demo {
function callerDemo() {
	if (callerDemo.caller) {
		var a= callerDemo.caller.toString();
		alert(a);
	} else {
		alert("this is a top function");
	}
}
function handleCaller() {
	callerDemo();
}
  
上面的例子,可以看出,它就是返回一个调用数据的引用。(指向请求调用的函数) 也由此可以看出,当在这样的情况下,onclick触发事件的时候总是带着匿名函数的
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);
	}
}
		
从上面的例子可以看出,callee可以用来打在执行函数,也就是指向被调用的函数。上面的例子就说明calee可以打印其本身,当然还有其它的一些用途。而length属性中arguments.length是实参长度,arguments.callee.length是形参长度,由此可以判断调用时形参长度是否和实参长度一致。

2、callee

JScript参考中的说明为:返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文。
需要注意的是callee拥有length属性,这个在有的时候用于验证还是比较好的。

3、call 和 apply

call方法JScript参考中的说明:调用一个对象的一个方法,以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[, [,.argN]]]]]),但是没有示例
apply方法JScript参考中的说明:应用某一对象的一个方法,用另一个对象替换当前对象。apply([thisObj[,argArray]])
实际上这两个的作用几乎是相同的,要注意的地方是call(thisObj[,arg1[, arg2[,)中的arg参数可以是变量,而apply([thisObj[,argArray]])中的参数为数组集合。下面来看看call, apply的具体应用
// simple call demo
function simpleCallDemo(arg) {
	window.alert(arg);
}
function handleSPC(arg) {
	simpleCallDemo.call(this, arg);
}
// simple apply demo
function simpleApplyDemo(arg) {
	window.alert(arg);
}
function handleSPA(arg) {
	simpleApplyDemo.apply(this, arguments);
}
	
从上面简单的例子可以看出,call和apply可以把当前的参数传递给另外一个函数的参数中,从而调用另一个函数的应用。有的时候这是一个很实用的方法,当然,用call或是apply(是参数或是数组),看实际情况而定了。

下面来看另一个应用

call和apply还有一个技巧在里面,就是用call和apply应用另一个函数(类)以后,当前的函数(类)就具备了另一个函数(类)的方法或者是属性,这也可以称之为“继承”。看下面示例。
// inherit
function base() {
	this.member = "never-online";
	this.method = function() {
		window.alert(this.member);
	}
}
function extend() {
	base.call(this);
	window.alert(member);
	window.alert(this.method);
}
	
上面的例子可以看出,通过call之后,extend可以继承到base的方法和属性。

再看一个apply的应用

// advanced apply demo
function adApplyDemo(x) {
	return ("this is never-online, BlueDestiny '" + x + "' demo");
}
function handleAdApplyDemo(obj, fname, before) {
  var oldFunc = obj[fname];
  obj[fname] = function() {
    return oldFunc.apply(this, before(arguments));
  };
}
function hellowordFunc(args) {
  args[0] = "hello " + args[0];
  return args;
}
function applyBefore() {
	alert(adApplyDemo("world"));
}
function applyAfter() {
	handleAdApplyDemo(this, "adApplyDemo", hellowordFunc);
	alert(adApplyDemo("world")); // Hello world!
}
	
需要注意的是,要先点"原始的adApplyDemo('world')"按钮,如果先点"应用后的adApplyDemo('world')"按扭,会先应用了apply方法,这样原始的值将会被改变。或许有的朋友没有发现有什么特别的,我在这里指明一下,当点击左边的按扭时,只有"this is never-online, BlueDestiny 'world' demo", 当点击右边的按扭后,会现结果是"this is never-online, BlueDestiny 'hello world' demo",再点点左边的按扭,看看结果又会是什么呢?自己试试看:D,已经改写了函数adApplyDemo。这个例子则说明了call和apply的“真正”作用了。
分享到:
评论

相关推荐

    理解JavaScript的caller callee call apply

    ### 理解JavaScript中的`caller`, `callee`, `call`, `apply` #### Arguments对象:JavaScript函数调用的参数管理器 在JavaScript中,每个函数都有一个隐含参数`arguments`,它允许开发者访问传递给函数的所有参数...

    Javascript - 全面理解 caller,callee,call,apply (转载)

    这篇文章将深入探讨四个关键概念:caller、callee、call和apply,它们都是JavaScript函数操作的核心部分,对于理解和使用高级JavaScript编程至关重要。 首先,我们来了解`caller`和`callee`。在JavaScript的函数...

    Javascript - 全面理解 caller,callee,call,apply

    在JavaScript的世界里,caller、callee、call和apply是四个非常重要的概念,它们涉及到函数的调用方式和执行上下文。这些知识点对于深入理解和优化代码至关重要,尤其在处理高阶函数和面向对象编程时。 首先,让...

    理解JavaScript的caller,callee,call,apply

    ### 理解JavaScript中的`caller`, `callee`, `call`, `apply` #### Arguments对象 在深入了解`caller`, `callee`, `call`, 和 `apply` 之前,我们先来看看`arguments`对象。`arguments`对象是在JavaScript函数内部...

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

    JavaScript中arguments、caller、callee、call和apply是与函数相关的几个重要概念和对象。它们为JavaScript的函数提供了非常灵活的功能,特别是在处理函数参数和调用上下文方面。接下来,将对这些概念逐一进行详细...

    理解Javascript的caller,callee,call,apply区别

    ### 理解JavaScript中的`caller`, `callee`, `call`, `apply`的区别 #### 一、`arguments`对象 在深入探讨`caller`, `callee`, `call`, 和`apply`之前,我们先来了解一个重要的概念——`arguments`对象。 **`...

    Javascript – 全面理解 caller,callee,call,apply

    Javascript – 全面理解 caller,callee,call,apply Author: BlueDestiny, never-online From: http://www.never-online.net, Blog.csdn.net/BlueDestiny 1、caller JScript参考中说明为:返回一个对函数的...

    js apply/call/caller/callee/bind使用方法与区别分析

    在JavaScript编程中,apply、call、caller、callee和bind是与函数相关的几个重要概念,它们都与函数的this上下文相关,以及如何控制函数的调用方式。接下来,我们将详细分析这些方法的使用方法和区别。 ### call...

    Javascript原型对象、this的5钟用法、原型继承、Caller和Callee的使用.docx

    4. **call/apply/bind方法**:这三个方法可以改变`this`的指向,使其指向指定的对象。 5. **箭头函数**:箭头函数没有自己的`this`,它会捕获其所在(词法)上下文的`this`值。 **原型继承(Prototype Inheritance...

    javascript中call,apply,callee,caller用法实例分析

    主要介绍了javascript中call,apply,callee,caller用法,结合实例形式分析了javascript中call,apply,callee,caller功能、使用方法及相关操作注意事项,需要的朋友可以参考下

    实例分析javascript中的call()和apply()方法

    ### 知识点一:JavaScript中的call()和apply()方法定义 #### call()方法定义: call()方法属于Function对象的一个方法,它允许我们调用一个函数,并且可以改变该函数的上下文。换句话说,call()方法能够指定函数...

    JavaScript arguments.callee作用及替换方案详解

    4. **ES6的箭头函数**:箭头函数没有自己的`this`、`arguments`、`.call`、`.apply`和`.constructor`等方法,因此它们无法使用`arguments.callee`。在ES6中,通常建议使用`let`或`const`来声明一个内部函数,然后...

    js arguments,jcallee caller用法总结

    JavaScript中的`arguments`、`callee`和`caller`是三个非常重要的概念,它们与函数的参数处理和调用栈有着密切关系。 `arguments`对象是一个类数组对象,它包含了函数被调用时的所有参数,即使这些参数没有在函数...

    javascript基础知识大集锦(二) 推荐收藏

    正则表达式 call(),apply(),callee,caller,cookie方法,setInterval(),clearInterval(),setTimeout() ,clearTimeout()

    详解JavaScript的闭包、IIFE、apply、函数与对象

    3.3.1、call 3.3.2、apply 3.3.3、caller 3.3.4、Callee 3.5、立即执行函数表达式 (IIFE) 3.5.1、匿名函数与匿名对象 3.5.2、函数与函数表达式 3.5.3、立即执行函数表达式与匿名对象 3.5.4、各种IIFE的写法 3.5.5、...

    javascript

    3. **`callee`与`caller`属性**:`callee`属性可用于递归调用,而`caller`属性则可以获取调用当前函数的父函数。 4. **`apply`与`call`方法**:用于绑定函数的执行上下文,`call`接受一系列参数,`apply`则接受参数...

Global site tag (gtag.js) - Google Analytics