javascript中call,apply,bind的区别详解


Posted in Javascript onDecember 11, 2020

在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢。

在说区别之前还是先总结一下三者的相似之处:
1、都是用来改变函数的this对象的指向的。
2、第一个参数都是this要指向的对象。
3、都可以利用后续参数传参。

那么他们的区别在哪里的,先看一个例子。

var xw = {
     name : "小王",
     gender : "男",
     age : 24,
     say : function() {
       alert(this.name + " , " + this.gender + " ,今年" + this.age);                
        }
     }
     var xh = {
       name : "小红",
       gender : "女",
       age : 18
       }
     xw.say();

显示的肯定是小王 , 男 , 今年24。
那么如何用xw的say方法来显示xh的数据呢。
对于call可以这样:

xw.say.call(xh);

对于apply可以这样:

xw.say.apply(xh);

而对于bind来说需要这样:

xw.say.bind(xh)();

如果直接写xw.say.bind(xh)是不会有任何结果的,看到区别了吗?call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以。
那么call和apply有什么区别呢?我们把例子稍微改写一下。

var xw = {
            name : "小王",
            gender : "男",
            age : 24,
            say : function(school,grade) {
                alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                
            }
        }
        var xh = {
            name : "小红",
            gender : "女",
            age : 18
        }

可以看到say方法多了两个参数,我们通过call/apply的参数进行传参。
对于call来说是这样的

xw.say.call(xh,"实验小学","六年级");

而对于apply来说是这样的

xw.say.apply(xh,["实验小学","六年级"]);

看到区别了吗,call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。
那么bind怎么传参呢?它可以像call那样传参。

xw.say.bind(xh,"实验小学","六年级")();

但是由于bind返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参。

xw.say.bind(xh)("实验小学","六年级");

以上就是javascript中call,apply,bind的区别详解的详细内容,更多关于JavaScript call,apply,bind的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
深入理解vue中的$set
Jun 01 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
ant design vue中表格指定格式渲染方式
Oct 28 Javascript
使用js获取身份证年龄的示例代码
Dec 11 #Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 #Vue.js
node koa2 ssr项目搭建的方法步骤
Dec 11 #Javascript
uni-app 自定义底部导航栏的实现
Dec 11 #Javascript
微信小程序实现音乐播放页面布局
Dec 11 #Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 #Javascript
JS实现京东商品分类侧边栏
Dec 11 #Javascript
You might like
星际流派综述
2020/03/04 星际争霸
调频问题解答
2021/03/01 无线电
php whois查询API制作方法
2011/06/23 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
vue-axios使用详解
2017/05/10 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
三种Webpack打包方式(小结)
2018/09/19 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
python删除服务器文件代码示例
2018/02/09 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
非功能性需求都包括哪些方面
2013/10/29 面试题
策划主管的工作职责
2013/11/24 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
浅析Python中的套接字编程
2021/06/22 Python
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js
详解OpenCV曝光融合
2022/04/29 Python