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面象对象设计
Apr 28 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
JavaScript函数详解
Feb 27 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 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的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
JS hashMap实例详解
2016/05/26 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
python中json格式数据输出的简单实现方法
2016/10/31 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
python绘制简单彩虹图
2018/11/19 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
tensorflow之并行读入数据详解
2020/02/05 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
超市营业员岗位职责
2013/12/20 职场文书
文明礼仪事迹材料
2014/01/09 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
谢师宴邀请函
2015/02/02 职场文书
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技