Javascript中apply、call、bind的巧妙使用


Posted in Javascript onAugust 18, 2016

apply、call

在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。

JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

先来一个栗子:

function fruits() {}
fruits.prototype = {
color: "red",
say: function() {
console.log("My color is " + this.color);
}
}
var apple = new fruits;
apple.say(); //My color is red

但是如果我们有一个对象banana= {color : "yellow"} ,我们不想对它重新定义 say 方法,那么我们可以通过 call 或 apply 用 apple 的 say 方法:

banana = {
color: "yellow"
}
apple.say.call(banana); //My color is yellow
apple.say.apply(banana); //My color is yellow

所以,可以看出 call 和 apply 是为了动态改变 this 而出现的,当一个 object 没有某个方法(本栗子中banana没有say方法),但是其他的有(本栗子中apple有say方法),我们可以借助call或apply用其它对象的方法来操作。

apply、call 的区别

对于 apply、call 二者而言,作用完全一样,只是接受参数的方式不太一样。例如,有一个函数定义如下:

var func = function(arg1, arg2) {
};

就可以通过如下方式来调用:

func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2])

其中 this 是你想指定的上下文,他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象),call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。

JavaScript 中,某个函数的参数数量是不固定的,因此要说适用条件的话,当你的参数是明确知道数量时用 call 。

而不确定的时候用 apply,然后把参数 push 进数组传递进去。当参数数量不确定时,函数内部也可以通过 arguments 这个伪数组来遍历所有的参数。

为了巩固加深记忆,下面列举一些常用用法:

数组之间追加

var array1 = [12 , "foo" , {name "Joe"} , -2458]; 
var array2 = ["Doe" , 555 , 100]; 
Array.prototype.push.apply(array1, array2); 
/* array1 值为 [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

获取数组中的最大值和最小值

var numbers = [5, 458 , 120 , -215 ]; 
var maxInNumbers = Math.max.apply(Math, numbers), //458
maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

number 本身没有 max 方法,但是 Math 有,我们就可以借助 call 或者 apply 使用其方法。

验证是否是数组(前提是toString()方法没有被重写过)

functionisArray(obj){ 
return Object.prototype.toString.call(obj) === '[object Array]' ;
}

类(伪)数组使用数组方法

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

Javascript中存在一种名为伪数组的对象结构。比较特别的是 arguments 对象,还有像调用 getElementsByTagName , document.childNodes 之类的,它们返回NodeList对象都属于伪数组。不能应用 Array下的 push , pop 等方法。

但是我们能通过 Array.prototype.slice.call 转换为真正的数组的带有 length 属性的对象,这样 domNodes 就可以应用 Array 下的所有方法了。

深入理解运用apply、call

下面就借用一道面试题,来更深入的去理解下 apply 和 call 。

定义一个 log 方法,让它可以代理 console.log 方法,常见的解决方法是:

function log(msg) {
console.log(msg);
}
log(1); //1
log(1,2); //1

上面方法可以解决最基本的需求,但是当传入参数的个数是不确定的时候,上面的方法就失效了,这个时候就可以考虑使用 apply 或者 call,注意这里传入多少个参数是不确定的,所以使用apply是最好的,方法如下:

function log(){
console.log.apply(console, arguments);
};
log(1); //1
log(1,2); //1 2

接下来的要求是给每一个 log 消息添加一个"(app)"的前辍,比如:

log("hello world"); //(app)hello world

该怎么做比较优雅呢?这个时候需要想到arguments参数是个伪数组,通过 Array.prototype.slice.call 转化为标准数组,再使用数组方法unshift,像这样:

function log(){
var args = Array.prototype.slice.call(arguments);
args.unshift('(app)');
console.log.apply(console, args);
};

bind 详解

说完了 apply 和 call ,再来说说bind。bind() 方法与 apply 和 call 很相似,也是可以改变函数体内 this 的指向。

MDN的解释是:bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

直接来看看具体如何使用,在常见的单体模式中,通常我们会使用 _this , that , self 等保存 this ,这样我们可以在改变了上下文之后继续引用到它。 像这样:

var foo = {
bar : 1,
eventBind: function(){
var _this = this;
$('.someClass').on('click',function(event) {
/* Act on the event */
console.log(_this.bar); //1
});
}
}

