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的区别的更多相关文章

  1. js中的bind方法的实现方法

    js中目前我遇见的改变作用域的5中方法:call, apply, eval, with, bind. var obj = { color: 'green' } function demo () { c ...

  2. js中call和apply的实现原理

    js中call和apply的实现原理            实现call的思路: /* 还有就是call方法是放在Function().prototype上的也就是构造函数才有的call方法 (我门可 ...

  3. jQuery中的.bind()、.live()和.delegate()之间区别分析

    jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下.   DOM树   首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...

  4. js中的text(),html() ,val()的区别

    js中的text(),html() ,val()的区别 text(),html() ,val()三个方法用于html元素的存值和取值,但是他们各有特点,text()用于html元素文本内容的存取,ht ...

  5. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  6. js中call、apply、bind那些事

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

  7. js中call、apply和bind的区别

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢.在说区别之前还是先总结一下三者的相似之处:1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对 ...

  8. js中的call,apply,bind区别

    在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...

  9. js中call、apply、bind那些事2

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如… 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

  10. js中call、apply和bind到底有什么区别?

    介绍 在js中,每个函数的原型都指向Function.prototype对象(js基于原型链的继承).因此,每个函数都会有apply,call,和bind方法,这些方法继承于Function. 它们的 ...

随机推荐

  1. Freebsd10.2安装包升级pkg引起环境破坏的解决

    前言 freebsd10.2环境在安装一个新软件包的时候提示升级pkg到1.10.1,然后点击了升级,然后整个pkg环境就无法使用了 记录 升级完了软件包以后第一个错误提示 FreeBSD: /usr ...

  2. [原题复现][CISCN 2019 初赛]WEB-Love Math(无参数RCE)[未完结]

    简介  原题复现:  考察知识点:无参数命令执行  线上平台:https://buuoj.cn(北京联合大学公开的CTF平台) 榆林学院内可使用信安协会内部的CTF训练平台找到此题 源码审计 代码 1 ...

  3. (buuctf) - pwn入门部分wp - rip -- pwn1_sctf_2016

    [buuctf]pwn入门 pwn学习之路引入 栈溢出引入 test_your_nc [题目链接] 注意到 Ubuntu 18, Linux系统 . nc 靶场 nc node3.buuoj.cn 2 ...

  4. 面试阿里,字节,美团必看的Spring的Bean管理详解

    IOC容器 工厂只负责创建对象,而Spring当然不仅仅是一个对象工厂,其核心是一个对象容器,其具备控制反转的能力,所以也称为IOC容器. 帮助我们存放对象,并且管理对象,包括:创建.销毁.装配,这样 ...

  5. Network_01

    (从实践中学习TCP/IP协议读书笔记) 准备工作: 安装Kali Linux系统: 在VMWare中安装,选Debian 8.x 64bit,ISO镜像地址,在下载完镜像后,在VMWare中把镜像挂 ...

  6. Model class apps.goods.models.GoodsType doesn't declare an explicit app_label and isn't in an application in INSTALLED_APPS

    在admin.py注册这个model时,报了个错: RuntimeError: Model class apps.goods.models.GoodsType doesn't declare an e ...

  7. 精尽MyBatis源码分析 - SQL执行过程(二)之 StatementHandler

    该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...

  8. 思维导图MindManager属性功能怎么合理使用

    在MindManager中为主题添加相应的标注可以使读者更好的理解主题内容,增强导图的可读性,因此,如何在MindManager中为主题添加标注也就成了我们的关注点. 巧妙使用这款思维导图软件的属性功 ...

  9. 开源认证和访问控制的利器keycloak使用简介

    目录 简介 安装keycloak 创建admin用户 创建realm和普通用户 使用keycloak来保护你的应用程序 安装WildFly client adapter 注册WildFly应用程序 安 ...

  10. HTML+JavaScript画函数图像

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...