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


Posted in Javascript onAugust 14, 2018

本文实例讲述了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.3water.com/code/HtmlJsRun,测试运行结果如下:

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

一个重要的用法:

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.3water.com/code/HtmlJsRun,测试运行结果如下:

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

这个实际上是利用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.3water.com/code/HtmlJsRun,测试运行结果如下:

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

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

Javascript 相关文章推荐
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
前端微信支付js代码
Jul 25 Javascript
详解webpack打包vue时提取css
May 26 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
JS通过位运算实现权限加解密
Aug 14 #Javascript
js中getter和setter用法实例分析
Aug 14 #Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 #Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 #Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 #Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 #jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 #jQuery
You might like
PHP新手上路(十四)
2006/10/09 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
php常用的工具开发整理
2019/09/26 PHP
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python运算符重载用法实例
2015/05/28 Python
python中set()函数简介及实例解析
2018/01/09 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
python使用Matplotlib画条形图
2020/03/25 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
python 简单的调用有道翻译
2020/11/25 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
Python wordcloud库安装方法总结
2020/12/31 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
印尼网上商店:Alfacart.com
2019/03/11 全球购物
公司拓展活动方案
2014/02/13 职场文书
学生保证书范文
2014/04/28 职场文书
社区植树节活动总结
2015/02/06 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python