前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript中apply、call、bind的区别与用法

JavaScript中apply、call、bind的区别与用法

作者头像
前端达人
发布2019-12-24 13:48:37
1.1K0
发布2019-12-24 13:48:37
举报
文章被收录于专栏:前端达人前端达人
apply()、call()和bind()方法都是Function.prototype对象中的方法,而所有的函数都是Function的实例。三者都可以改变this的指向,将函数绑定到上下文中。

1. 语法

1.1 Function.prototype.apply()

apply() 方法调用一个函数, 其具有一个指定的this值,以及作为一个数组(或类似数组的对象)提供的参数。 语法: func.apply(thisArg, [argsArray])

1.2 Function.prototype.call()

call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。 语法: fun.call(thisArg, arg1, arg2, ...)

1.3 Function.prototype.bind()

bind()方法创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。 语法: fun.bind(thisArg, 队列or数组)()

2. 用法

这三个方法的用法非常相似,将函数绑定到上下文中,即用来改变函数中this的指向。

2.1 普通写法

2.2 call 与apply方法的用法

结果相同,call()和apply(),第一个参数都是要绑定上下文,后面的参数是要传递给调用该方法的函数的。不同之处在于,在给调用函数传递参数时,apply()是数组,call()参数是逐个列出的。

2.3 bind()的用法

bind方法传递给调用函数的参数可以逐个列出,也可以写在数组中。bind方法与call、apply最大的不同就是前者返回一个绑定上下文的函数,而后两者是直接执行了函数。因此,以上代码也可以这样写:

总结bind()的用法:该方法创建一个新函数,称为绑定函数,绑定函数会以创建它时传入bind()的第一个参数作为this,传入bind()的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

3. 应用场景

3.1 求数组中的最大和最小值

3.2将类数组转化为数组

3.3 数组追加

3.4 判断变量类型

3.5 利用call和apply做继承

3.6 使用 log 代理 console.log

4. 总结

  • (1).三者都可以改变函数的this对象指向。
  • (2).三者第一个参数都是this要指向的对象,如果如果没有这个参数,默认指向全局window。
  • (3).三者都可以传参,但是apply是数组,而call是有顺序的传入。
  • (4).bind 是返回对应函数,便于稍后调用;apply 、call 则是立即执行 。

5. 参考链接

  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call
  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
  • jianshu.com/p/bc541afad
  • https://www.cnblogs.com/xljzlw/p/3775162.html

本文作者:蒙蒙 原文链接:https://zhuanlan.zhihu.com/p/35167937

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-12-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 语法
  • 1.1 Function.prototype.apply()
  • 1.2 Function.prototype.call()
  • 1.3 Function.prototype.bind()
  • 2. 用法
  • 2.1 普通写法
  • 2.3 bind()的用法
  • 3. 应用场景
  • 3.1 求数组中的最大和最小值
  • 5. 参考链接
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档