JavaScript中call和apply函数方法

news2024/9/23 13:26:35

看下下面这个代码示例:

```javascript
const lufthansa = {
  airline: 'Lufthansa',
  iataCode: 'LH',
  bookings: [],
  book(flightNum, name) {
    console.log(
      `${name} booked a seat on ${this.airline} flight ${this.iataCode}${flightNum}`
    );
  },
};

lufthansa.book(239, ‘IT知识一享’);


```javascript
这段代码展示了一个名为 Lufthansa 的航空公司对象,其中包含了一些属性和方法。航空公司对象的名称是 Lufthansa,其 IATA 代码是 LH。

在这里插入图片描述

● 假如我们现在新增了一个航班,并且在外部重用函数,但是发现无法正常运行?

const lufthansa = {
  airline: 'Lufthansa',
  iataCode: 'LH',
  bookings: [],
  book(flightNum, name) {
    console.log(
      `${name} booked a seat on ${this.airline} flight ${this.iataCode}${flightNum}`
    );
    this.bookings.push({ flight: `${this.iataCode}${flightNum}`, name });
  },
};

lufthansa.book(239, 'IT知识一享');

const eurowings = {
  name: 'Eurowings',
  iataCode: 'EW',
  bookings: [],
};

const book = lufthansa.book;
book(23, 'IT知识一享2');

在这里插入图片描述

原因:
在 JavaScript 中,函数的 this 关键字指向调用该函数的对象。但是,当将一个函数从一个对象中提取出来并作为独立函数调用时,this 的指向会变化。
在代码中,将 lufthansa.book 赋值给 book 变量后,book 变量中的函数失去了与 lufthansa 对象的关联。因此,当你调用 book(23, ‘IT知识一享2’) 时,this 的指向变为全局对象(在浏览器中通常是 window 对象),而不是 lufthansa 对象。

现在就产生了问题,我们怎么样使得当我们想调用lufthansa对象时,this就指向lufthansa,而我们想调用eurowings时,this就指向eurowings呢?在JavaScript中,有三种函数方法可以做到这一点,分别是call、apply、bind;

call方法

首先我们先用call方法

const lufthansa = {
  airline: 'Lufthansa',
  iataCode: 'LH',
  bookings: [],
  book(flightNum, name) {
    console.log(
      `${name} booked a seat on ${this.airline} flight ${this.iataCode}${flightNum}`
    );
    this.bookings.push({ flight: `${this.iataCode}${flightNum}`, name });
  },
};

lufthansa.book(239, 'IT知识一享');

const eurowings = {
  airline: 'Eurowings',
  iataCode: 'EW',
  bookings: [],
};

const book = lufthansa.book;
book.call(eurowings, 666, 'IT知识一享2');
book.call(lufthansa, 888, 'IT知识一享3');

apply方法

我们重新创建一个航班来演示apply方法

const swiss = {
  airline: 'Swiss Air Lines',
  iataCode: 'LX',
  bookings: [],
};

const flightData = [999, 'IT知识一享999'];
book.apply(swiss, flightData);

在这里插入图片描述

但是在现代的JavaScript中,apply不建议使用,即使这种变量的方法,call方法也能使用

book.call(swiss, ...flightData);

在这里插入图片描述

总结:

call和apply比较:
相同之处:

  1. 两者都是用来调用函数并指定函数内部的 this 值。
  2. 两者都可以传递参数给被调用的函数。
    不同之处:
  3. 语法不同:call 方法接受一个指定的 this 值,后面是按参数列表传递的一系列参数;而 apply 方法接受一个指定的 this 值,后面是一个包含参数的数组或类数组对象。
  4. 参数传递方式不同:call 方法是按参数列表传递的,每个参数都需要单独列出;apply 方法是将参数放在一个数组或类数组对象中传递给函数。
  5. 性能差异:由于 apply 方法需要将参数打包成数组,因此在参数较多的情况下,使用 call 方法性能可能会更好。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1488347.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python实现有限域GF(2^8)上的乘法运算

有限域GF(2^8)上的乘法运算可以看成多项式的乘法 5e转换成二进制为0101 1110,对应的多项式为x^6x^4x^3x^2x 3f转换成二进制为0011 1111,对应的多项式为x^5x^4x^3x^2x1 将这两个多项式相乘再模多项式x^8x^4x^3x1得到结果为1110 0101,转换为…

【扩散模型】生成模型中的Residual Self-Attention UNet 以及 DDPM的pytorch代码

参考: [1] https://github.com/xiaohu2015/nngen/blob/main/models/diffusion_models/ddpm_cifar10.ipynb [2] https://www.bilibili.com/video/BV1we4y1H7gG/?spm_id_from333.337.search-card.all.click&vd_source9e9b4b6471a6e98c3e756ce7f41eb134 TOC 1 UNe…

Vue3+vite+vant UI移动端项目创建保姆级教程

