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 document.referrer判断访客来源网址
May 15 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
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实现购物车功能(上)
2020/07/23 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
URL中“#” “?” &“”号的作用浅析
2017/02/04 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
用pycharm开发django项目示例代码
2018/10/24 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
python实现微信打飞机游戏
2020/03/24 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
最新自我评价范文
2013/11/16 职场文书
业务部主管岗位职责
2014/01/29 职场文书
2016公司年会通知范文
2015/04/25 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
单身证明格式样本
2015/06/15 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
MongoDB 常用的crud操作语句
2021/06/20 MongoDB