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 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 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
我的论坛源代码(六)
2006/10/09 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
简单的php文件上传(实例)
2013/10/27 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
JS实现li标签的删除
2019/04/12 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
Python中的tuple元组详细介绍
2015/02/02 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
美国鲜花递送:UrbanStems
2021/01/04 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
心得体会的写法
2014/09/05 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
英文产品推荐信
2015/03/27 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
Python实现Hash算法
2022/03/18 Python
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技