当前位置: 首页 > news >正文

js中改变this指向的三种方式

js中改变this指向的三种方式

  • 1、call方法
  • 2、apply方法
  • 3、bind方法

1、call方法

使用 call 方法调用函数,同时指定函数中 this 的值,使用方法如下代码所示:

<script>const obj = {uname: '刘德华'}function fn(x, y) {console.log(this) console.log(x + y)}// 1. 调用函数  // 2. 改变 this 指向fn.call(obj, 1, 2)
</script>

运行结果如下:
在这里插入图片描述
总结:

  1. call 方法能够在调用函数的同时指定 this 的值
  2. 使用 call 方法调用函数时,第1个参数为 this 指定的值
  3. call 方法的其余参数会依次自动传入函数做为函数的参数

2、apply方法

使用 call 方法调用函数,同时指定函数中 this 的值,使用方法如下代码所示:

<script>const obj = {age: 18}function fn(x, y) {console.log(this) // {age: 18}console.log(x + y)}// 1. 调用函数// 2. 改变this指向 //  fn.apply(this指向谁, 数组参数)fn.apply(obj, [1, 2])// 3. 返回值   本身就是在调用函数,所以返回值就是函数的返回值// 使用场景: 求数组最大值// const max = Math.max(1, 2, 3)// console.log(max)const arr = [100, 44, 77]const max = Math.max.apply(Math, arr)const min = Math.min.apply(null, arr)console.log(max, min)// 使用场景: 求数组最大值console.log(Math.max(...arr))
</script>

运行结果如下:
在这里插入图片描述
总结:

  1. apply 方法能够在调用函数的同时指定 this 的值
  2. 使用 apply 方法调用函数时,第1个参数为 this 指定的值
  3. apply 方法第2个参数为数组,数组的单元值依次自动传入函数做为函数的参数

3、bind方法

bind 方法并不会调用函数,而是创建一个指定了 this 值的新函数,使用方法如下代码所示:

<script>const obj = {age: 18}function fn() {console.log(this)}// 1. bind 不会调用函数 // 2. 能改变this指向// 3. 返回值是个函数,  但是这个函数里面的this是更改过的objconst fun = fn.bind(obj)// console.log(fun) fun()// 需求,有一个按钮,点击里面就禁用,2秒钟之后开启document.querySelector('button').addEventListener('click', function () {// 禁用按钮this.disabled = truewindow.setTimeout(function () {// 在这个普通函数里面,我们要this由原来的window 改为 btnthis.disabled = false}.bind(this), 2000)   // 这里的this 和 btn 一样})
</script>

运行结果如下:
在这里插入图片描述
注:bind 方法创建新的函数,与原函数的唯一的变化是改变了 this 的值。

相关文章:

js中改变this指向的三种方式

js中改变this指向的三种方式 1、call方法2、apply方法3、bind方法 1、call方法 使用 call 方法调用函数&#xff0c;同时指定函数中 this 的值&#xff0c;使用方法如下代码所示&#xff1a; <script>const obj {uname: 刘德华}function fn(x, y) {console.log(this) …...

小程序中如何进行数据传递和通信

103. 小程序中如何进行数据传递和通信&#xff1f; 1. 使用页面参数传递数据&#xff1a; 在小程序中&#xff0c;可以通过页面参数来传递数据。当跳转到一个新页面时&#xff0c;可以将需要传递的数据作为参数传入&#xff0c;然后在目标页面的onLoad函数中获取参数。 示例…...

Vue3项目中引入ElementUI使用详解

目录 Vue3项目中引入 ElementUI1.安装2.引入2.1 全局引入2.2 按需引入viteWebpack 3.使用 Vue3项目中引入 ElementUI ElementUI是一个强大的PC端UI组件框架&#xff0c;它不依赖于vue&#xff0c;但是却是当前和vue配合做项目开发的一个比较好的ui框架&#xff0c;其包含了布局…...

计算机启动

按下主机上的 power 键后&#xff0c;第一个运行的软件是 BIOS,BIOS 全称叫 Base Input & Output System&#xff0c;即基本输入输出系统。 &#xff08;8086的1MB内存&#xff09; 地址 0&#xff5e;0x9FFFF 处是 DRAM&#xff0c;顶部的 0xF0000&#xff5e;0xFFFFF&am…...

Unity学习笔记--EventSystem事件系统在使用上需要注意的地方(很基础,但是很多人会忘记!!!)

目录 前言代码Unity 场景配置运行报错分析解决办法拓展&#xff08;预告&#xff09; 前言 之前有写过一篇关于事件系统实现以及使用的文章 Unity学习笔记–C#事件系统的实现与应用 最近在使用的时候遇到了一些问题&#xff0c;所以在此记录下&#xff0c;也为看到这篇文章的人…...

高手必备:JVM调优的常用命令和参数一网打尽!

大家好&#xff0c;我是小米&#xff01;在今天的技术分享中&#xff0c;我将和大家一起探讨JVM调优中的常用命令和参数。作为一名热爱技术的小伙伴&#xff0c;希望通过本篇文章的分享&#xff0c;能够帮助大家更好地理解和掌握JVM调优的方法和技巧。 JVM的结构 首先&#x…...

Uniapp 开发 ①(快速上手)

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; UNIAPP开发 &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &#x1f4…...

【数据库原理与实践】知识点归纳(下)

第6章 规范化理论 一、关系模式设计中存在的问题 关系、关系模式、关系数据库、关系数据库的模式 关系模式看作三元组&#xff1a;R < U,F >&#xff0c;当且仅当U上的一个关系r满足F时&#xff0c;r称为关系模式R < U,F >的一个关系 第一范式&#xff08;1NF&…...

代码随想录day34

1005.K次取反后最大化的数组和 本题主要是想到排序的时候要按绝对值大小排序。 class Solution { static bool cmp(int a,int b){return abs(a)>abs(b); } public:int largestSumAfterKNegations(vector<int>& nums, int k) {sort(nums.begin(),nums.end(),cmp);…...

CSS知识点汇总(八)--Flexbox

1. flexbox&#xff08;弹性盒布局模型&#xff09;是什么&#xff0c;适用什么场景&#xff1f; 1. flexbox&#xff08;弹性盒布局模型&#xff09;是什么 Flexible Box 简称 flex&#xff0c;意为”弹性布局”&#xff0c;可以简便、完整、响应式地实现各种页面布局。采用…...

ASCII、Unicode、UTF-8、GBK

入门小菜鸟&#xff0c;希望像做笔记记录自己学的东西&#xff0c;也希望能帮助到同样入门的人&#xff0c;更希望大佬们帮忙纠错啦~侵权立删。 目录 一、定义 1、ASCII 2、Unicode 3、UTF-8 4、GB2312 5、GBK 6、\u和\x 二、相互转化 1、str 与 ASCII 2、str与utf-…...

【安全】使用docker安装Nessus

目录 一、准备docker环境服务器&#xff08;略&#xff09; 二、安装 2.1 搜索镜像 2.2 拉取镜像 2.3 启动镜像 三、离线更新插件 3.1 获取challenge 3.2 官方注册获取激活码 3.3 使用challenge码和激活码获取插件下载地址 3.4 下载的插件以及许可协议复制到容器内 四…...

【Hadoop综合实践】手机卖场大数据综合项目分析

&#x1f680; 本文章实现了基于MapReduce的手机浏览日志分析 &#x1f680; 文章简介&#xff1a;主要包含了数据生成部分&#xff0c;数据处理部分&#xff0c;数据存储部分与数据可视化部分 &#x1f680; 【本文仅供参考&#xff01;&#xff01;非唯一答案】其中需求实现的…...

服务器技术(三)--Nginx

Nginx介绍 Nginx是什么、适用场景 Nginx是一个高性能的HTTP和反向代理服务器&#xff0c;特点是占有内存少&#xff0c;并发能力强&#xff0c;事实上nginx的并发能力确实在同类型的网页服务器中表现较好。 Nginx专为性能优化而开发&#xff0c;性能是其最重要的考量&#xf…...

OpenCV——总结《车牌识别》之《常用的函数介绍》

1. cv2.getStructuringElement(cv2.MORPH_RECT, (10, 10))element cv2.getStructuringElement(shape, ksize[, anchor])用于创建形态学操作的结构元素&#xff08;structuring element&#xff09;。 参数解释&#xff1a; shape&#xff1a;结构元素的形状&#xff0c;可以…...

chatgpt赋能python:如何利用Python进行自动化办公

如何利用Python进行自动化办公 在现代办公环境中&#xff0c;自动化成为了一种趋势。利用计算机程序自动处理重复性劳动&#xff0c;可以提高生产效率和工作质量&#xff0c;同时也能够让工作更加轻松。Python作为一种常用的编程语言&#xff0c;在自动化办公中发挥了重要作用…...

linux-2.6.22.6内核网卡驱动框架分析

网络协议分为很多层&#xff0c;而驱动这层对应于实际的物理网卡部分&#xff0c;这也是最底层的部分&#xff0c;以cs89x0.c这个驱动程序为例来分析下网卡驱动程序框架。 正常开发一个驱动程序时&#xff0c;一般都遵循以下几个步骤&#xff1a; 1.分配某个结构体 2.设置该结…...

机器学习7:特征工程

在传统的软件工程中&#xff0c;核心是代码&#xff0c;然而&#xff0c;在机器学习项目中&#xff0c;重点则是特征——也就是说&#xff0c;开发人员优化模型的方法之一是增加和改进其输入特征。很多时候&#xff0c;优化特征比优化模型带来的增益要大得多。 笔者曾经参与过一…...

coverage代码覆盖率测试介绍

coverage代码覆盖率测试介绍 背景知识补充 1、什么是覆盖率 测试过程中提到的覆盖率&#xff0c;指的是已测试的内容&#xff0c;占待测内容的百分比&#xff0c;在一定程度上反应测试的完整程度。 覆盖率有可以根据要衡量的对象细分很多种&#xff0c;比如接口覆盖率、分支…...

使用 Debian、Docker 和 Nginx 部署 Web 应用

前言 本文将介绍基于 Debian 的系统上使用 Docker 和 Nginx 进行 Web 应用部署的过程。着重介绍了 Debian、Docker 和 Nginx 的安装和配置。 第 1 步&#xff1a;更新和升级 Debian 系统 通过 SSH 连接到服务器。更新软件包列表&#xff1a;sudo apt update升级已安装的软件…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...