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 相关文章推荐
JS基于面向对象实现的放烟花效果
May 07 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 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实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
this[] 指的是什么内容 讨论
2007/03/24 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
XENON基于JSON变种
2010/07/27 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
python中字符串前面加r的作用
2015/06/04 Python
python验证码识别的示例代码
2017/09/21 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
python爬虫超时的处理的实例
2018/12/19 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
python中时间模块的基本使用教程
2019/05/14 Python
django实现类似触发器的功能
2019/11/15 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
财务出纳员岗位职责
2013/11/26 职场文书
群众路线个人整改措施
2014/10/24 职场文书
保安2014年终工作总结
2014/12/06 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
考试没考好检讨书
2015/05/06 职场文书
工商局调档介绍信
2015/10/22 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS