详解js中的apply与call的用法
前言
call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的，换句话说，就是为了改变函数体内部 this 的指向。
call 和 apply二者的作用完全一样，只是接受参数的方式不太一样。
方法定义
apply
Function.apply(obj,args)方法能接收两个参数：
obj：这个对象将代替Function类里this对象
args：这个是数组或类数组，apply方法把这个集合中的元素作为参数传递给被调用的函数。
call
call方法与apply方法的第一个参数是一样的，只不过第二个参数是一个参数列表
在非严格模式下当我们第一个参数传递为null或undefined时，函数体内的this会指向默认的宿主对象，在浏览器中则是window
var test = function(){
console.log(this===window);
}
test.apply(null);//true
test.call(undefined);//true
用法
"劫持"别人的方法
此时foo中的logName方法将被bar引用 ，this指向了bar
var foo = {
name:"mingming",
logName:function(){
console.log(this.name);
}
}
var bar={
name:"xiaowang"
};
foo.logName.call(bar);//xiaowang
实现继承
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节点，见如下代码：
window.id="window";
document.querySelector('#test').onclick = function(){
console.log(this.id);//test
var fun = function(){
console.log(this.id);
}
fun();//window
}
使用call,apply我们就可以轻松的解决这种问题了
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：
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
}
function func(){
"use strict"
alert ( this ); // 输出：undefined
}
func();
其他用法
类数组
这里把符合以下条件的对象称为类数组
1.具有length属性
2.按索引方式存储数据
3.不具有数组的push,pop等方法
常见类数组有 arguments,NodeList!
(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来装换一下这个数组,即:
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将数组装换为参数列表的集合.
再比如我想求类数组中的最大值
(function(){
var maxNum = Math.max.apply(null,arguments);
console.log(maxNum);//56
})(34,2,56);
判断类型
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有所帮助。
相关文章
这篇文章主要介绍了HTML中使背景图片自适应浏览器大小实例详解的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了Javascript的爷孙通信和组件自调用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
根据分辨率不同，调用不同的css文件...2006-08-08
这篇文章主要介绍了详解JS数据类型的值拷贝函数（深拷贝）的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-07-07
大家都知道js是单线程的，执行起来是顺序的，在顺序的业务逻辑中当然没有问题，如果遇到可以并发执行的业务逻辑，再排队就很低级了！所以这里我们再来简单的谈谈JS中的异步以及如何异步。2016-08-08
这篇文章主要为大家详细介绍了javascript实现简单留言板案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-02-02
解决PNG图片在IE6下的透明这类问题谷歌上很多解决方案，属于非常常见的问题，以前我做的时候，这类透明我都是用gif，而直接避开png，所以到现在我并没有去了解过这个问题。今天就把这个问题整理下，解决方案汇总给大家。2015-05-05
这篇文章主要为大家详细介绍了基于bootstrap实现图片轮播效果的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下2016-05-05
这篇文章主要为大家详细介绍了js实现拖拽上传图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要给大家介绍了关于ES6 Class中实现私有属性的一些方法，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
最新评论