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 相关文章推荐
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
Angular表单验证实例详解
Oct 20 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
PHP 中常量的知识整理
2017/04/14 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
Python 26进制计算实现方法
2015/05/28 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
python next()和iter()函数原理解析
2020/02/07 Python
python 日志 logging模块详细解析
2020/03/31 Python
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
什么是设计模式
2012/06/17 面试题
优秀实习生主要事迹
2014/05/29 职场文书
地理科学专业自荐信
2014/09/01 职场文书
企业挂职心得体会
2014/09/10 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python