详解js中的apply与call的用法

更新时间：2016年07月30日 10:40:20 投稿：daisy

在ECAMScript3给Function的原型定义了两个方法，它们是Function.prototype.call和Function.prototype.apply。本文详细介绍了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有所帮助。

您可能感兴趣的文章:

基于prototype扩展的JavaScript常用函数库
基于prototype扩展的JavaScript常用函数库实现代码，学习js的朋友可以参考下。
2010-11-11
JS逆向之加密参数定位
越来越多的网站进行数据传输时不使用明文传输,本文主要介绍了JS逆向之加密参数定位,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-01-01
javascript数组去重方法分析
这篇文章主要介绍了javascript数组去重方法,通过2个示例对比分析了javascript数组去重的原理与操作技巧,需要的朋友可以参考下
2016-12-12
JS前端千万级弹幕数据循环优化示例
这篇文章主要为大家介绍了JS前端一千万条弹幕数据循环优化示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
javascript判断图片是否加载完成的方法推荐
下面小编就为大家带来一篇javascript判断图片是否加载完成的方法推荐。小编觉得挺不错的，现在分享给大家，也给大家做个参考。
2016-05-05
JS常用的4种截取字符串方法
在做项目的时候，经常会需要截取字符串，所以常用的方法有slice()、substr()、substring()、match()方法等，下面通过示例代码介绍四个方法的使用，感兴趣的朋友跟随小编一起看看吧
2023-02-02
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
下面小编就为大家带来一篇封装运动框架实战左右与上下滑动的焦点轮播图(实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
JavaScript 字符串与数组转换函数[不用split与join]
下面的代码，不考虑他的运行效率的话，思路不错，大家可以看看，但在实际的应用中，我们仍然使用split或join来实现数组的操作。
2009-12-12
JavaScript知识点总结之如何提高性能
JavaScript的性能问题不容小觑，这就需要我们开发人员在编写JavaScript程序时多注意一些细节，本文非常详细的介绍了一下JavaScript性能优化方面的知识点，绝对是干货，需要的朋友快来一起学习吧
2016-01-01
用js实现多域名不同文件的调用方法
用js实现多域名不同文件的调用方法...
2007-01-01

详解js中的apply与call的用法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具