项目创建 创建Vue3项目 npm create vue@latestcd shoujihao-h5npm installnpm run formatnpm run dev修改端口 vue3 默认端口5173 想要把端口号修改为8088,在vite.config.js中写入 server: {port: 8088,//端口号host: true,//ip地址 或 0.0.0.0 或 "loaclhost"o…

OSCP靶场--Walla

OSCP靶场–Walla 考点(1.hydra http基本认证爆破: 2.sudo -l:python导入外部模块提权 3.Linux内核提权:cve-2021-4034) 1.nmap扫描 ## ┌──(root㉿kali)-[~/Desktop] └─# nmap -sV -sC -p- 192.168.181.97 --min-rate 2000 Starting N…

浅谈二进制漏洞研究与病毒研究

安全方向 最近一些朋友找到我,说想学习一下漏洞和病毒研究,其实很多安全研究人员想入门二进制安全,但关于二进制安全,很多新手朋友对这个方向不太了解,也不知道该怎么去深入的研究学习二进制安全,如何才能…

装修必看干货|入户玄关设计进门就是客厅应该怎么设计?福州中宅装饰,福州装修

入户玄关设计在进门就是客厅的情况下,想要拥有单独的玄关空间,以下是五点设计建议: ①隔断屏风 使用隔断屏风是传统而常见的一种空间分割方法。可以选用木制、金属或玻璃等材质的屏风,根据需要进行灵活搭配和定制。 屏风的款式和…

项目可行性方案:人脸识别实现无感考勤的项目技术可行性方案

目 录 1.引言 1.1编写目的 1.2背景 2.可行性研究的前提 2.1要求 2.2目标 3.对现有系统的分析 3.1系统改进示意图 3.2改进之处 3.3技术条件方面的可行性 4.结论 1.引言 1.1编写目的 本报告编写的目的是探究学校里对教室和办公室内教师的人脸进行识别从而…

Kubernetes-1

学习Kubernetes第一天 k8s-11、什么是Kubernetes2、配置Kubernetes2.1、准备三台全新的虚拟机2.2、关闭防火墙和SElinux2.3、修改主机名2.4、升级操作系统(三台一起操作)2.5、配置主机hosts文件,相互之间通过主机名互相访问2.6、配置master和node之间的免密通道2.7、…

Linux虚拟文件系统管理技术

Linux虚拟文件系统管理技术 1. 虚拟文件系统的组成1.1 虚拟文件系统架构1.2 超级块(super block)1.3 索引节点(inode)1.3.1 inode怎样生成的?1.3.2 inode和文件的关系? 1.4 目录项(dentry)1.5 文件对象(file) 2. 进程与文件系统的关系3. 磁盘与文件系统的关系4. 常见的文件系…

STM32 (4) GPIO(1)

1.芯片的引脚分布 2.普通IO引脚的命名规则 3.IO复用 IO引脚身兼数职的现象叫做IO复用,可以使芯片拥有更多的功能,例如: PA9和PA10既可以用于GPIO的引脚,也可以用于串口或定时器的引脚 通用:CPU直接控制IO引脚的输入输…

了解游戏中的数据同步

目录 数据同步 通过比较来看状态同步和帧同步 状态同步 帧同步 帧同步实现需要的条件 两者相比较 数据同步 在联机游戏中,我的操作和数据要同步给同一局游戏中其他所有玩家,其他玩家的操作和数据也会同步给我。这叫做数据同步,目前数据…

C# Onnx segment-anything 分割万物 一键抠图

目录 介绍 效果 模型信息 sam_vit_b_decoder.onnx sam_vit_b_encoder.onnx 项目 代码 下载 C# Onnx segment-anything 分割万物 一键抠图 介绍 github地址:https://github.com/facebookresearch/segment-anything The repository provides code for runn…

UDP协议和TCP协议详解

文章目录 应用层自定义协议 传输层udp协议TCP协议1.确认应答2.超时重传3.连接管理建立连接, 三次握手断开连接, 四次挥手tcp的状态 4.滑动窗口5.流量控制6.拥塞控制7.延时应答8.携带应答9.面向字节流10.异常情况 应用层 自定义协议 客户端和服务器之间往往要进行交互的是“结构…

115.龙芯2k1000-pmon(14)- pmon编程优化

通过上面的分析,发现,其实gzrom-dtb.bin其实有很多空白区域,而且空白区域填充的都是0,这对flash来说并不友好,能否把填充的位置改为ff呢,这样编程的速度也会加快,对flash来说也是一种保护呢。 …

#QT(DEMO)

1.IDE:QTCreator 2.实验:打印"hello wolrd" 3.记录 (1)创建一个新工程: 新建好一个工程存放文件夹(路径不能有中文),然后按下图配置 (2)点击widgets.ui拖入以…

活动报名|AutoMQ x 阿里云云原生创新论坛(2024.03.09)见证“新一代云原生 Kafka ”重磅发布!

新一年, AutoMQ 首场线下活动重磅来袭!2024年3月9日,由 AutoMQ 与阿里云联合举办的云原生创新论坛将于杭州与大家见面,双方联合重磅发布新一代云原生 Kafka ——AutoMQ On-Prem 版本 !现场将会分享如何通过云原生和存算…

美摄科技实时语音数字人解决方案

随着科技的飞速发展,数字人技术已经逐渐渗透到我们生活的各个角落。作为数字人技术的先驱者,美摄科技凭借其卓越的实时语音数字人解决方案,正引领着企业步入一个全新的交互时代。 美摄科技的实时语音数字人解决方案,是基于语音和…

【JavaEE进阶】 Linux常用命令

文章目录 🍃前言🌴ls 与 pwd🚩ls🚩pwd 🎍cd🚩认识Linux目录结构 🍀touch与cat🚩touch🚩cat 🌲mkdir与rm🚩mkdir🚩rm 🎄cp与…

UCSF DOCK 分子对接详细案例(04)-基于RDKit描述符的分子从头设计DOCK_D3N

欢迎浏览我的CSND博客! Blockbuater_drug …点击进入 文章目录 前言一、 软件及操作环境二、研究目的三、结构文件准备四、 DOCK/RDKit中 de novo design4.1 de novo design - refine_D3N4.2 对输出重新评分 总结参考资料 前言 本文是UCSF DOCK的使用案例分享&…

论文阅读:2017MobileNet V1谷歌轻量化卷积神经网络

拓展:贾扬清:深度学习框架caffe(Convolutional Architecture for Fast Feature Embedding) 主要贡献: 深度可分离卷积(Depthwise separable convolution)逐点卷积(Pointwise convo…