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 相关文章推荐
JQuery 学习笔记 选择器之二
Jul 23 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
使用PHP实现密保卡功能实现代码<打包下载直接运行>
2011/10/09 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
php数组添加元素方法小结
2014/12/20 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
js类型检查实现代码
2010/10/29 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
详解vue-router基本使用
2017/04/18 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
pyqt和pyside开发图形化界面
2014/01/22 Python
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
python编写爬虫小程序
2015/05/14 Python
Python中如何获取类属性的列表
2016/12/26 Python
python和ruby,我选谁?
2017/09/13 Python
allbeauty美国:英国在线美容店
2019/03/11 全球购物
法学研究生自我鉴定范文
2013/12/04 职场文书
导游的职业规划书范文
2013/12/27 职场文书
公司司机岗位职责
2014/02/07 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
公司晚会主持词
2014/03/22 职场文书
助理政工师申报材料
2014/06/03 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
优质护理心得体会
2016/01/22 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server