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 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 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写的MySQL数据库用户认证系统代码
2007/03/22 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
python在不同层级目录import模块的方法
2016/01/31 Python
Java及python正则表达式详解
2017/12/27 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
python实例化对象的具体方法
2020/06/17 Python
什么是python的必选参数
2020/06/21 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
python中的插入排序的简单用法
2021/01/19 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
会计专业毕业生自荐书
2014/06/25 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
会议通知
2015/04/15 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
升职自荐书
2019/05/09 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis
Python之matplotlib绘制饼图
2022/04/13 Python
python前后端自定义分页器
2022/04/13 Python
Win2008系统搭建DHCP服务器
2022/06/25 Servers