JavaScript函数apply()和call()用法与异同分析


Posted in Javascript onAugust 10, 2018

本文实例分析了JavaScript函数apply()和call()用法与异同。分享给大家供大家参考,具体如下:

JavaScript的函数是对象,因此有属性和方法。每个函数都包含两个属性:lengthprototype,每个函数都包含两个非继承而来的方法:apply()call()

今天先来介绍一下前端面试中经常问到的apply()call()的区别吧!

这两个方法的作用是在函数调用时改变函数的执行上下文,也就是函数内的thisapply()方法接收两个参数,一个是在其中运行函数的作用域,另一个可以是arguments对象,也可以是参数数组。

call()方法与apply()方法的作用相同,它们的区别仅在于接收参数的方式不同,第一个参数不变,变化的是其余参数都直接传递给函数,也就是说,传递给函数的参数必须逐个列举出来。

JavaScript的参数在内部就是用一个数组来表示的,从这个意义上来说,apply比call的使用率更高,不必关心具体有多少个参数被传入函数,只要用apply一股脑传进去即可。若明确知道函数接收几个参数,且想一目了然地表达形参与实参的对应关系,可以使用call。

当使用call或apply时,若传入的第一个参数是null,函数体内的this会指向默认的宿主对象,在浏览器中是window,但在严格模式下,函数体内的this还是为null。有时,使用call或apply的目的不在于指定this指向,而是另有用途,如借用其他对象的方法,则此时可以传入null来替代某个具体的对象,如Math.max.apply(null, [1,5,2,4,3]]);

下面来举个例子:

function sum(num1, num2) {
  return num1 + num2;
}
function applyFunc1(num1, num2) {
  return sum.apply(this, arguments);
}
function applyFunc2(num1, num2) {
  return sum.apply(this, [num1, num2]);
}
function callFunc(num1, num2) {
  return sum.call(this, num1, num2);
}
alert(applyFunc1(10, 20));//输出:30
alert(applyFunc2(10, 20));//输出:30
alert(callFunc(10, 20));//输出:30

JS中的函数其实是对象,函数名是对Function对象的引用。

function add(a,b) {
  alert(a+b);
}
function sub(a,b) {
  alert(a-b);
}
add.call(sub,3,1); //输出:30

如果你认为apply()call()的作用在于传递参数,那就错了,它们真正强大的地方在于能够扩充函数赖以运行的作用域。

call和apply的用途:

(1)改变this的指向。

call和apply最常见的用途是改变函数内部的this指向。如上述例子所示。

(2)借用其他对象的方法。

1)借用方法的第一种场景是借用其他对象的构造函数。

var Student = function(name) {
  this.name = name;
};
var Teacher = function(name) {
  Student.apply(this,arguments);
};
Teacher.prototype.getName = function() {
  return this.name;
};
var teacher = new Teacher("Alice");
console.log(teacher.getName()); // 输出:Alice

2)借用方法的第二种场景是借用其他对象的方法。

当运行showColor.call(obj)时,函数的执行环境就进到了对象中。

window.color = "white";
var obj = {color: "black"};
function showColor() {
  alert(this.color);
}
showColor();//输出:"white"
showColor.call(this);//输出:"white"
showColor.call(window);//输出:"white"
showColor.call(obj);//输出:"black"

不需要把showColor()函数放到对象obj中,再通过obj来调用。

window.color = "white";
var obj = {color : "black"};
function showColor() {
  alert(this.color);
}
showColor();//输出:"white"
obj.showColor = showColor;
obj.showColor();//输出:"black"

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS模拟多线程
Feb 07 Javascript
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
javascript中this用法实例详解
Apr 06 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
原生js实现贪吃蛇游戏
Oct 26 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 #Javascript
vue 动态绑定背景图片的方法
Aug 10 #Javascript
原生JS实现$.param() 函数的方法
Aug 10 #Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 #Javascript
JavaScript创建对象的常用方式总结
Aug 10 #Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 #Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 #Javascript
You might like
支持oicq头像的留言簿(一)
2006/10/09 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
jquery自定义组件实例详解
2020/12/31 jQuery
浅析python中的分片与截断序列
2016/08/09 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
Python 一句话生成字母表的方法
2019/01/02 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
浅析Python requests 模块
2020/10/09 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
学生就业推荐信
2013/11/13 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
亮剑观后感600字
2015/06/05 职场文书
教研活动主持词
2015/07/03 职场文书
virtualenv隔离Python环境的问题解析
2022/06/21 Python