当前位置: 首页 > 编程笔记 >

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

宣俊豪
2023-03-14
本文向大家介绍彻底搞懂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方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍彻底搞懂Python字符编码,包括了彻底搞懂Python字符编码的使用技巧和注意事项,需要的朋友参考一下 不论你是有着多年经验的 Python 老司机还是刚入门 Python 不久,你一定遇到过UnicodeEncodeError、UnicodeDecodeError 错误,每当遇到错误我们就拿着 encode、decode 函数翻来覆去的转换,有时试着试着问题就解决了,有时候怎么试

  • 大家好,今天给大家介绍一个非常热门的技术,同时也是面试的时候面试官特别喜欢问的一个话题,那就是 SpringCloudAlibaba 的底层原理。 现在大家都知道,SpringCloudAlibaba 风靡 Java 开发行业,各个公司都在用这套技术,所以咱们 Java 工程师出去面试,面试官对 SpringCloudAlibaba 都搞成了面试必问选项了,但凡面试,总会有面试官问问:“兄弟,Sp

  • 本文向大家介绍彻底搞懂PHP 变量结构体,包括了彻底搞懂PHP 变量结构体的使用技巧和注意事项,需要的朋友参考一下 PHP5 中的 zval 多数文章,在提到PHP5 变量结构体的时候,都提到:sizeof(zval) == 24, sizeof(zvalue_value) == 16,实际上这个论述并不准确,在 CPU 为 64bit 时,这个结果是正确的。 但当 CPU 为32bit 时: s

  • 主要内容:一、场景引入,问题初现,二、volatile的作用及背后的原理,三、总结 & 提醒一、场景引入,问题初现 很多同学出去面试,都会被问到一个常见的问题:说说你对volatile的理解? 不少初出茅庐的同学可能会有点措手不及,因为可能就是之前没关注过这个。但是网上百度一下呢,不少文章写的很好,但是理论扎的太深,文字太多,图太少,让人有点难以理解。 基于上述痛点,这篇文章尝试站在年轻同学的角度,用最简单的大白话,加上多张图给大家说一下,volatile到底是什么? 当然本文不会把理论

  • 本文向大家介绍JavaScript中的call方法和apply方法使用对比,包括了JavaScript中的call方法和apply方法使用对比的使用技巧和注意事项,需要的朋友参考一下 方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明: call 方法可以用来代替另

  • 本文向大家介绍Apply和call方法的异同 相关面试题,主要包含被问及Apply和call方法的异同 时的应答技巧和注意事项,需要的朋友参考一下 相同点:两个方法产生的作用是完全一样的,第一个参数都是对象; 不同点: call()方法参数将依次传递给借用的方法作参数,即fn.call(thisobj, arg1,arg2,arg3...argn),有n个参数 apply()方法第一个参数是对象,