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在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
JS中的const命令你真懂它吗
Mar 08 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 静态变量的初始化
2009/11/15 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
Node.js事件驱动
2015/06/18 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
丑小鸭教学反思
2014/02/03 职场文书
商业房地产广告语
2014/03/13 职场文书
工作求职信
2014/07/04 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
小学班主任教育随笔
2015/08/15 职场文书
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL