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中dialog属性小记
Sep 03 Javascript
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
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中使用gettext来支持多语言的方法
2011/05/02 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
一篇不错的Python入门教程
2007/02/08 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python中pass语句用法实例分析
2015/04/30 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
python简单猜数游戏实例
2015/07/09 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
自我鉴定三原则
2014/01/13 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
爱护草坪标语
2014/06/24 职场文书
调研座谈会发言材料
2014/08/23 职场文书
五年级数学教学反思
2016/02/16 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
python自动计算图像数据集的RGB均值
2021/06/18 Python