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触发事件的时候总是带着匿名函数的
2、callee
JScript参考中的说明为:返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文。
// 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触发事件的时候总是带着匿名函数的
2、callee
JScript参考中的说明为:返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文。
需要注意的是callee拥有length属性,这个在有的时候用于验证还是比较好的。
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是形参长度,由此可以判断调用时形参长度是否和实参长度一致。
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的"真正"作用了。
Power By BlueDestiny, never-online, http://www.never-online.net
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]您可能感兴趣的文章:
- js apply/call/caller/callee/bind使用方法与区别分析
- javascript下arguments,caller,callee,call,apply示例及理解
- js中arguments,caller,callee,apply的用法小结
- 理解Javascript的caller,callee,call,apply区别
- 理解JavaScript的caller,callee,call,apply
- JavaScript中的apply()方法和call()方法使用介绍
- js中继承的几种用法总结(apply,call,prototype)
- 详解js中的apply与call的用法
- javascript中apply和call方法的作用及区别说明
- javascript中callee与caller的用法和应用场景
- javascript中callee与caller的区别分析
- javascript中call,apply,callee,caller用法实例分析
相关文章
-
深入学习JavaScript中的bom
Bom:浏览器对象模型提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作,下面我们来一起学习一下吧 2019-05-05
-
JavaScript创建对象的七种方式全面总结
这篇文章主要介绍了JavaScript创建对象的七种方式,工厂模式,构造函数模式,原型模式等分别在本文中做出了讲解,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。 2017-08-08
-
JavaScript var声明变量背后的原理示例解析
只要是写过点JS代码,很简单一个var 就完事了,那么JS编译器背后它又发生了什么呢?在本文将为大家详细介绍下,感兴趣的朋友不要错过 2013-10-10
-
JavaScript变量的作用域全解析
这篇文章主要介绍了JavaScript变量的作用域的基本知识,是JavaScript入门学习中的基础知识,需要的朋友可以参考下 2015-08-08
-
JavaScript中的Navigator浏览器对象
2008-01-01
-
JavaScript入门之基本函数详解
函数,在C语言之类的过程式语言中,是顶级的实体,而在Java/C++之类的面向对象的语言中,则被对象包装起来,一般称为对象的方法。而在JavaScript中,函数本身与其他任何的内置对象在低位上是没有任何区别的,也就是说,函数本身也是对象 2011-10-10
-
js 实现复制到粘贴板的功能代码
主要是用到了 window.clipboardData.setData("Text",copyText); 2010-05-05
-
JavaScript的strict模式与with关键字介绍
这篇文章主要介绍了JavaScript的strict模式与with关键字,需要的朋友可以参考下 2014-02-02
-
javascript 数组的方法集合
我们经常用到js的数组,因为他方便控制,所以他的一些方法,大家一定要熟练应用 2008-06-06
-
JavaScript中this的使用详解
初学JavaScript时的我们,多多少少都拜访过this,却又总是找不准时机,屡屡与其擦肩而过。其实this一直就在那里 2013-11-11
最新评论
大家感兴趣的内容
- 1js split 的用法和定义 js split
- 2window.location.href的用法(动态
- 3js 小数取整的函数
- 4JavaScript中判断两个字符串是否
- 5JS array 数组详解
- 6向JavaScript的数组中添加元素的
- 7基于JavaScript 声明全局变量的三
- 8Javascript Math ceil()、floor(
- 9HTML复选框和单选框 checkbox和r
- 10JavaScript window.setTimeout()
最近更新的内容
- 你所要知道JS(DHTML)中的一些技巧
- Es6 写的文件import 起来解决方案详解
- js装饰设计模式学习心得
- Javascript调试工具(下载)
- DOM基础教程之事件类型
- JavaScript前端图片加载管理器imagepool使
- 深入理解JavaScript中的对象复制(Object
- js实现日历可获得指定日期周数及星期几示
- 浅析JavaScript中的对象类型Object
- PHP守护进程实例
常用在线小工具
微信投稿脚本任务在线工具
关注微信公众号
关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿
©CopyRight 2006-2021 JB51.Net Inc All Rights Reserved. 脚本之家 版权所有
以上就是Javascript - 全面理解 caller,callee,call,apply的详细内容,更多请关注本站其它相关文章!