关于JS中的apply,call,bind的深入解析


Posted in Javascript onApril 05, 2016

在Javascript中,Function是一种对象。Function对象中的this指向决定于函数被调用的方式。使用apply,call 与 bind 均可以改变函数对象中this的指向,在说区别之前还是先总结一下三者的相似之处:
1、都是用来改变函数的this对象的指向的。
2、第一个参数都是this要指向的对象。
3、都可以利用后续参数传参。

call方法:

语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply:

语法:apply(thisObj,数组参数)
定义:应用某一个对象的一个方法,用另一个对象替换当前对象
说明:如果参数不是数组类型的,则会报一个TypeError错误。

bind:

在EcmaScript5中扩展了叫bind的方法(IE6,7,8不支持),bind与call很相似,,例如,可接受的参数都分为两部分,且第一个参数都是作为执行时函数上下文中的this的对象。不同点有两个:
①bind的返回值是函数;②后面的参数的使用也有区别;

先看例子一:

 

function add(a, b) {
  alert(a + b);
}
function sub(a, b) {
  alert(a - b);
}

对于,call,可以这么用:
add.call(sub,3,1);结果为4

对于,apply,可以这么用;
add.apply(sub,[3,1]);结果为4

对于,bind,可以这么用:
add.bind(sub)(3,1);结果为4

可以看到输出结果都一样,但是传参用法不一样;

再看例子二:

function jone(name,age,work){
  this.name=name;
  this.age=age;
  this.work=work;
  this.say=function(msg){
    alert(msg+",我叫"+this.name+",我今年"+this.age+"岁,我是"+this.work)
  }
}
var jack={
  name:"jack",
  age:'24',
  work:"学生"
}
var pet=new jone();

pet.say.apply(jack,["欢迎您"])
console.log(this.name)

对于call,需要这样:
pet.say.call(jack,"欢迎您!")

对于apply,需要这样:
pet.say.apply(jack,["欢迎您!"])

对于bind,需要这样:
pet.say.bind(jack,"欢迎您")()

此时输出console.log(this.name),发现this.name为jack,this上下文已经发生改变了;

以上这篇关于JS中的apply,call,bind的深入解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
js获取一组日期中最近连续的天数
May 25 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
javascript中apply、call和bind的使用区别
Apr 05 #Javascript
JavaScript数组去重的两种方法推荐
Apr 05 #Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 #Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 #Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 #Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 #Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 #Javascript
You might like
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
提升Python程序运行效率的6个方法
2015/03/31 Python
Python中生成Epoch的方法
2017/04/26 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Python字典dict常用方法函数实例
2020/11/09 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
如何写一个自定义标签
2012/12/28 面试题
中学生期中自我鉴定
2014/04/20 职场文书
优质服务演讲稿
2014/05/14 职场文书
党代会心得体会
2014/09/04 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
寻找成龙观后感
2015/06/12 职场文书
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL