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 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
angularJS开发注意事项
May 26 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 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判断上传文件类型的解决办法
2015/10/20 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
值得收藏的10道python 面试题
2019/04/15 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
同居协议书范本
2014/04/23 职场文书
物资采购方案
2014/06/12 职场文书
施工安全责任书范本
2014/07/24 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
个人自我剖析材料
2014/09/30 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL