javascript中apply/call和bind的使用


Posted in Javascript onFebruary 15, 2017

fun.apply(context,[argsArray])

立即调用fun,同时将fun函数原来的this指向传入的新context对象,实现同一个方法在不同对象上重复使用。

context:传入的对象,替代fun函数原来的this;

argsArray:一个数组或者类数组对象,其中的数组参数会被展开作为单独的实参传给 fun 函数,需要注意参数的顺序。

fun.call(context,[arg1],[arg2],[…])

同apply,只是参数列表不同,call的参数需要分开一个一个传入。如果不知道参数个数,则使用apply。

使用:

Math.max()只接收单独的参数,通过下面的方法可以在数组上面使用max方法:

Math.max.apply(null, array);//会将array数组参数展开成单独的参数再传入
Array.prototype.push.apply(arr1,arr2);//将一个数组拆开push到另一个数组中;不用apply则会将后续数组参数当成一个元素push进去。
Array.prototype.slice.call(arguments);//在类素组对象上使用slice方法

fun.bind(context,[arg1],[arg2],[…])

使fun方法执行的context永不变。

arg1:要传递到新函数的参数列表

返回一个函数供后续调用,其函数体和原函数fun一样,但新函数的this指向新传入的context对象。新函数具有指定的初始参数,后续调用时的实参要往后面排。

var displayArgs = function (val1, val2, val3, val4) {
 console.log(val1 + " " + val2 + " " + val3 + " " + val4);
}
var emptyObject = {};
// 生成新函数时指定了2个参数
var displayArgs2 = displayArgs.bind(emptyObject, 12, "a");
// 调用时传入另2个参数,往后排
displayArgs2("b", "c");
// Output: 12 a b c

使用bind()方法改写slice()方法:

var _Slice = Array.prototype.slice;
var slice = Function.prototype.call.bind(_Slice);
slice(…);

bind()兼容Ie5~ie8处理

if (!Function.prototype.bind) {
 Function.prototype.bind = function(context) {
  var self = this, // 即调用bind方法的目标函数
  args = arguments;
  return function() {
   self.apply(context, Array.prototype.slice.call(args, 1));
  }
 }
}

一般情况下setTimeout()的this指向window或global对象。当使用类的方法时需要this指向类实例,就可以使用bind()将this绑定到调用对象。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
CSDN轮换广告图片轮换效果
Mar 27 Javascript
json跟xml的对比分析
Jun 10 Javascript
JS获取时间的方法
Jan 21 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
JS实现图片放大缩小的方法
Feb 15 #Javascript
JavaScript中的编码和解码函数
Feb 15 #Javascript
js date 格式化
Feb 15 #Javascript
JS实现最简单的冒泡排序算法
Feb 15 #Javascript
javascript设计模式之单体模式学习笔记
Feb 15 #Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 #Javascript
javascript设计模式之模块模式学习笔记
Feb 15 #Javascript
You might like
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
网站编辑求职信
2013/10/17 职场文书
招商业务员岗位职责
2013/12/16 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
个人授权委托书范本
2014/04/03 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
公民代理授权委托书
2014/09/24 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书