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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
node.js入门学习之url模块
Feb 25 Javascript
Vue实现简单的拖拽效果
Aug 25 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 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
php事件驱动化设计详解
2016/11/10 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
javascript实现拼图游戏
2021/01/29 Javascript
Python下的subprocess模块的入门指引
2015/04/16 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
创先争优承诺书范文
2014/03/31 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
武侯祠导游词
2015/02/04 职场文书
辞职信的写法
2015/02/27 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
《风筝》教学反思
2016/02/23 职场文书
nginx配置之并发频次限制
2022/04/18 Servers