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下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
JS的深浅复制详细
Oct 16 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 CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
python求质数列表的例子
2019/11/24 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
技术人员面试提纲
2013/11/28 职场文书
学生处主任岗位职责
2013/12/01 职场文书
领导证婚人证婚词
2014/01/13 职场文书
庆七一活动方案
2014/01/25 职场文书
法人委托书范本
2014/04/04 职场文书
建议书的格式
2014/05/12 职场文书
环保建议书100字
2014/05/14 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
2015年度企业工作总结
2015/05/21 职场文书
圆明园观后感
2015/06/03 职场文书
七一慰问简报
2015/07/20 职场文书