JavaScript中apply()和call()的区别和应用

2023-11-11

JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法,这两个方法能够改变函数体内部 this 的指向。

例如,fun1.call()或者fun1.apply() 都是为了改变fun1函数内部的this指向

二者的作用完全一样,只是接受参数的方式不太一样。

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

apply:调用一个对象的一个方法,用另一个对象替换当前对象。例如:B.apply(A, arguments);即A对象调用B对象的方法。

call:调用一个对象的一个方法,用另一个对象替换当前对象。例如:B.call(A, args1,args2);即A对象调用B对象的方法。

第一个参数指定了函数体内this对象的指向,他可以为任何一个 JavaScript 对象(JavaScript 中一切皆对象),如果为null,则函数体内的this会指向默认的宿主对象,在浏览器中则是window

第二个参数,call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。

当你的参数不确定数量时用 apply ,然后把参数 push 进数组传递进去。或者也可以通过 arguments来获取所有的参数。这样看来,apply的使用率更高。

注意:

apply:最多只能有两个参数——新对象thisArg和一个数组[argsArray]。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里。如果[argsArray]不是一个有效的数组或arguments对象,那么将导致一个TypeError。如果没有提供[argsArray]和thisArg任何一个参数,那么Global对象将被用作thisArg,并且无法被传递任何参数。一般的,目标函数只需要n个参数列表,而不接收一个数组参数,可以通过apply的方式巧妙地解决这个问题【见apply妙用】。

call:它可以接受多个参数,第一个参数与apply一样,后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候,使当前this实例指针保持一致,或者在特殊情况下需要改变this指针。如果没有提供thisArg参数,那么Global对象将被用作thisArg。 

call()方法的作用和 apply() 方法类似,区别就是call()方法接受的是参数列表,而apply()方法接受的是一个参数数组。 

基础用法

function add(a, b) {
    return a + b
}

function sub(a, b) {
    return a - b
}

// sub调用add的方法,同 var a1 = add.call(sub, 1, 2)
var a1 = add.apply(sub, [1, 2]) 
// add调用sub的方法,同 var a2 = sub.call(add, 1, 2)
var a2 = sub.apply(add, [1, 2]) 

console.log(a1, a2)

 输出:

 3 -1

基础继承 

function Animal(name) {
    this.name = name
    this.showName = function () {
        console.log(this.name)
    }
}

function Cat(name) {
    // Cat调用Animal方法,同 Animal.call(this, name)
    Animal.apply(this, [name])
}

var cat = new Cat('小猫')
cat.showName()

 输出:

 小猫

多重继承

function Func1() {
    this.sub = function (a, b) {
        console.log(a - b)
    }
}

function Func2() {
    this.add = function (a, b) {
        console.log(a + b)
    }
}

function Func3() {
    // Func3调用Func1方法,同 Func1.call(this)
    Func1.apply(this)
    // Func3调用Func2方法,同 Func2.call(this)
    Func2.apply(this)
}

var func = new Func3()
func.sub(1, 2)
func.add(1, 2)

 输出:

 -1 

 3 

 apply妙用1

var numbers = [5, 6, 1, 3, 7];

var max = Math.max.apply(null, numbers)
console.log(max)

var min = Math.min.apply(null, numbers)
console.log(min)

 输出:

 7 

 1       

