浅谈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实现面向对象类的功能书写技巧
Mar 07 Javascript
关于document.cookie的使用javascript
Oct 29 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
如何用vue实现网页截图你知道吗
Nov 17 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
2020最新CPU的性能排名
2020/04/02 数码科技
PHP入门速成(2)
2006/10/09 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
利用php生成验证码
2017/02/23 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
让textarea自动调整大小的js代码
2011/04/12 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
讲解vue-router之什么是动态路由
2018/05/28 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
python导入库的具体方法
2020/06/18 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
财务经理的岗位职责
2013/12/17 职场文书
材料采购员岗位职责
2013/12/17 职场文书
毕业生的自我评价范文
2013/12/31 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
应聘护士求职信
2014/07/21 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers