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 相关文章推荐
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
Vue中"This dependency was not found"问题的解决方法
Jun 19 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
js实现小球在页面规定的区域运动
Jun 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+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
JavaScript Array扩展实现代码
2009/10/14 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
Python定时执行之Timer用法示例
2015/05/27 Python
Python时间获取及转换知识汇总
2017/01/11 Python
python中模块的__all__属性详解
2017/10/26 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
python实现爬山算法的思路详解
2019/04/09 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
python 实现波浪滤镜特效
2020/12/02 Python
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
python实现自动清理文件夹旧文件
2021/05/10 Python
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python