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高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
Nov 06 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 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(7) php 字符串相关应用
2010/03/05 PHP
javascript 特殊字符串
2009/02/25 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
Python中的一些陷阱与技巧小结
2015/07/10 Python
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
python学习入门细节知识点
2018/03/29 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
pandas按条件筛选数据的实现
2021/02/20 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
秘书英文求职信
2014/04/16 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
停车位租赁协议书
2014/09/24 职场文书
工作保证书怎么写
2015/02/28 职场文书
房屋质量投诉书
2015/07/02 职场文书
PHP实现两种排课方式
2021/06/26 PHP
Java8中接口的新特性使用指南
2021/11/01 Java/Android