浅谈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 相关文章推荐
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
原生js实现表格循环滚动
Nov 24 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
PHP 定界符 使用技巧
2009/06/14 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
php post换行的方法
2020/02/03 PHP
javascript 日期时间 转换的方法
2013/02/21 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
Python使用turtule画五角星的方法
2015/07/09 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
Python调用Windows命令打印文件
2020/02/07 Python
python不同系统中打开方法
2020/06/23 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
优秀员工评语
2014/02/10 职场文书
五水共治一句话承诺
2014/05/30 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2015年母亲节寄语
2015/03/23 职场文书
小学六一主持词开场白
2015/05/28 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript