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获取当前日期代码适用于网页头部
Jun 27 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
js图片处理示例代码
May 12 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
手把手教你实现 Promise的使用方法
Sep 02 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 Rename 更改文件、文件夹名称
2011/05/24 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
js实例属性和原型属性示例详解
2014/11/23 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
python读写csv文件方法详细总结
2019/07/05 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
税务会计岗位职责
2014/02/18 职场文书
社区志愿者活动总结
2014/06/26 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
学生个人评语大全
2015/01/04 职场文书
六一儿童节开幕词
2015/01/29 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL