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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
javascript天然的迭代器
Oct 29 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
vue实现计步器功能
Nov 01 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
php5 mysql分页实例代码
2008/04/10 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
php 可变函数使用小结
2018/06/12 PHP
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
JavaScript中的逻辑判断符&&、||与!介绍
2014/12/31 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
Python 定义只读属性的实现方式
2020/03/05 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
大学生个人自我鉴定
2013/12/03 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
学雷锋标语
2014/06/25 职场文书
投诉书范文
2015/07/02 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书