深入浅出 妙用Javascript中apply、call、bind
apply、call、bind的认识,并且列出一些它们的妙用加深记忆。
apply、call
在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。
JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。
先来一个栗子:
1
2
3
4
5
6
7
8
9
10
11
|
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 方法:
1
2
3
4
5
|
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 二者而言,作用完全一样,只是接受参数的方式不太一样。例如,有一个函数定义如下:
1
2
3
|
var func = function (arg1, arg2) {
};
|
就可以通过如下方式来调用:
1
2
|
func.call( this , arg1, arg2);
func.apply( this , [arg1, arg2])
|
其中 this 是你想指定的上下文,他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象),call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。
数组之间追加
1
2
3
4
|
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] */
|
获取数组中的最大值和最小值
1
2
3
|
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()方法没有被重写过)
1
2
3
|
functionisArray(obj){
return Object.prototype.toString.call(obj) === '[object Array]' ;
}
|
类(伪)数组使用数组方法
1
|
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 方法,常见的解决方法是:
1
2
3
4
5
|
function log(msg) {
console.log(msg);
}
log(1); //1
log(1,2); //1
|
上面方法可以解决最基本的需求,但是当传入参数的个数是不确定的时候,上面的方法就失效了,这个时候就可以考虑使用 apply 或者 call,注意这里传入多少个参数是不确定的,所以使用apply是最好的,方法如下:
1
2
3
4
5
|
function log(){
console.log.apply(console, arguments);
};
log(1); //1
log(1,2); //1 2
|
接下来的要求是给每一个 log 消息添加一个"(app)"的前辍,比如:
1
|
log( "hello world" ); //(app)hello world
|
该怎么做比较优雅呢?这个时候需要想到arguments参数是个伪数组,通过 Array.prototype.slice.call 转化为标准数组,再使用数组方法unshift,像这样:
1
2
3
4
5
6
|
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 ,这样我们可以在改变了上下文之后继续引用到它。 像这样:
1
2
3
4
5
6
7
8
9
10
|
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() 可以更加优雅的解决这个问题:
1
2
3
4
5
6
7
8
9
|
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 对象。再来一个简单的栗子:
1
2
3
4
5
6
7
8
9
|
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() 三次那么输出的值是什么呢?像这样:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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 呢。简单的一个栗子:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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 则是立即调用 。
转载于:https://www.cnblogs.com/hedengyao/p/6693821.html
深入浅出 妙用Javascript中apply、call、bind相关推荐
- [转] 深入浅出 妙用Javascript中apply、call、bind
[From] http://www.admin10000.com/document/6711.html 网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.ca ...
- 【优雅代码】深入浅出 妙用Javascript中apply、call、bind
这篇文章实在是很难下笔,因为网上相关文章不胜枚举. 巧合的是前些天看到阮老师的一篇文章的一句话: "对我来说,博客首先是一种知识管理工具,其次才是传播工具.我的技术文章,主要用来整理我还不懂 ...
- 深入浅出妙用 Javascript 中 apply、call、bind
这篇文章实在是很难下笔,因为网上相关文章不胜枚举. 巧合的是前些天看到阮老师的一篇文章的一句话: "对我来说,博客首先是一种知识管理工具,其次才是传播工具.我的技术文章,主要用来整理我还不懂 ...
- Javascript 中 apply、call、bind
在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大 ...
- 深入Javascript中apply、call、bind
最近在看一下node package的源码,发现很多里面都包含了function这个对象的apply.call.bind这三个方法,于是想拿出来再看看.. apply.call 在 javascrip ...
- JavaScript 中 apply 、call 的详解
apply 和 call 的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已. 原文作者:林 ...
- 关于javascript中apply()和call()方法
ref:http://www.popo4j.com/article/the-differences-of-apply-and-call.html 如果没接触过动态语言,以编译型语言的思维方式去理解ja ...
- javascript中apply、call和bind的区别
在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢. 在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的. 2.第一个参数都是this要指 ...
- JavaScript中apply的用法
1.对象的继承,一般的做法是复制:Object.extend prototype.js的实现方式是: Object.extend = function(destination, source) { f ...
- 关于javascript中apply()和call()方法的区别
原文地址:http://www.cnblogs.com/fighting_cp/archive/2010/09/20/1831844.html 转载于:https://www.cnblogs.com/ ...
最新文章
- centos6.5 架设Telnet服务
- == Equals ReferenceEquals 的区别
- install onnx_tensort
- Javascript 学习笔记 2: 标识语句
- C语言创建一个节点Node(附完整源码)
- None.org.apache.spark.api.python.PythonAccumulatorV2
- hadoop 2.7.2 + zookeeper 高可用集群部署
- sre8 sre10_是什么使SRE出色?
- 通过Spring @PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作
- 3d旋转--transform-style: preserve-3d,translate3d(x,y,z),perspective()
- discuz上传图片html,Discuz编辑器H5上传
- 公安人员审问四名窃贼嫌疑犯
- 计算机视觉、图像处理学习资料汇总(转)
- (每日更新)《虚拟现实VR资讯》(Yanlz+Unity+SteamVR+云技术+5G+AI=VR云游戏=云渲染+人机交互+立钻哥哥+==)
- STM32F1 时钟学习
- 信道状态信息(CSI)共轭相乘去噪法
- YOLOv5模型剪枝压缩
- PHP系列之集成Ajax实现登录验证
- 设置微信PC端代理使用burp抓取微信小程序的数据包
- 计算机管理员没设密码忘了怎么办,没有电脑路由器密码忘记了怎么办?
热门文章
- mysql可以复用删除的记录吗_MySQL学习(八)删除表数据
- java linux ifstat,ifstat命令
- 克隆硬盘后进不去系统_升级系统盘,迁移系统其实很简单
- java list 排序_java 对list进行排序
- Unity中Json文件编写注意
- Nginx源码分析 - 实战篇 - 编写一个自定义的模块(24)
- mac bigsur 360极速浏览器闪退问题解决方法
- 能识别nvme的pe启动_学用系列|Mathpix,送给理科老师们的公式识别神器
- matlab矩阵中每一行数除以一个数
- 大纲2.1 计算机网络