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 相关文章推荐
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 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 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
node Buffer缓存区常见操作示例
2019/05/04 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
python使用pil生成缩略图的方法
2015/03/26 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
python使用正则筛选信用卡
2019/01/27 Python
python交互界面的退出方法
2019/02/16 Python
python字符串的拼接方法总结
2019/11/18 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
python使用配置文件过程详解
2019/12/28 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
解决Python安装cryptography报错问题
2020/09/03 Python
python绘制分布折线图的示例
2020/09/24 Python
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
幼儿园教师获奖感言
2014/03/11 职场文书
总结表彰大会主持词
2014/03/26 职场文书
2014年母亲节寄语
2014/05/07 职场文书
英语求职信范文
2014/05/23 职场文书
厕所文明标语
2014/06/11 职场文书
师范毕业生求职信
2014/07/11 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
2016保送生自荐信范文
2016/01/29 职场文书