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当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
Angular.js中数组操作的方法教程
2017/07/31 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
Python join()函数原理及使用方法
2020/11/14 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
大专生的学习自我评价
2013/12/04 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
股东协议书范本2016
2016/03/21 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android