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 相关文章推荐
JS判断两个时间大小的示例代码
Jan 28 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
深入探究node之Transform
Jul 20 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 Javascript
vue项目中微信登录的实现操作
Sep 08 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设计模式 Factory(工厂模式)
2011/06/26 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
探究python中open函数的使用
2016/03/01 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
python之文件读取一行一行的方法
2018/07/12 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
深入浅析python的第三方库pandas
2020/02/13 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
介绍一下linux的文件系统
2015/10/06 面试题
Python中pass语句的作用是什么
2016/06/01 面试题
教师辞职报告范文
2014/01/20 职场文书
法制宣传月活动总结
2014/04/29 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
应届生简历自我评价
2015/03/11 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
Echarts如何重新渲染实例详解
2022/05/30 Javascript