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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
Javascript 汉字字节判断
Aug 01 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
纯JS实现轮播图
Feb 22 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
原生JS实现拖拽功能
Dec 16 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
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
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
python适合人工智能的理由和优势
2019/06/28 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
python连接mysql有哪些方法
2020/06/24 Python
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
《春笋》教学反思
2014/04/15 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS