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

箭头函数的this指向谁

先看1个重要原则:

        由Vue管理的函数,一定不要写箭头函数,箭头函数的this就不再是Vue实例了

箭头函数的 this 指向在定义时确定,继承自外层作用域(即定义时的上下文)的 this,且无法通过 callapply  或  bind 改变。以下是关键点总结:

1. 词法作用域的 this

  • 箭头函数没有自己的 this,它使用外层非箭头函数作用域的 this 值。若外层没有函数,则指向全局对象(如 window 或 global)。

  • 示例

    const obj = {value: 42,getValue: function() {// 普通函数中的 this 指向 objconst arrowFn = () => this.value;return arrowFn();}
    };
    console.log(obj.getValue()); // 输出 42

    2. 与普通函数的区别

  • 普通函数this 由调用方式决定(如对象方法、构造函数、事件监听等)。

  • 箭头函数this 固定为定义时的外层 this

  • 示例对比

    // 普通函数(this 指向调用者)
    const obj1 = {value: 10,fn: function() { console.log(this.value); }
    };
    setTimeout(obj1.fn, 100); // 输出 undefined(this 指向全局)// 箭头函数(this 继承外层)
    const obj2 = {value: 10,fn: function() {setTimeout(() => console.log(this.value), 100); // 继承外层 this(obj2)}
    };
    obj2.fn(); // 输出 10

    3. 无法通过绑定方法修改

  • 使用 callapply 或 bind 无法改变箭头函数的 this

  • 示例

    const outerThis = { name: "Outer" };
    const arrowFn = () => console.log(this.name);
    arrowFn.call({ name: "New" }); // 输出 "Outer"(若外层 this 指向全局则可能输出 undefined)

    4. 对象字面量中的陷阱

  • 对象字面量不创建作用域,内部箭头函数的 this 指向全局。

  • 示例

    const obj = {value: "Hello",getValue: () => console.log(this.value) // this 指向全局(如 window)
    };
    obj.getValue(); // 输出 undefined(假设外层为全局)

    5. 在构造函数中的行为

  • 箭头函数作为构造函数会报错(不能 new)。

  • 但若在构造函数内定义,箭头函数会继承实例的 this

    function Person() {this.age = 0;setInterval(() => {this.age++; // this 指向 Person 的实例}, 1000);
    }
    const p = new Person(); // age 每秒自增

    6.总结

  • 箭头函数的 this:继承自定义时的外层作用域,且不可更改。

  • 使用场景:需要固定 this 时(如回调、事件处理、setTimeout)。

  • 避免场景:需要动态 this 时(如对象方法、构造函数)。

通过理解箭头函数的词法 this 特性,可以更灵活地控制代码中的上下文绑定。

    相关文章:

    箭头函数的this指向谁

    先看1个重要原则: 由Vue管理的函数,一定不要写箭头函数,箭头函数的this就不再是Vue实例了 箭头函数的 this 指向在定义时确定,继承自外层作用域(即定义时的上下文)的 this,且无法通过 call、app…...

    Node.js技术原理分析系列——Node.js调试能力分析

    本文由体验技术团队屈金雄原创。 Node.js 是一个开源的、跨平台的 JavaScript 运行时环境,它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8引擎构建的,专为高性能、高并发的网络应用而设计,广泛应用于构建服务器端应…...

    网络基础 【UDP、TCP】

    1.UDP 首先我们学习UDP和TCP协议 要从这三个问题入手 1.报头和有效载荷如何分离、有效载荷如何交付给上一层的协议?2.认识报头3.学习该协议周边的问题 UDP报头 UDP我们先从示意图来讲解,认识报头。 UDP协议首部有16位源端口号,16位目的端…...

    python旅游推荐系统+爬虫+可视化(协同过滤算法)

    ✅️基于用户的协同过滤算法 ✅️有后台管理 ✅️2w多数据集 这个旅游数据分析推荐系统采用了Python语言、Django框架、MySQL数据库、requests库进行网络爬虫开发、机器学习中的协同过滤算法、ECharts数据可视化技术,以实现从网站抓取旅游数据、个性化推荐和直观展…...

    数据结构 树的存储和遍历

    一、树的定义 树的定义 树型结构是⼀类重要的⾮线性数据结构。 • 有⼀个特殊的结点,称为根结点,根结点没有前驱结点。 • 除根结点外,其余结点被分成M个互不相交的集合T1 、T2 、...、Tm T,其中每⼀个集合⼜是⼀棵树&#xff0c…...

    《解锁自然语言处理:让公众正确拥抱AI语言魔法》

    在当今数字化浪潮中,自然语言处理(NLP)技术作为人工智能领域的璀璨明珠,正以惊人的速度融入我们的生活。从智能语音助手到智能客服,从机器翻译到内容创作辅助,NLP技术无处不在。然而,如同任何强…...

    qt实习总结

    创建一个滑动条 QSlider *slider new QSlider(Qt::Vertical); //创建一个垂直方向的 进度条 带有上下箭头的输入框 QSpinBox 提供了一个带有上下箭头的输入框 垂直 水平怎么说 horizontal vetical 布局知识 BtnLayout->addWidget(AmendBtn); BtnLayout->addWidg…...

    HTTP的“对话”逻辑:请求与响应如何构建数据桥梁?

    一、前言 作为现代互联网通信的基石,HTTP协议定义了客户端与服务器之间的“对话规则”。每一次网页加载、API调用或文件传输的背后,都离不开精心构造的HTTP请求与响应。请求中封装了用户的意图——从请求方法、资源路径到提交的数据;响应则承…...

    Docker 镜像标签使用

    写在前面 当使用命令 docker pull mysql 拉取镜像时,其实等价于如下命令 docker pull mysql:latest latest 是默认的标签,字面上理解为最新版本的镜像,实质上 latest 只是镜像的标签名称,跟具体某个版本号地位一样,…...

    C#异步/多线程编程中Task对象强大的功能介绍。

    在 C# 的异步编程中,Task 是一个非常重要的类,它表示一个异步操作。Task 类提供了许多方法,用于管理、控制和组合异步操作。以下是 Task 类中一些常用方法的详细讲解及其功能。 1. Task.Run 功能:将指定的代码块调度到线程池中异步…...

    DDD聚合在 ASP.NET Core中的实现

    在ASP.NET Core中实现DDD(领域驱动设计,Domain-Driven Design)聚合通常涉及到几个关键步骤,包括定义领域模型、实现领域服务、使用仓储模式等。以下是如何在ASP.NET Core应用中实现DDD聚合的一些步骤和示例。 1. 定义领域模型 首…...

    docker push镜像到阿里云

    阿里云账号 阿里云-计算,为了无法计算的价值 开通个人镜像容器 进入控制台,试用容器 实例列表界面 点击上图中的个人,个人版特性 创建个人版: 个人版实例界面: 设置密码 个人版实例: 创建镜像仓库 如上…...

    移动通信发展史

    概念解释 第一代网络通信 1G 第二代网络通信 2G 第三代网络通信 3G 第四代网络通信 4G 4g网络有很高的速率和很低的延时——高到500M的上传和1G的下载 日常中的4G只是用到了4G技术 运营商 移动-从民企到国企 联通-南方教育口有人 电信 铁通:成立于 2000 年…...

    Transformer笔记

    Transformer笔记 文章目录 Transformer笔记模型架构核心技术多头注意力机制概念数学概念单头注意力机制代码 基于位置的前馈网络残差连接和层规范化 编码器解码器 特点:Transformer模型完全基于注意力机制,没有任何卷积层或循环神经网络。之前Transforme…...

    【学习资源】时间序列数据分析方法(1)

    时间序列数据分析是一个有趣的话题,让我们多花一些时间来研究。此篇为第一篇文章。主要介绍特征提取方法、深度学习时序数据分析模型、参考资源。期望能帮助大家解决工业领域的相关问题。 1 特征提取方法:信号处理 (来源:INTELLIGENT FAULT DIAGNOSIS A…...

    PHP 文件与目录操作

    PHP 学习资料 PHP 学习资料 PHP 学习资料 在 PHP 编程中,文件与目录操作是一项基础且重要的技能。无论是处理用户上传文件、生成日志,还是管理项目中的各类资源,都离不开对文件和目录的操作。PHP 提供了丰富的内置函数,方便开发…...

    PostgreSQL认证指南

    PostgreSQL 作为一款强大的开源关系型数据库,深受开发者和企业的青睐。获得 PostgreSQL 专家认证,不仅能提升个人在数据库领域的专业能力,还能为职业发展增添有力筹码。下面为大家详细介绍 PostgreSQL 专家认证的学习路径。 一、深入理解基础…...

    hive全量迁移脚本

    #!/bin/bash #场景:数据在同一库下,并且hive是内部表(前缀的hdfs地址是相同的)#1.读取一个文件,获取表名#echo "时间$dt_jian_2-------------------------" >> /home/hadoop/qianyi_zengliang/rs.txt#…...

    Qt5开发入门指南:从零开始掌握跨平台开发

    目录 Qt框架概述 开发环境搭建 基础语法与核心机制 第一个Qt窗口程序 常见问题解答 一、Qt框架概述 1.1 什么是Qt? Qt是一个1995年由挪威Trolltech公司开发的跨平台C图形用户界面应用程序框架。最新Qt5版本主要包含: GUI模块:支持Wind…...

    WPF的Prism框架的使用

    安装Prism.DryIoc库&#xff1a; Prism的区域和模块化&#xff1a; 一个区域可以显示一个用户控件 一个模块就是一个项目&#xff0c;也就是一个类库 动态切换用户控件的案例&#xff1a; <Grid><Grid.RowDefinitions><RowDefinition Height"auto"…...

    【机器学习】线性回归 线性回归模型的损失函数 MSE RMSE MAE R方

    【机器学习系列】 KNN算法 KNN算法原理简介及要点 特征归一化的重要性及方式线性回归算法 线性回归与一元线性回归 线性回归模型的损失函数 多元线性回归 多项式线性回归 线性回归模型的损失函数 V1.0损失函数的计算方法损失函数的分类MSE (Mean Squared Error)RMSE (Root Mea…...

    服务器部署DeepSeek,通过Ollama+open-webui部署

    1. 安装ollama 1.1. linux 安装 Ollama是目前常用的AI模式部署的第三方工具&#xff0c;能一键部署deepSeek Ollama官方网址https://ollama.com/ 选择Download下载对应的服务版本 服务器选择Linux&#xff0c;下面是下载代码 curl -fsSL https://ollama.com/install.…...

    Java 大视界 -- 开源社区对 Java 大数据发展的推动与贡献(91)

    &#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

    【Vue3源码解析】应用实例创建及页面渲染

    下载源码 git clone https://github.com/vuejs/core.git写该文章时的Vue版本为&#xff1a; "version": "3.5.13",这里要注意 pnpm 的版本不能太低&#xff0c;我此时的版本为 9.15.4。更新 pnpm 版本&#xff1a; npm install -g pnpm然后安装依赖&…...

    云原生AI Agent应用安全防护方案最佳实践(上)

    当下&#xff0c;AI Agent代理是一种全新的构建动态和复杂业务场景工作流的方式&#xff0c;利用大语言模型&#xff08;LLM&#xff09;作为推理引擎。这些Agent代理应用能够将复杂的自然语言查询任务分解为多个可执行步骤&#xff0c;并结合迭代反馈循环和自省机制&#xff0…...

    人工智能 - 主动视觉可能就是你所需要的:在双臂机器人操作中探索主动视觉

    AV-ALOHA 系统使用用于 AV 的 VR 耳机实现直观的数据收集&#xff0c;并且 用于作的 VR 控制器或引线臂。这有助于捕捉全身和头部 远程作我们的真实和模拟系统的运动&#xff0c;记录来自 6 个的视频 不同的摄像头&#xff0c;并为我们的 AV 仿制学习策略提供训练数据。 加州大…...

    Ubuntu 下 systemd 介绍

    系列文章目录 Linux内核学习 Linux 知识&#xff08;1&#xff09; Linux 知识&#xff08;2&#xff09; WSL Ubuntu QEMU 虚拟机 Linux 调试视频 PCIe 与 USB 的补充知识 vscode 使用说明 树莓派 4B 指南 设备驱动畅想 Linux内核子系统 Linux 文件系统挂载 QEMU 通过网络实现…...

    两个实用且热门的 Python 爬虫案例,结合动态/静态网页抓取和反爬策略,附带详细代码和实现说明

    在这个瞬息万变的世界里&#xff0c;保持一颗探索的心&#xff0c;永远怀揣梦想前行。即使有时会迷失方向&#xff0c;也不要忘记内心深处那盏指引你前进的明灯。它代表着你的希望、你的信念以及对未来的无限憧憬。每一个不曾起舞的日子&#xff0c;都是对生命的辜负&#xff1…...

    Softing线上研讨会 | 自研还是购买——用于自动化产品的工业以太网

    | 线上研讨会时间&#xff1a;2025年1月27日 16:00~16:30 / 23:00~23:30 基于以太网的通信在工业自动化网络中的重要性日益增加。设备制造商正面临着一大挑战——如何快速、有效且经济地将工业以太网协议集成到其产品中。其中的关键问题包括&#xff1a;是否只需集成单一的工…...

    Jetson Agx Orin平台preferred_stride调试记录--1924x720图像异常

    1.问题描述 硬件: AGX Orin 在Jetpack 5.0.1和Jetpack 5.0.2上测试验证 图像分辨率在1920x720和1024x1920下图像采集正常 但是当采集图像分辨率为1924x720视频时,图像输出异常 像素格式:yuv_uyvy16 gstreamer命令如下 gst-launch-1.0 v4l2src device=/dev/video0 ! …...

    从2025年起:数字化建站PHP 8.1应成为建站开发的基准线

    在数字化浪潮席卷全球的今天,PHP语言仍然保持着Web开发领域的核心地位。根据W3Techs最新统计,PHP驱动着全球78.9%的已知服务端网站。当时间指向2025年,这个拥有28年历史的编程语言将迎来新的发展里程碑——PHP 8.1版本应成为网站开发的最低基准要求,这不仅是技术迭代的必然…...

    电动汽车电池监测平台系统设计(论文+源码+图纸)

    1总体设计 本次基于单片机的电池监测平台系统设计&#xff0c;其整个系统架构如图2.1所示&#xff0c;其采用STC89C52单片机作为控制器&#xff0c;结合ACS712电流传感器、TLC1543模数转换器、LCD液晶、DS18B20温度传感器构成整个系统&#xff0c;在功能上可以实现电压、电流、…...

    20240914 天翼物联 笔试

    文章目录 1、行测知识1.11.21.31.41.51.61.71.81.91.101.111.121.131.141.152、专业知识2.12.22.32.42.52.62.72.82.92.102.112.122.132.142.153、编程题3.13.2岗位:嵌入式开发工程师(上海) 题型:15 道行测知识,15 道专业知识,2 道编程题 注意:本文章暂无解析,谨慎分…...

    前端高级面试题

    以下是一些前端高级面试可能涉及到的内容: 一、前端工程化 如何构建一个适合大型团队的前端代码规范和构建流程? 答案: 代码规范方面: 使用ESLint结合Prettier来统一JavaScript和CSS(包括预处理器如Sass或Less)的语法风格。例如,规定变量命名采用驼峰命名法,函数名要有…...

    【nvidia】NCCL禁用P2P后果权衡

    通信bound还是计算bound&#xff1f; 计算bound场景&#xff1a; 模型参数量较小&#xff08;如参数量未超出单卡显存容量&#xff0c;使用纯数据并行&#xff09;或计算密度极高&#xff08;如大batch size下的矩阵运算&#xff09;时&#xff0c;A100的计算能力&#xff08…...

    哈希表(C语言版)

    文章目录 哈希表原理实现(无自动扩容功能)代码运行结果 分析应用 哈希表 如何统计一段文本中&#xff0c;小写字母出现的次数? 显然&#xff0c;我们可以用数组 int table[26] 来存储每个小写字母出现的次数&#xff0c;而且这样处理&#xff0c;效率奇高。假如我们想知道字…...

    unity学习46:反向动力学IK

    目录 1 正向动力学和反向动力学 1.1 正向动力学 1.2 反向动力学 1.3 实现目标 2 实现反向动力 2.1 先定义一个目标 2.2 动画层layer&#xff0c;需要加 IK pass 2.3 增加头部朝向代码 2.3.1 专门的IK方法 OnAnimatorIK(int layerIndex){} 2.3.2 增加朝向代码 2.4 …...

    夜莺监控发布 v8.beta5 版本,优化 UI,新增接口认证方式便于鉴权

    以防读者不了解夜莺&#xff0c;开头先做个介绍&#xff1a; 夜莺监控&#xff0c;英文名字 Nightingale&#xff0c;是一款侧重告警的监控类开源项目。类似 Grafana 的数据源集成方式&#xff0c;夜莺也是对接多种既有的数据源&#xff0c;不过 Grafana 侧重在可视化&#xff…...

    asio的使用

    1、下载 性能测试&#xff1a;https://github.com/huyuguang/asio_benchmark 2、基本使用 2.1 TCP 1、客户端&#xff1a; 2、服务端&#xff1a; 2.2 UDP单揪 boost的asio接收单路大数据量udp包的方法 1、发送&#xff1a; 2、接收&#xff1a; #include "Circled…...

    PHP语法完全入门指南:从零开始掌握动态网页

    本文专为零基础新手设计,通过5000字详细讲解带你系统学习PHP语法。包含环境搭建、基础语法、实战案例,并附20+代码示例。阅读后你将能独立开发简单动态网页! 一、PHP开发环境搭建(新手必看) 1.1 为什么需要搭建环境? PHP是服务器端脚本语言,需要运行在服务器环境中。推…...

    WPF快速创建DeepSeek本地自己的客户端-基础思路版本

    开发工具&#xff1a;VS 2015 开发环境&#xff1a;.Net 4.0 使用技术&#xff1a;WPF 本篇文章内容&#xff1a; 本地部署DeepSeek以后一般使用网页工具&#xff08;如Chatbox&#xff09;或者DOS窗口与其对话。本篇文章使用WPF创建一个基础版的对话工具。 一、搭建本地DeepS…...

    Win7本地化部署deepseek-r1等大模型详解

    参考链接 在Windows 7操作系统&#xff0c;基于llama.cpp本地化部署 deepseek-r1模型的方法 2025-02-08 2G内存Windows7运行deepseek-r1:1.5b 这两个链接写的可能不够详细&#xff0c;有同学私信问实现过程&#xff0c;这里进一步解释一下。 一、准备 需要准备的大模型、工具…...

    分享一个解梦 Chrome 扩展 —— 周公 AI 解梦

    一、插件简介 周公 AI 解梦是一款基于 Chrome 扩展的智能解梦工具&#xff0c;由灵机 AI 提供技术支持。它能运用先进的 AI 技术解析梦境含义&#xff0c;为用户提供便捷、智能的解梦服务。无论你是对梦境充满好奇&#xff0c;还是想从梦境中获取一些启示&#xff0c;这款插件都…...

    国产Linux OS:网络性能调优关键内核参数

    国产Linux OS&#xff1a;网络性能调优关键内核参数 参数列表 这些参数是Linux系统中用于网络性能调优的关键内核参数&#xff0c;它们控制了网络接口和TCP协议栈的行为。合理调整这些参数可以根据具体的应用场景和网络条件优化系统的网络性能。 sysctl net.core.rmem_max sy…...

    DeepSeek接口联调(postman版)

    第一步&#xff1a;获取API key 获取APIkeys链接https://platform.deepseek.com/api_keys 点击创建 API key 即可免费生成一个key值&#xff0c;别忘记保存。 第二步&#xff1a;找到deepseek官方接口文档 文档地址&#xff1a;https://api-docs.deepseek.com/zh-cn/ 第三步…...

    算法19(力扣244)反转字符串

    1、问题 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。 2、示例 &#xff08;1&#xff09; 示例 1&a…...

    Svelte 最新中文文档翻译(10)—— use: 与 Actions

    前言 Svelte&#xff0c;一个非常“有趣”、用起来“很爽”的前端框架。从 Svelte 诞生之初&#xff0c;就备受开发者的喜爱&#xff0c;根据统计&#xff0c;从 2019 年到 2024 年&#xff0c;连续 6 年一直是开发者最感兴趣的前端框架 No.1&#xff1a; Svelte 以其独特的编…...

    iptables网络安全服务详细使用

    iptables防火墙概念说明 开源的基于数据包过滤的网络安全策略控制工具。 centos6.9 --- 默认防火墙工具软件iptables centos7 --- 默认防火墙工具软件firewalld&#xff08;zone&#xff09; iptables主要工作在OSI七层的二、三、四层&#xff0c;如果重新编译内核&…...

    node.js + html调用ChatGPTApi实现Ai网站demo(带源码)

    文章目录 前言一、demo演示二、node.js 使用步骤1.引入库2.引入包 前端HTML调用接口和UI所有文件总结 前言 关注博主&#xff0c;学习每天一个小demo 今天是Ai对话网站 又到了每天一个小demo的时候咯&#xff0c;前面我写了多人实时对话demo、和视频转换demo&#xff0c;今天…...

    Vue 3最新组件解析与实践指南:提升开发效率的利器

    目录 引言 一、Vue 3核心组件特性解析 1. Composition API与组件逻辑复用 2. 内置组件与生命周期优化 3. 新一代UI组件库推荐 二、高级组件开发技巧 1. 插件化架构设计 2. 跨层级组件通信 三、性能优化实战 1. 惰性计算与缓存策略 2. 虚拟滚动与列表优化 3. Tree S…...