• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > javascript中apply/call和bind的使用

javascript中apply/call和bind的使用

作者:一天不码就慌慌 字体:[增加 减小] 来源:互联网 时间:2017-05-11

一天不码就慌慌通过本文主要向大家介绍了javascript中apply,javascript apply,call apply bind,js bind call apply,bind apply等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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方法
</div>

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
</div>

使用bind()方法改写slice()方法:

var _Slice = Array.prototype.slice;
var slice = Function.prototype.call.bind(_Slice);
slice(…); 
</div>

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));
  }
 }
}
</div>

一般情况下setTimeout()的this指向window或global对象。当使用类的方法时需要this指向类实例,就可以使用bind()将this绑定到调用对象。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 浅谈JavaScript中的apply/call/bind和this的使用
  • javascript中apply/call和bind的使用
  • JavaScript中的call和apply的用途以及区别

相关文章

  • 2017-05-11移动端界面的适配
  • 2017-05-11jQuery模拟下拉框选择对应菜单的内容
  • 2017-05-11分享一个精简的vue.js 图片lazyload插件实例
  • 2017-05-11Vue2.0实现1.0的搜索过滤器功能实例代码
  • 2017-05-11对称加密与非对称加密优缺点详解
  • 2017-05-11Angular2-primeNG文件上传模块FileUpload使用详解
  • 2017-05-11详解用vue-cli来搭建vue项目和webpack
  • 2017-05-11JS区分Object与Aarry的六种方法总结
  • 2017-05-11Vue.2.0.5过渡效果使用技巧
  • 2017-05-11Vue数据驱动模拟实现3

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • js仿拉勾网首页穿墙广告效果
    • canvas绘制环形进度条
    • 基于node.js依赖express解析post请求四种数据格式
    • jQuery加载及解析XML文件的方法实例分析
    • angular 基于ng-messages的表单验证实例
    • JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
    • 微信小程序实战之自定义模态弹窗(8)
    • javascript数据结构之串的概念与用法分析
    • 纯JS单页面赛车游戏制作代码分享
    • jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有