Math.max()方法,只能传递参数列表Math.max(param1, param2...),不支持Math.max([param1, param2]) 。借助apply,我们可以将一个数组参数转换为一个参数列表([param1, param2...] 转换为 (param1,param2...)

apply妙用2

var arr1 = new Array("1","2","3")
var arr2 = new Array("4","5","6")
// push返回数组长度
Array.prototype.push.apply(arr1, arr2) // 等价于arr1.push("4","5","6")
console.log(arr1)

 输出:

 6   

 ["1", "2", "3", "4", "5", "6"]

与君共勉:再牛逼的梦想,也抵不住傻逼般的坚持!      

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript中apply()和call()的区别和应用 的相关文章

随机推荐

  • STM32开发(六)STM32F103 通信 —— RS485 Modbus通信编程详解

    上一篇 主目录 下一篇 文章目录 一 基础知识点 二 开发环境 三 STM32CubeMX相关配置 1 STM32CubeMX基本配置 2 STM32CubeMX RS485 相关配置 四 Vscode代码讲解 五 结果演示以及报文解析 六
  • Spring Boot 添加拦截器

    文章目录 Spring Boot 添加拦截器 方法1 新增拦截器 配置拦截器 方法2 新增拦截器 配置拦截器 拦截所有响应 Spring Boot 添加拦截器 介绍一下在Spring Boot 2 0 0以上版本如何添加拦截器 方法1 新增
  • html烟花代码在线编程,canvas实现烟花的示例代码

    前言 马上过年了 我打算在后台里面偷偷地埋个新春祝福 放烟花的彩蛋 项目是基于react typescript的 因此最后封装成了一个组件 设置好开启时间就可以显示了 目录结构 目录结构大致如下 我们将烟花分为两个阶段 一个是未炸开持续上升
  • Python不同excel的合并操作

    Python不同excel的合并操作 23333333333我的第一篇博客 有一点瞎搞的感觉 0 0 问题描述 对7个类似下图的Excel进行合并 合并的最终效果 Excel文件需要可以找我 技术分析 获取表格中相同格式的部分进行操作 对除
  • 华为OD机试真题 Java 实现【服务中心选址】【2023Q1 100分 】

    一 题目描述 一个快递公司希望在一条街道建立新的服务中心 公司统计了该街道中所有区域在地图上的位置 并希望能够以此为依据为新的服务中心选址 使服务中心到所有区域的距离的总和最小 给你一个数组 positions 其中 positions i
  • 苏宁图书爬虫第一版

    最近一直在忙于工作 当我知道这些都是借口 毕竟某些博主大佬深夜还在更新订阅号更新微博 或许这就是自制力的差距吧 不啰嗦了 今天要写的主要是一篇关于如何爬取 苏宁图书 当然只是半成品 但是大部分问题都已经解决 在这里记录一下发生过的问题 以免
  • 专题五 Redis高并发场景

    介绍 Redis高并发场景 如果直接去学会比较抓不住头绪 因此本文将一步步介绍Redis的高并发的步骤演进 首先解释synchronized不适合在分布式场景 因为synchronized只适用自身的JVM 因此在分布式场景下多台机器的情况
  • 用IEDA开发WEB项目发生的java.lang.NoClassDefFoundError解决方法

    编译的时发生了这个问题 然后上网上百度了一下 一下出自于别人的博客 一 第一种 也是新手容易犯的错误 那就是classpath环境变量配置错误 这个错误在我最开始学习Android的时候就遇到过 弄的焦头烂额的 解决办法 在系
  • 华为机试:计算某字母出现次数 (不区分大小写)

    一 题目 描述 写出一个程序 接受一个由字母 数字和空格组成的字符串 和一个字母 然后输出输入字符串中该字母的出现次数 不区分大小写 字符串长度小于500 输入描述 第一行输入一个由字母和数字以及空格组成的字符串 第二行输入一个字母 输出描
  • 【华为OD机试】数字最低位排序【2023 B卷

    华为OD机试 真题 点这里 华为OD机试 真题考点分类 点这里 题目描述 给定一个非空数组 列表 起元素数据类型为整型 请按照数组元素十进制最低位从小到大进行排序 十进制最低位相同的元素 相对位置保持不变 当数组元素为负值时 十进制最低为等
  • 集合引用类型 下

    目录 Map Map set Map get Map delete Map has Map values Map entries Map clear 选择Object 还是Map 数据转换 转为数组 转为 JSON 对象转为 Map 数组转
  • 【Matlab】系统的响应分析

    前言 一个信号系统课程中使用Matlab对系统的零状态响应 零输入响应 完全响应 冲激响应 阶跃响应求解 波形生成以及分析的实验 一 内容 设系统的微分方程为 激励为 起始状态条件为 可求得 零输入响应 零状态响应 完全响应 冲激响应 阶跃
  • 攻防世界web新手题解题writeup

    攻防世界web新手题 1 view source 题目描述 X老师让小宁同学查看一个网页的源代码 但小宁同学发现鼠标右键好像不管用了 题目场景 http 220 249 52 133 58537初级题 按下F12查看网页源码得到flag 2
  • vue自定义指令实现复制功能

    思路 使用浏览器自带的execCommand使用Copy 但此方法只能是被选中的值才能进行复制粘贴 动态创建一个文本域 将拿到的文字放在文本域中 然后自动选中 再调用浏览器方法即可 提示 想要选中文本框的内容 有如下两个方法可以 方法一 通
  • 用python画一束满天星花朵,python满天星绘制流程图

    大家好 小编来为大家解答以下问题 用python画一束满天星花朵 python满天星绘制流程图 今天让我们一起来看看吧 1 用python画一百个同心圆的代码 import matplotlib pyplot as plt from mat
  • u盘文件删除如何恢复呢?

    相信很多上班族都有自己的u盘 u盘是用来储存一些我们可以随身携带的数据的 无论是学习还是工作 只要用电脑 都需要使用u盘 而u盘就是一个小容器 可以装一些重要的文件 方便我们随身携带 当u盘里的文件在使用u盘的过程中不小心被删除了 怎么恢复
  • selenium的安装及使用介绍

    R爬虫之上市公司公告批量下载 selenium的安装及使用介绍 http yphuang github io blog 2016 03 01 Get Listed Company Announcement
  • 【超简单】使用TensorFlow训练和部署图像分类模型

    一 简介 使用TensorFlow和OpenCV实现图像分类 按照流程图运行程序 可以非常简便地完成图像预处理 生成数据集 训练模型和部署模型 四个程序的功能如下 preprocess py 对图像进行重命名和调整大小 建议拍摄形状为正方形
  • 数据流图学习

    数据流图或数据流程图 Data Flow Diagram 缩写为DFD 是什么 数据流图是结构化分析方法中使用的工具 它以图形的方式描绘数据在系统中流动和处理的过程 由于它只反映系统必须完成的逻辑功能 所以它是一种功能模型 标志了一个系统的
  • JavaScript中apply()和call()的区别和应用

    JavaScript中的每一个Function对象都有一个apply 方法和一个call 方法 这两个方法能够改变函数体内部 this 的指向 例如 fun1 call 或者fun1 apply 都是为了改变fun1函数内部的this指向