js_apply与call
在ECAMScript3给Function的原型定义了两个方法,它们是Function.prototype.call和Function.prototype.apply。
本文详细介绍了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有所帮助。
转自:http://www.jb51.net/article/89501.htm
js_apply与call的更多相关文章
随机推荐
- 关于我们经常用到的form表单提交
工作中遇到了太多太多的表单提交问题,曾经学过一个HTML的表单提交给 另外一个HTML页面,对于后台怎么获取有点想不起来了. 今天便做了几个实验,提交订单到后台,来掩饰后台如何接受表单内容: 实验 一 ...
- js中的json对象和字符串之间的转化
字符串转对象(strJSON代表json字符串) var obj = eval(strJSON); var obj = strJSON.parseJSON(); var obj = JSO ...
- 配置react native遇到的问题
折腾了两天终于解决了问题,一开始用模拟器是报如下图的错 然后用真机的时候又报下图的错 这个错误网上有很多解决方法,说是要降级处理,将build.gradle中的1.3.1改成1.2.3,但是改完之后问 ...
- 自己封装的常用NPOI文件导出源码
示例: 1. 2.示例2 源码下载地址:https://github.com/aa1356889/NPOICode
- linux安装Jenkins
一.下载jenkins 最新地址在:https://jenkins.io 我下载的是:Jenkins 2.35.war,下载好直接放到tomcat的webapp目录里,启动tomcat就可以运行了 二 ...
- (转载)哈夫曼编码(Huffman)
转载自:click here 1.哈夫曼编码的起源: 哈夫曼编码是 1952 年由 David A. Huffman 提出的一种无损数据压缩的编码算法.哈夫曼编码先统计出每种字母在字符串里出现的频率, ...
- Linux服务器配置多台虚拟主机
2016年11月4日15:59:12 LAMP环境 参考:http://blog.itblood.com/nginx-same-ip-multi-domain-configuration.html 在 ...
- 人工智能之一《tensorflow》
http://wiki.jikexueyuan.com/project/tensorflow-zh/
- mysql复习相关
Mysql相关 mysql增删改查 我们需要修改数据表名或者修改数据表字段时,就需要使用到Mysql Alter命令 删除,添加或修改表字段 alter table student drop regi ...
- Windows无法完成安装,若要在此计算机上安装Windows,请中心启动安装。
现在安装系统已经很简单了,我觉得U盘启动的话两步就差不多了, 壹:设置BIOS,将U盘启动作为系统默认启动选项 贰:直接进去大白菜之类的,一键安装... 今天终于看到第三部了, 报错:Windows无 ...