浅谈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 相关文章推荐
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
js实现select下拉框菜单
Dec 08 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
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
推荐php模板技术[转]
2007/01/04 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
javascript 获取网页参数系统
2008/07/19 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Python实现的HTTP并发测试完整示例
2020/04/23 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
遇到的Mysql的面试题
2014/06/29 面试题
汽车驾驶求职信
2013/10/25 职场文书
二手房购房意向书范本
2014/04/01 职场文书
毕业生就业协议书
2014/04/11 职场文书
党员个人年度总结
2015/02/14 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
竞聘书的秘诀
2019/04/02 职场文书