javascript中apply、call和bind的使用区别


Posted in Javascript onApril 05, 2016

在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可以这样:

1.xw.say.call(xh);

对于apply可以这样:

1.xw.say.apply(xh);

而对于bind来说需要这样:

1.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来说是这样的

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

而对于apply来说是这样的

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

看到区别了吗,call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。

那么bind怎么传参呢?它可以像call那样传参。

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

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

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

以上这篇javascript中apply、call和bind的使用区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JScript的条件编译
May 29 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
Javascript之datagrid查询详解
Sep 15 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
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 #Javascript
You might like
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
python中的插入排序的简单用法
2021/01/19 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
七年级英语教学反思
2014/01/15 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
担保贷款承诺书
2015/04/30 职场文书
英雄儿女观后感
2015/06/09 职场文书
python实现批量移动文件
2021/04/05 Python
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
python_tkinter弹出对话框创建
2022/03/20 Python