js中的bind、apply、call、callee、caller的区别
1、bind、apply与call的区别与使用
相同点:2者是函数原型的一个方法,因此调用者都必须是函数,第1个参数都是对象。作用是,用另一个对象替换当前对象,另一对象也即是你传的第一个参数。通常用于改变调用的函数中this的指向。如果不传对象或者传入的为null,那么默认对象就是window。bind方法是函数的方法,也是改变this的指向,返回新的函数。
不同点:第2个参数,为调用的函数的参数,区别是apply要求所有函数的参数放在一个数组中传递。
使用方法:
fun.bind(thisArg[,arg1[,arg2[,...]]])
fun.call(thisArg[, arg1[, arg2[, …]]]) fun.apply(thisArg, [arg1,arg2,…argN])
fun.call(this, arg1,arg2,arg3) == fun.apply(this, arguments) == this.fun(arg1, arg2, arg3)
var name = 'window-name';
function func() {
console.log(this.name);
}
func();
var obj = {
name: 'obj-name'
}
var f = func.bind(obj);
func();
f();

<script type="text/javascript">
function func(arg1, arg2) {
console.log(this)
if (arg1!=undefined) {
console.log(arg1);
}
if (arg2!=undefined) {
console.log(arg2);
}
}
var obj = { name: "dsfsd" }
console.log('-------apply的使用------- start');
func.apply();
func.apply(null);
func.apply(obj, ["apply-arg1", "apply-arg2"]);
console.log('-------apply的使用------- end');
console.log('-------call的使用------- start');
func.call()
func.call(null);
func.call(obj, "call-arg1", "call-arg2");
console.log('-------call的使用------- end');
</script>
运行效果:

2、callee
首先要介绍下arguments对象,他只能在js函数内部使用,是一个特殊对象,类似数组但又不是数组。使用索引方式可以获取到函数的参数值。而callee就是arguments对象的一个属性,作用是返回当前的Function对象,也即是当前的函数,因此在递归函数中经常会看到这种使用方式arguments.callee,后面可以加上函数的参数。
这样就死循环了。
function func(arg1) {
console.log(arguments.callee);
console.log(arguments.callee(10));
}
func(10);
3、caller
字面意思理解是当前函数的调用者,也即是谁调用了当前函数就返谁。返回当前函数的调用者,如果函数是顶层调用返回null。使用方法是:函数名.caller,后面也可以跟上函数的参数。
function func(arg1) {
console.log(func.caller);
func.caller(123456);
}
function func2(arg1) {
if (arg1!=undefined) {
console.log(arg1);
console.log(func2.caller);
} else {
console.log(func2.caller);
func();
}
}
func2();
第1次执行func2是顶层调用返回null。接着执行func,打印出func的调用者func2,接着执行func2(有参数),打印出参数值和func2的调用者func函数。

js中的bind、apply、call、callee、caller的区别的更多相关文章
- js中的bind方法的实现方法
js中目前我遇见的改变作用域的5中方法:call, apply, eval, with, bind. var obj = { color: 'green' } function demo () { c ...
- js中call和apply的实现原理
js中call和apply的实现原理 实现call的思路: /* 还有就是call方法是放在Function().prototype上的也就是构造函数才有的call方法 (我门可 ...
- jQuery中的.bind()、.live()和.delegate()之间区别分析
jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下. DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...
- js中的text(),html() ,val()的区别
js中的text(),html() ,val()的区别 text(),html() ,val()三个方法用于html元素的存值和取值,但是他们各有特点,text()用于html元素文本内容的存取,ht ...
- 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂
浅谈JS中的!=.== .!==.===的用法和区别 var num = 1; var str = '1'; var test = 1; test == num //tr ...
- js中call、apply、bind那些事
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...
- js中call、apply和bind的区别
在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢.在说区别之前还是先总结一下三者的相似之处:1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对 ...
- js中的call,apply,bind区别
在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...
- js中call、apply、bind那些事2
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如… 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...
- js中call、apply和bind到底有什么区别?
介绍 在js中,每个函数的原型都指向Function.prototype对象(js基于原型链的继承).因此,每个函数都会有apply,call,和bind方法,这些方法继承于Function. 它们的 ...
随机推荐
- Angular变更检测策略报错
报错信息: ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was ...
- 大数据和Hadoop平台介绍
大数据和Hadoop平台介绍 定义 大数据是指其大小和复杂性无法通过现有常用的工具软件,以合理的成本,在可接受的时限内对其进行捕获.管理和处理的数据集.这些困难包括数据的收入.存储.搜索.共享.分析和 ...
- 超级无敌详细使用ubuntu搭建hadoop完全分布式集群
一.软件准备 安装VMware 下载ubuntu镜像(阿里源ubuntu下载地址)选择自己适合的版本,以下我使用的是18.04-server版就是没有桌面的.安装桌面版如果自己电脑配置不行的话启动集群 ...
- 如何获取流式应用程序中checkpoint的最新offset
对于流式应用程序,保证应用7*24小时的稳定运行,是非常必要的.因此对于计算引擎,要求必须能够适应与应用程序逻辑本身无关的问题(比如driver应用失败重启.网络问题.服务器问题.JVM崩溃等),具有 ...
- python多线程——如何停止一个死循环的线程
进程想要执行任务就需要依赖线程.换句话说,就是进程中的最小执行单位就是线程,并且一个进程中至少有一个线程. 那什么是多线程?提到多线程这里要说两个概念,就是串行和并行,搞清楚这个,我们才能更好地理解多 ...
- 新鲜出炉!阿里巴巴,京东,美团面经汇总,已拿offer!
最近在后台收到了很多小伙伴的私信,说自己最近想好好准备一下,在不久后的秋招跳个槽往大厂冲击一下,想要我给大家整理出一份大厂面试题好用来做好准备.之前公司有点事比较忙就没回私信.最近好一点了我也是立马联 ...
- sql常用函数整理
SQL中包含以下七种类型的函数: 聚合函数:返回汇总值. 转型函数:将一种数据类型转换为另外一种. 日期函数:处理日期和时间. 数学函数:执行算术运算. 字符串函数:对字符串.二进制数据或表达式执行操 ...
- 将input 的文本框改为不可编辑状态
<input type="text" id = "textid" name="名称" value="值" size ...
- [BUGCASE]Phantom服务代码不健壮导致无法发送报表邮件
一.问题描述 广告平台中的发报表邮件功能偶尔会出现发送失败的情况,重启phantom服务之后就好了 查看phantom服务的日志发现,在2017-12-12 03:29:45有访问记录,并且参数是异常 ...
- 微前端大赏二-singlespa实践
微前端大赏二-singlespa实践 微前端大赏二-singlespa实践 序 介绍singleSpa singleSpa核心逻辑 搭建环境 vue main react child 生命周期 结论 ...