js中apply()和call()的区别与用法实例分析

更新时间：2018年08月14日 12:04:49 作者：sMoom

这篇文章主要介绍了js中apply()和call()的区别与用法,结合实例形式分析了apply()和call()的功能、区别、使用方法及相关操作注意事项,需要的朋友可以参考下

本文实例讲述了js中apply()和call()的区别与用法。分享给大家供大家参考，具体如下：

每个函数都包括两个非继承而来的方法：apply()和call()。两者用途都是在特定的作用域中调用函数，等于重新设置了函数体内this对象的值。

两者区别仅在于接收参数方式不同，apply()第一个参数是调用apply的函数运行的作用域，的第二个参数可以是Array的实例(数组)，也可以是arguments对象，call()第一个参数是this的值没有变化，而其余参数都直接传递给函数(也就是逐个列举出来)。

如果要传入的是数组或arguments对象，apply会更方便。

可以看到apply()和call()可以传递参数。更有用的是，两者还可以扩充函数运行的作用域:

var obj = {color:'red'};
window.color = 'blue';
function getcolor(){
  console.log(this.color)
};
getcolor.apply(obj);    //red
getcolor.apply(window);  //blue
getcolor.apply(this);   //blue

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行结果如下：

一个重要的用法：

var values = [1,2,3,4,5,4,3,2,1];
var max = Math.max.apply(Math,values);
console.log(max);     //5

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行结果如下：

这个实际上是利用apply()接收数组，方便了传参。而apply的第一个参数改为null或者空字符串均可。

此外还有bind()方法会创建一个函数的实例，其this值指向传给bind()的值：

window.color = 'red';
var o = {color:'blue'};
function sayColor(){
 console.log(this.color)
};
var objSayColor = sayColor.bind(o);
objSayColor();       //blue

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行结果如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript常用函数技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Javascript语言对继承实现的并不好，需要工程师自己去实现一套完整的继承机制。下面我们由浅入深的系统掌握使用javascript继承的技巧，对javascript继承相关知识感兴趣的朋友一起看看吧
2015-12-12
微信小程序实现搜索功能并跳转搜索结果页面
这篇文章主要为大家详细介绍了微信小程序实现搜索功能并跳转搜索结果页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
js实现三级联动效果（简单易懂）
本文主要介绍了js实现三级联动效果的示例代码，简单易懂。具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
JavaScript+css+HTML实现移动端轮播图（含源码）
这篇文章主要介绍了JavaScript+css+HTML实现移动端轮播图并含源码的分享，需要的小伙伴可以参考一下，希望对你有所帮助
2022-01-01
js实现div弹出层的方法
这篇文章主要介绍了js实现div弹出层的方法,以实例的形式完整的实现了js弹出div层的效果,并且弹出层可拖拽、可关闭,用户还可根据个人喜好自定义弹出层的显示效果,非常具有实用价值,需要的朋友可以参考下
2014-11-11
javaScript动态添加Li元素的实例
下面小编就为大家分享一篇javaScript动态添加Li元素的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
利用JS实现获取当前系统电量情况
在前端浏览器中我们可以通过使用JavaScript的navigator.getBattery()方法来获取当前系统的电池情况,本文将介绍如何使用这个API以及它在实际应用中的使用,需要的可以参考下
2023-12-12
以JavaScript来实现WordPress中的二级导航菜单的方法
这篇文章主要介绍了以JavaScript来实现WordPress中的二级导航菜单的方法,文中首先对WordPress基本的PHP导航菜单的做法给出了说明来作为基础,需要的朋友可以参考下
2015-12-12
js实现拉幕效果的广告代码
这篇文章主要介绍了js实现拉幕效果的广告代码,涉及javascript定时操作页面元素属性变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
微信小程序实现星星评分效果
这篇文章主要为大家详细介绍了微信小程序实现星星评分效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11