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 相关文章推荐
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
基于axios 的responseType类型的设置方法
Oct 29 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
php MessagePack介绍
2013/10/06 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[01:31]完美与DOTA2历程
2014/07/31 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
Python切片工具pillow用法示例
2018/03/30 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python爬取哈尔滨天气信息
2018/07/14 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
Python魔术方法专题
2020/06/19 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
中文师范生自荐信
2014/01/30 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
英文演讲稿开场白
2014/08/25 职场文书
员工试用期自我评价
2014/09/18 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
实习介绍信范文
2015/05/05 职场文书