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 相关文章推荐
jquery提示 "object expected"的解决方法
Dec 13 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
JavaScript类的继承多种实现方法
May 30 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 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
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
便捷提取python导入包的属性方法
2018/10/15 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
Python实现爬取并分析电商评论
2020/06/19 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
电子商务专业应届生求职信
2014/05/28 职场文书
讲党性心得体会
2014/09/03 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
关于童年的读书笔记
2015/06/26 职场文书