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 相关文章推荐
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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写的求多项式导数的函数代码
2012/07/04 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
js中获取事件对象的方法小结
2011/03/13 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
详解vue中组件参数
2018/07/09 Javascript
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
浅谈django orm 优化
2018/08/18 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
python nmap实现端口扫描器教程
2020/05/28 Python
基于python实现删除指定文件类型
2020/07/21 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
中学生个人自我评价
2014/02/06 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
小班下学期评语
2014/05/04 职场文书
公证委托书
2014/08/01 职场文书
车间统计员岗位职责
2015/04/14 职场文书
Python超详细分步解析随机漫步
2022/03/17 Python
MongoDB支持的索引类型
2022/04/11 MongoDB