由于 Javascript 特有的机制,上下文环境在 eventBind:function(){ } 过渡到 $('.someClass').on('click',function(event) { }) 发生了改变,上述使用变量保存 this 这些方式都是有用的,也没有什么问题。当然使用 bind() 可以更加优雅的解决这个问题:

var foo = {
bar : 1,
eventBind: function(){
$('.someClass').on('click',function(event) {
/* Act on the event */
console.log(this.bar); //1
}.bind(this));
}
}

在上述代码里,bind() 创建了一个函数,当这个click事件绑定在被调用的时候,它的 this 关键词会被设置成被传入的值(这里指调用bind()时传入的参数)。因此,这里我们传入想要的上下文 this(其实就是 foo ),到 bind() 函数中。然后,当回调函数被执行的时候, this 便指向 foo 对象。再来一个简单的栗子:

var bar = function(){
console.log(this.x);
}
var foo = {
x:3
}
bar(); // undefined
var func = bar.bind(foo);
func(); // 3

这里我们创建了一个新的函数 func,当使用 bind() 创建一个绑定函数之后,它被执行的时候,它的 this 会被设置成 foo , 而不是像我们调用 bar() 时的全局作用域。

有个有趣的问题,如果连续 bind() 两次,亦或者是连续 bind() 三次那么输出的值是什么呢?像这样:

var bar = function(){
console.log(this.x);
}
var foo = {
x:3
}
var sed = {
x:4
}
var func = bar.bind(foo).bind(sed);
func(); //?
var fiv = {
x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //?

答案是,两次都仍将输出 3 ,而非期待中的 4 和 5 。原因是,在Javascript中,多次 bind() 是无效的。更深层次的原因, bind() 的实现,相当于使用函数在内部包了一个 call / apply ,第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的。

apply、call、bind比较

那么 apply、call、bind 三者相比较,之间又有什么异同呢?何时使用 apply、call,何时使用 bind 呢。简单的一个栗子:

var obj = {
x: 81,
};
var foo = {
getX: function() {
return this.x;
}
}
console.log(foo.getX.bind(obj)()); //81
console.log(foo.getX.call(obj)); //81
console.log(foo.getX.apply(obj)); //81

三个输出的都是81,但是注意看使用 bind() 方法的,他后面多了对括号。

也就是说,区别是,当你希望改变上下文环境之后并非立即执行,而是回调执行的时候,使用 bind() 方法。而 apply/call 则会立即执行函数。

再总结一下:

•apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;

•apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;

•apply 、 call 、bind 三者都可以利用后续参数传参;

•bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。

以上所述是小编给大家介绍的Javascript中apply、call、bind的巧妙使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
javascript中indexOf技术详解
May 07 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 #Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 #Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 #Javascript
AngularJS入门教程之静态模板详解
Aug 18 #Javascript
AngularJS入门教程引导程序
Aug 18 #Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 #Javascript
js 获取站点应用名的简单实例
Aug 18 #Javascript
You might like
php下使用SMTP发邮件的代码
2008/01/10 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
javascript 函数速查表
2010/02/07 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
JS实现图片切换特效
2019/12/23 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
Python字符串处理函数简明总结
2015/04/13 Python
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
python线程的几种创建方式详解
2019/08/29 Python
Django之模板层的实现代码
2019/09/09 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
python中setuptools的作用是什么
2020/06/19 Python
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
自动化专业个人求职信范文
2013/12/30 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
重阳节活动总结
2014/08/27 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
2014年公司工作总结
2014/11/22 职场文书
读书笔记格式
2015/07/02 职场文书
Java版 单机五子棋
2022/05/04 Java/Android
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS
hive数据仓库新增字段方法
2022/06/25 数据库