当前位置:首页 > 日记 > 正文

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

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

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方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

详解vue-cil和webpack中本地静态的

详解vue-cil和webpack中本地静态的

问题解决方案,路径,静态,详解,电脑软件,本文介绍了vue-cil和webpack中本地静态图片的路径问题解决方案,分享给大家,具体如下:1 本地图片动态绑定img的src属性一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的我们将图…

关于javascript sort | 排序你可能

关于javascript sort | 排序你可能

排序,电脑软件,javascript,sort,前言在Javascript数组排序中有一个sort()方法,sort()方法可以说分为两种,一种是文字数组排序,一种是数字数组排序。下面这篇文章主要和大家分享了关于最近学习javascript sort()排序发现了一点理解,下面话不多说了…

excel 用公式设置预警函数的方法

excel 用公式设置预警函数的方法

函数,方法,设置,公式,电脑软件,  在Excel中录入数据的时候可能会用到预警函数,或许有很多朋友不知道预警函数怎么用,下面是由小编分享的excel 用公式设置预警函数的方法,以供大家阅读和学习。excel 用公式设置预警函数的方法1条件格式,操作如…

Chrome调试折腾记之JS断点调试技巧

Chrome调试折腾记之JS断点调试技巧

断点调试,调试,技巧,电脑软件,Chrome,JS调试技巧技巧一:格式化压缩代码技巧二:快速跳转到某个断点的位置右侧的Breakpoints会汇总你在JS文件所有打过的断点,点击跟checkbox同一行的会暂时取消这个断点,若是点击checkbox下一行的会直接跳转到该…

jQuery实现在新增加的元素上添加事

jQuery实现在新增加的元素上添加事

方法,元素,事件,案例分析,电脑软件,本文实例讲述了jQuery实现在新增加的元素上添加事件方法。分享给大家供大家参考,具体如下:最近项目组需要在新增的元素上增加时间,有人说用live方法后来使用的时候发现jQuery没有该方法(1.7以上就没了)替换为o…

js判断数组是否包含某个字符串变量

js判断数组是否包含某个字符串变量

数组,字符串,实例变量,变量,电脑软件,最近碰到一个这样的现象,后台返回的数据中,数组里面有一些有变量值,有一些没有变量值。举个例子,比如后台返回的例子是这样的:  var arr=[ { "status":"success", "activerUserData": [ {"ac…

Word中文档由横版变为竖版的操作技

Word中文档由横版变为竖版的操作技

文档,操作技巧,操作步骤,电脑软件,Word,  在word文档编辑排版过程中,有时需要把已经排好的横版改为竖版格式,以适应纸张大小要求。今天,小编就教大家在Word中文档由横版变为竖版的操作技巧。Word中文档由横版变为竖版的操作步骤横版的文档,大…

js实现模糊匹配功能

js实现模糊匹配功能

模糊,功能,电脑软件,js,功能描述:在搜索框中输入某一个字段,可以查询到相关的内容功能实现:1. 先声明变量用于保存输入框以及表格里面的内容2. 循环遍历遍历表格每一行,查找匹配项3. 判断如果输入框里面的内容跟表格中某个td的内容相似,则表…

PPT扁平化设计有哪些实用小技巧

PPT扁平化设计有哪些实用小技巧

扁平化设计,小技巧,有哪些,电脑软件,PPT,  扁平化是目前的PPT主流设计风格,非常适合新手,学会可以直接拿来作海报和PPT设计。以下是小编为您带来的关于PPT扁平化设计的8个实用小技巧,希望对您有所帮助。PPT扁平化设计的8个实用小技巧Tip 1:关…

PPT2013启用和去除编辑受保护视图

PPT2013启用和去除编辑受保护视图

启用,视图,方法,教程,清除,  微软发布的 office 2013 给我们带来了很多的新的功能,但是同时,有些功能并不是我们想要的,这其中就有一个“受保护的视图”的提醒,怎么才能去掉这个功能呢?对于新手来说还是有一定难度,怎么办?下面小编…

jQuery实现按比例缩放的方法

jQuery实现按比例缩放的方法

方法,缩放,按比例,电脑软件,jQuery,本文实例讲述了jQuery实现按比例缩放图片的方法。分享给大家供大家参考,具体如下:做网站的时候,相信有很多朋友都会遇到图片过大,导致页面撑开变形的问题,如果强制设置width,height,图片则会因为强制变形而走样…

在Word 2013文档中如何制作个人工

在Word 2013文档中如何制作个人工

文档,工作,电脑软件,Word,  一般上班的时候可能需要带上工作牌,当然也不全是谁都要带工作牌,每个公司要求都不一样的。在Word文档中,你知道工作牌是怎么制作出来的吗?以下是小编为您带来的关于在Word 2013中制作个人工作牌,希望对您有所帮助…