详解js中的apply与call的用法
前言
call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向。
call 和 apply二者的作用完全一样,只是接受参数的方式不太一样。
方法定义
applyFunction.apply(obj,args)
方法能接收两个参数:
obj:这个对象将代替Function类里this对象
args:这个是数组或类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数。
call
call方法与apply方法的第一个参数是一样的,只不过第二个参数是一个参数列表
在非严格模式下当我们第一个参数传递为null或undefined时,函数体内的this会指向默认的宿主对象,在浏览器中则是window
1
2
3
4
5
|
var test = function (){ console.log( this ===window); } test.apply( null ); //true test.call(undefined); //true |
用法
"劫持"别人的方法
此时foo中的logName方法将被bar引用 ,this指向了bar
1
2
3
4
5
6
7
8
9
10
|
var foo = { name: "mingming" , logName: function (){ console.log( this .name); } } var bar={ name: "xiaowang" }; foo.logName.call(bar); //xiaowang |
实现继承
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function Animal(name){ this .name = name; this .showName = function (){ console.log( this .name); } } function Cat(name){ Animal.call( this , name); } var cat = new Cat( "Black Cat" ); cat.showName(); //Black Cat |
在实际开发中,经常会遇到this指向被不经意改变的场景。
有一个局部的fun方法,fun被作为普通函数调用时,fun内部的this指向了window,但我们往往是想让它指向该#test节点,见如下代码:
1
2
3
4
5
6
7
8
|
window.id= "window" ; document.querySelector( '#test' ).onclick = function (){ console.log( this .id); //test var fun = function (){ console.log( this .id); } fun(); //window } |
使用call,apply我们就可以轻松的解决这种问题了
1
2
3
4
5
6
7
8
|
window.id= "window" ; document.querySelector( '#test' ).onclick = function (){ console.log( this .id); //test var fun = function (){ console.log( this .id); } fun.call( this ); //test } |
当然你也可以这样做,不过在ECMAScript 5的strict模式下,这种情况下的this已经被规定为不会指向全局对象,而是undefined:
1
2
3
4
5
6
7
8
9
|
window.id= "window" ; document.querySelector( '#test' ).onclick = function (){ var that = this ; console.log( this .id); //test var fun = function (){ console.log(that.id); } fun(); //test } |
1
2
3
4
5
|
function func(){ "use strict" alert ( this ); // 输出:undefined } func(); |
其他用法
类数组
这里把符合以下条件的对象称为类数组
1.具有length属性
2.按索引方式存储数据
3.不具有数组的push,pop等方法
常见类数组有 arguments,NodeList!
1
2
3
4
|
( function (){ Array.prototype.push.call(arguments,4); console.log(arguments); //[1, 2, 3, 4] })(1,2,3) |
这样就往arguments中push一个4进去了
Array.prototype.push
页可以实现两个数组合并
同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来装换一下这个数组,即:
1
2
3
4
|
var arr1= new Array( "1" , "2" , "3" ); var arr2= new Array( "4" , "5" , "6" ); Array.prototype.push.apply(arr1,arr2); console.log(arr1); //["1", "2", "3", "4", "5", "6"] |
也可以这样理解,arr1调用了push方法,参数是通过apply将数组装换为参数列表的集合.
再比如我想求类数组中的最大值
1
2
3
4
|
( function (){ var maxNum = Math.max.apply( null ,arguments); console.log(maxNum); //56 })(34,2,56); |
判断类型
1
2
3
4
5
6
7
|
console.log(Object.prototype.toString.call(123)) //[object Number] console.log(Object.prototype.toString.call('123')) //[object String] console.log(Object.prototype.toString.call(undefined)) //[object Undefined] console.log(Object.prototype.toString.call(true)) //[object Boolean] console.log(Object.prototype.toString.call({})) //[object Object] console.log(Object.prototype.toString.call([])) //[object Array] console.log(Object.prototype.toString.call(function(){})) //[object Function] |
以上就是apply与call的用法总结的全部内容,欢迎大家积极留言参加讨论,也希望本文对大家学习javascript有所帮助。
详解js中的apply与call的用法的更多相关文章
- 详解Linux中的cat文本输出命令用法
作系统 > LINUX > 详解Linux中的cat文本输出命令用法 Linux命令手册 发布时间:2016-01-14 14:14:35 作者:张映 我要评论 这篇 ...
- 详解js中的闭包
前言 在js中,闭包是一个很重要又相当不容易完全理解的要点,网上关于讲解闭包的文章非常多,但是并不是非常容易读懂,在这里以<javascript高级程序设计>里面的理论为基础.用拆分的方式 ...
- 详解js中的寄生组合式继承
寄生组合式继承是js中最理想的继承方式, 最大限度的节省了内存空间. js中的寄生组合式继承要求是: 1.子对象有父对象属性的副本, 且这些不应该保存在子对象的prototype上. 2. ...
- 详解JS中DOM 元素的 attribute 和 property 属性
一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...
- 详解Js中文件读取机制
前言,文件读取是提高应用体验度的必须接口,应用场景中需求很频繁. Js处理文件读取,由于处于安全方面的考虑,在2000年以前,都是以“<input type="file"&g ...
- pandas | 详解DataFrame中的apply与applymap方法
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是pandas数据处理专题的第5篇文章,我们来聊聊pandas的一些高级运算. 在上一篇文章当中,我们介绍了panads的一些计算方法, ...
- 详解JS中Number()、parseInt()和parseFloat()的区别
三者的作用: Number(): 可以用于任何数据类型转换成数值: parseInt().parseFloat(): 专门用于把字符串转换成数值: 一.Number( ): (1)如果是Boolean ...
- 详解 JS 中 new 调用函数原理
JavaScript 中经常使用构造函数创建对象(通过 new 操作符调用一个函数),那在使用 new 调用一个函数的时候到底发生了什么?先看几个例子,再解释背后发生了什么. 1)看三个例子 1.1 ...
- 详解js中的this指向
this指向问题是个老生常谈的问题了,现在我给大家一个例子 var obj={ bar:'Cynthia' , foo:function(){ console.log(this.bar,"w ...
随机推荐
- Shell脚本 Hello World
#!/bin/bash echo "Hello World !" “#!” 是一个约定的标记,它告诉系统这个脚本需要什么解释器来执行,即使用哪一种Shell.echo命令用于向窗口 ...
- Java编程的逻辑 (29) - 剖析String
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...
- [数据结构]最小生成树算法Prim和Kruskal算法
最小生成树 在含有n个顶点的连通图中选择n-1条边,构成一棵极小连通子图,并使该连通子图中n-1条边上权值之和达到最小,则称其为连通网的最小生成树. 例如,对于如上图G4所示的连通网可以有多棵权值总 ...
- hbase源码系列(十四)Compact和Split
先上一张图讲一下Compaction和Split的关系,这样会比较直观一些. Compaction把多个MemStore flush出来的StoreFile合并成一个文件,而Split则是把过大的文件 ...
- jQuery源代码解析(3)—— ready载入、queue队列
ready.queue放在一块写,没有特殊的意思,仅仅是相对来说它俩可能源代码是最简单的了.ready是在dom载入完毕后.以最高速度触发,非常实用. queue是队列.比方动画的顺序触发就是通过默认 ...
- Android Studio生成keystore签名文件步骤讲解
Android App打包时要用到签名文件,Android Studio生成签名文件步骤如下: Build---Generate Signed Apk...如图: 如果你的project中有2个或者2 ...
- Linux 下用管道执行 ps aux | grep 进程ID 来获取CPU与内存占用率
#include <stdio.h> #include <unistd.h> int main() { char caStdOutLine[1024]; // ps ...
- 浅谈C++中对象的复制与对象之间的相互赋值
C++对象的复制 有时需要用到多个完全相同的对象,例如,同一型号的每一个产品从外表到内部属性都是一样的,如果要对每一个产品分别进行处理,就需要建立多个同样的对象,并要进行相同的初始化,用以前的办法定义 ...
- nano 命令 linux
用途说明 nano是一个字符终端的文本编辑器,有点像DOS下的editor程序.它比vi/vim要简单得多,比较适合Linux初学者使用.某些Linux发行版的默认编辑器就是nano.(nano - ...
- php 统计一维数组中重复的元素个数
<?php echo "<pre>"; $array = array(1, 1, 1, 54, 3,4, 3,4, 3, 14, 3,4, 3,7,8,9,12, ...