浅谈javascript中call()、apply()、bind()的用法


Posted in Javascript onApril 20, 2015

call(thisObj,arg1,arg2...)、apply(thisObj,[obj1,obj2...])这二个方法是每个函数都包含的非继承的方法

call(thisobj[, args])和apply(thisobj[, args])

作用都是一样的,简单来说就是改变当前使用该方法的对象中的this指向,指向调用方法中的thisObj对象二者的区别(第一个参数是相同的)就是call方法中传入的参数是是一个个列举出来的,而apply方法中的参数二是一个数组

还是举例说明比较直观:

window.color='red';
var o={color:"blue"};
function sayColor(){
alert(this.color);
};
sayColor(); //red(全局函数,this是window)
sayColor.call(this);//red(调用call方法,指定对象是this,这里的this是window,没什么意义)
sayColor.call(window);//red(调用call方法,指定对象是window,没什么意义)
sayColor.call(o); //blue (调用call方法,指定对象是o,所以this指代对象o,这里由原来的window指向了o)
sayColor.apply(o);//blue (调用call方法,指定对象是o,所以this指代对象o,这里由原来的window指向了o)

ECMAScript5中的bind()方法和前二种方法相似,bind()这个方法会创建一个函数的实例,这个实例的this值会被绑定到传递给bind()函数的值

例子:

function a(y){
return this.x+y;
};
var o={x:1};
var g=a.bind(o);
g(2);//3

从例子中可以看出函数a绑定到对象o上了,并且返回了新的函数g,调用g时,a函数会当作对象o的方法来调用 
bind()这个方法是将函数绑定到某个对象上,并且返回一个新的函数,这个新函数中传入的参数都将传入被绑定的函数上。

下面来看看他们的区别

在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 相关文章推荐
js返回上一页并刷新代码整理
Dec 21 Javascript
JS二维数组的定义说明
Mar 03 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
javascript中callee与caller的区别分析
Apr 20 #Javascript
javascript正则表达式中的replace方法详解
Apr 20 #Javascript
javascript正则表达式基础知识入门
Apr 20 #Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 #Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 #Javascript
JS解析XML文件和XML字符串详解
Apr 17 #Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 #Javascript
You might like
德生S2000电路分析
2021/03/02 无线电
一个php作的文本留言本的例子(五)
2006/10/09 PHP
做一个有下拉功能的留言版
2006/10/09 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
php教程之phpize使用方法
2014/02/12 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
python赋值操作方法分享
2013/03/23 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
详解Django中间件执行顺序
2018/07/16 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
C#笔试题集合
2013/06/21 面试题
商场开业庆典策划方案
2014/06/02 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
西双版纳导游词
2015/02/03 职场文书
食品药品安全责任书
2015/05/11 职场文书
工作感想范文
2015/08/07 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
详解CSS故障艺术
2021/05/25 HTML / CSS
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS