关于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拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
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
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
php读取3389的脚本
2014/05/06 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
百度地图api如何使用
2015/08/03 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
layui使用label标签的方法
2019/09/14 Javascript
iview实现图片上传功能
2020/06/29 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
python多进程读图提取特征存npy
2019/05/21 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
高校学生干部的自我评价分享
2013/11/04 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
人事任命通知书
2015/04/21 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android