彻底搞懂JavaScript中的apply和call方法(必看)


Posted in Javascript onSeptember 18, 2017

call和apply都是为了改变某个函数运行的context上下文而存在的,即为了改变函数体内部this的指向。因为JavaScript的函数存在定义上下文和运行时上下文以及上下文是可以改变的概念。

回到目录定义

fun.apply(thisArg, [argsArray])
fun.call(thisArg, arg1,arg2, ...)

其中thisArg可以为null或undefined,此时表示全局对象,更详细见MDN:apply()、call()

二者的作用完全一样,只是接受参数的方式不太一样。例如,有一个函数定义如下:

var func1 = function(arg1, arg2){};

可以通过func1.call(this, arg1, arg2);或者func1.apply(this, [arg1, arg2])来调用。其中this是你想指定的上下文,它可以是任意一个JavaScript对象(JavaScript一切皆对象),call需要把参数传递进去,而apply则把参数放在数组里。

因为在JavaScript中,某个函数的参数数量是不固定的,当你的参数明确知道数量时,用call,而不确定的时候用apply,然后把参数push进数组传递进去。当参数数量不确定时,函数内部也可以通过arguments这个数组来遍历所有的参数。

回到目录一个例子

在JavaScript OOP中,我们经常会这样定义:

funciton programmer() {
}

programmer.prototype = {
  hobby: 'programming',
  say.function() {
    alert('I love' + this.hobby);
  }
}

var xiaoMing = new programmer();
xiaoMing.say();

此时如果我们有一个设计妹子对象xiaoHua = {hobby: 'designing'};我们不想对它重新定义say方法,那么我们可以通过call或apply使用xiaoMing的say方法:xiaoMing.say.call(xiaoHua)。

由此可看出,call和apply都是为了动态改变this而出现的,当一个object没有某个方法或属性时,但是其他的对象有,则可以借助call或apply来使用其他对象的方法来操作。

obj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);

两者都是把obj(即this)绑定到thisObj,这时候thisObj具备(或继承)了obj的属性和方法

其中比较常见的,通过document.getElementByTagName选择的节点是一种类数组,它不能应用Array下的push,pop等方法。但我们可以通过:

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

Array.prototype.slice.call能所有具有length属性的对象转为数组,这样domNodes就可以应用Array下的所有方法了。

以上这篇彻底搞懂JavaScript中的apply和call方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
angularjs实现猜数字大小功能
May 20 #Javascript
angular指令笔记ng-options的使用方法
Sep 18 #Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 #jQuery
javascript  删除select中的所有option的实例
Sep 17 #Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 #Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 #Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
虫族 Zerg 热键控制
2020/03/14 星际争霸
php array_filter除去数组中的空字符元素
2020/06/21 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
PHP多线程类及用法实例
2014/12/03 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python简单读取json文件功能示例
2017/11/30 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python模拟实现分发扑克牌
2020/04/22 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
税务干部鉴定材料
2014/02/11 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
对教师的评语
2014/04/28 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS