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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
layui的table中显示图片方法
Aug 17 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 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中eval函数的危害与正确禁用方法
2014/06/30 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
Python 12306抢火车票脚本
2018/02/07 Python
分析Python读取文件时的路径问题
2018/02/11 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
Champion官网:美国冠军运动服装
2017/01/25 全球购物
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
应届生人事助理求职信
2013/11/09 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
入党积极分子介绍信
2014/01/17 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
合伙经营协议书范本
2014/04/18 职场文书
初二学习计划书范文
2014/04/27 职场文书
文明礼仪标语
2014/06/13 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
二审代理词范文
2015/05/25 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
详解Python常用的魔法方法
2021/06/03 Python