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 相关文章推荐
javascript 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 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
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
php导入模块文件分享
2015/03/17 PHP
php类的定义与继承用法实例
2015/07/07 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
两种php实现图片上传的方法
2016/01/22 PHP
php函数式编程简单示例
2019/08/08 PHP
一些常用的Javascript函数
2006/12/22 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
ExpressJS入门实例
2015/01/14 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
jupyter 导入csv文件方式
2020/04/21 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
Python request中文乱码问题解决方案
2020/09/17 Python
英语文学专业学生的自我评价
2013/10/31 职场文书
法律顾问服务方案
2014/05/15 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
Vue的过滤器你真了解吗
2022/02/24 Vue.js
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang