彻底搞懂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 相关文章推荐
JS 建立对象的方法
Apr 21 Javascript
JQuery 常用方法基础教程
Feb 06 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
vue中keep-alive,include的缓存问题
Nov 26 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 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
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
防暑降温通知书
2015/04/27 职场文书
岗位聘任协议书
2015/09/21 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
php去除deprecated的实例方法
2021/11/17 PHP