JavaScript 中的“this”关键字到底是什么?

javascript 中的“this”关键字到底是什么?

关键见解:

全局范围:在全局上下文中,this 指的是全局对象(例如,窗口)。

函数上下文:在常规函数中,这在严格和非严格模式下表现不同,返回未定义或全局对象。

方法:在对象方法中,this 指对象本身,允许访问其属性。

调用、应用、绑定:这些方法允许通过更改 this 上下文来在对象之间共享函数。

立即学习“Java免费学习笔记(深入)”;

箭头函数:箭头函数没有自己的 this,而是从其封闭的词法上下文继承它。

dom 元素:在 dom 事件处理程序中,这是指触发事件的 html 元素。

全球范围

首先,我们来看看“this”在全局范围内的行为方式。在 javascript 中,当您在代码顶层引用“this”时,它指的是全局对象。在网络浏览器中,这个全局对象是窗口

例如:

    console.log(this); // outputs: window

然而,在 node.js 中,全局对象是不同的,被称为 global.

因此,“this”的值可能会根据 javascript 代码执行的环境而变化。

理解“this”内部函数

接下来,让我们探讨一下“this”在函数内部的行为方式。当你定义一个函数并调用它时,该函数内“this”的值将取决于该函数的调用方式。

在非严格模式下,如果您在函数中记录“this”,它也会引用全局对象:

    function test() {        console.log(this);    }    test(); // outputs: window

但是,如果您通过添加“use strict”来启用严格模式;在函数的顶部,“this”将是未定义

    'use strict';    function test() {        console.log(this);    }    test(); // outputs: undefined

此行为是 this 替换 的结果,它指出如果“this”在非严格模式下为 null 或未定义,则它默认为全局对象。

严格模式与非严格模式

理解严格模式和非严格模式之间的区别至关重要。在非严格模式下,“this”的值可以是全局对象,但在严格模式下,如果没有显式绑定到对象,它就会变成未定义。

回顾一下:

在全局空间中,“this”指的是全局对象。 在函数中,“this”在非严格模式下可以引用全局对象,但在严格模式下未定义。

“this”在对象方法中如何工作

现在,让我们讨论“this”在对象方法中的行为方式。当函数在对象内部定义时,它被视为方法,并且在调用该方法时“this”将引用该对象:

    const obj = {        name: 'my object',        getname: function() {            console.log(this.name);        }    };    obj.getname(); // outputs: my object

这里,“this”指的是“obj”,即定义该方法的对象。

通过 call、apply 和 bind 共享方法

为了在对象之间共享方法,javascript 提供了三个函数:callapplybind。其中每一个都允许您显式设置“this”的值:

call: 使用指定的 this 值和参数调用函数。 apply: 与 call 类似,但接受参数数组。 bind: 返回具有指定 this 值的新函数。

例如:

    const student1 = {        name: 'alice',        printname: function() {            console.log(this.name);        }    };    const student2 = {        name: 'bob'    };    // using call    student1.printname.call(student2); // outputs: bob

在这种情况下,printname中的“this”指的是student2而不是student1。

箭头函数和“this”

箭头函数的行为与传统函数不同。他们没有自己的“这个”上下文;相反,它们从封闭的词汇上下文继承“this”。这意味着箭头函数内的“this”与函数外的“this”指的是相同的值:

    const obj = {        value: 42,        getvalue: function() {            const arrowfunc = () => {                console.log(this.value);            };            arrowfunc();        }    };    obj.getvalue(); // outputs: 42

这里,箭头函数中的“this”指的是“obj”对象,演示了箭头函数如何从其封闭上下文中捕获“this”值。

dom 中的“this”

最后,在使用 dom 时,“this”可以指触发事件的 html 元素。例如:

    document.getElementById('myButton').onclick = function() {        console.log(this); // Refers to the button element    };

在这种情况下,当单击按钮时,“this”将引用按钮元素本身。

感谢您的阅读,如果您发现本指南有帮助,请与其他开发人员分享,并继续练习以巩固您对 javascript 中“this”的理解!

以上就是JavaScript 中的“this”关键字到底是什么?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1499007.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 20:57:04
下一篇 2025年12月19日 20:57:30

相关推荐

  • JavaScript 中 URL 和 URLSearchParams 的陷阱

    一切都始于一个错误 在 javascript 和 node.js 中使用 url 应该很简单,但是我们项目中最近的一个错误让我陷入了 url 和 urlsearchparams api 中微妙怪癖的兔子洞。这篇文章将探讨这些怪癖,它们如何在您的代码中引起问题,以及您可以采取哪些措施来避免它们。 问题…

    2025年12月19日
    000
  • 多任务处理和并行性|第 1 部分

    多任务和并行是计算和编程中经常使用的相关但不同的概念。这是一个明显的区别: 多任务处理 定义:多任务处理是指系统通过快速切换来看似同时处理多个任务(进程或线程)的能力。 工作原理: 任务共享相同的CPU或资源。 操作系统使用时间切片在任务之间切换,速度如此之快,以至于看起来它们正在同时运行。 示例:…

    2025年12月19日
    000
  • NodeJS模块【简单说明】

    什么是模块? 假设您的 nodejs 项目中有一个 index.js 文件,您在其中使用了五个函数。但是,其中两个函数也可能在其他文件中使用。因此,您在项目中创建了三个文件,而不是一个文件: index.jsdependency1.jsdependency2.js 这里,每个javascript文件…

    2025年12月19日
    000
  • React 开发者完整指南

    这篇文章将有助于理解开始处理项目所需的所有概念。 我们开始吧! (dom) 是 web 文档(页面)的编程接口。 以便程序可以更改文档结构、样式和内容。 dom 将文档表示为节点和对象;这样,编程语言就可以与页面交互。 组件的生命周期?分为三个主要阶段:安装阶段、更新阶段和卸载阶段。mounting…

    2025年12月19日
    000
  • 我对 use() 钩子的思考——深入探讨 React 的最新实验功能

    react 19 已经发布了,它带来了许多新功能,例如服务器组件、指令(使用客户端和使用服务器)、新钩子(例如 useoptimistic()、useformstatus() 和实验性 use()) hook,这就是我今天要讲的内容。 什么是 use() 挂钩? use() 钩子是一项新功能,可让您…

    2025年12月19日
    000
  • 即时设计如何实现复制透明PNG图片并保留透明效果?

    如何实现即时设计中复制透明png图片 即时设计是一款在线设计工具,允许用户复制带有透明背景的PNG图片。与传统的Clipboard API复制相比,即时设计中的复制方法特别之处在于保留了图片的透明效果。 即时设计复制过程 当用户选择复制一个带有透明背景的元素时,即时设计会在后台执行以下步骤: 将元素…

    2025年12月19日
    000
  • My React Journey: Day 3

    今天,我探索了编程中最重要的概念之一:函数。函数是游戏规则的改变者,因为它们使代码可重用,减少重复的需要。让我来分解一下我学到的东西: 什么是函数?函数是一个可重用代码块,旨在执行特定任务。它有两个主要方面: 声明:这是您创建或定义函数的位置。 function greet(name) { retu…

    2025年12月19日
    000
  • TypeScript项目中:import 和 require 导入模块有何区别?

    typescript 与模块化 在 TypeScript 项目中,我们可以既使用 import 来导入第三方库,也可以通过 require 来引入。这两种方式分别代表了 ES Module 和 CommonJS Module 这两种模块化方式。 在打包构建项目时,我们可以选择将代码打包为 ESM 或…

    2025年12月19日
    000
  • TypeScript项目中使用NodeJS fs模块会如何影响ESM打包?

    在 TypeScript 项目中使用 NodeJS fs 模块对打包成 ESM 模块的影响 在 TypeScript 项目中,确实可以同时使用 import 和 require 语句来引入第三方库。前者用于导入 ESM 模块,而后者用于导入 CJS 模块。两者之间的区别在于,ESM 模块采用 ES6…

    2025年12月19日
    000
  • TypeScript 与 JavaScript:哪一个更好?

    随着对现代 Web 应用程序的需求不断增长,开发人员经常发现自己在项目中在 TypeScript 和 JavaScript 之间争论。虽然两者都是前端和后端开发不可或缺的一部分,但它们的用途略有不同。但您如何决定使用哪一个呢?本博客探讨了 TypeScript 和 JavaScript 的主要区别、…

    2025年12月19日
    000
  • JavaScript 中错误和异常的区别

    https://github.com/ray-d-song 错误和异常是从实践中诞生的概念,旨在处理“可编程错误”。 错误 从代码角度来看,错误往往会被手动精确处理。 例如,fna 调用 fnb 和 fnc。两种方法都可能遇到错误,处理代码大致如下: function fna() { const {…

    2025年12月19日
    000
  • Vite和Webpack:哪个更适合我的前端项目?

    Vite 与 Webpack:替代品还是功能领先者? 在使用 Vite 创建 React + TypeScript 项目时,可以按照以下步骤实现便捷创建: 打开命令提示符或终端。执行以下命令:npm create vite@latest my-vite-app –template rea…

    2025年12月19日
    000
  • Python闭包输出差异:为何一个闭包无输出,另一个却能输出?

    闭包输出疑云:为何 python 闭包在首例中无输出,第二例却可输出? 在 python 中,闭包允许一个内部函数访问外部函数作用域内的变量,即使外部函数已经返回。然而,在某些情况下,闭包的行为却令人困惑,尤其是在输出方面。 首例问题:无输出的闭包 如下所示: 立即学习“Python免费学习笔记(深…

    2025年12月19日
    000
  • 获取知识如何让您成为更好的开发人员

    我记得我作为一名 Web 开发人员的早期时光,盯着屏幕,拼命地在无数浏览器选项卡中搜索我知道我在某处看到过的重要文档。听起来很熟悉吗?我们都去过那里。现实是,成为一名优秀的开发人员并不意味着要记住每一个语法或框架细节,而是要知道如何在需要时找到并应用正确的信息。 知识挑战 想想你上次的调试会话。与寻…

    2025年12月19日
    000
  • JavaScript 变量:理解基元和引用类型

    两种基本类型的数据存储在 javascript 中的变量中:基元 和 引用类型。了解这两种类型之间的区别对于内存管理以及调节数据的共享、存储和更改至关重要。本文深入探讨了它们之间的区别,提供了现实世界的示例,并研究了有效处理这两种类型的方法。 1.基元与引用类型 原语 最简单的数据类型称为基元。它们…

    2025年12月19日
    000
  • React 中使用 Promise 时,函数大括号的影响原理是什么?

    react promise 中加/不加函数大括号的影响原理 在 react 中,使用 promise 进行异步操作时,我们经常会遇到在函数前面加上或不加上大括号的情况。这两种写法产生不同的效果,让人迷惑。 问题:有无大括号的区别 下面展示了两种写法的对比: 正确写法(无大括号): get: () =…

    2025年12月19日
    000
  • 理解 JavaScript 数组 map() 方法

    map()简介 map() 方法创建一个新数组,其中填充了对调用数组中每个元素调用所提供函数的结果。它是一种函数式编程技术,允许您将数组的每个元素转换为新元素,从而生成新数组而不修改原始数组。 语法 let newarray = array.map(function callback(current…

    2025年12月19日
    000
  • Cypress 与 Selenium:流行测试框架的比较

    Cypress 和 Selenium 是两种最流行的 Web 应用程序测试工具。每个都有其优势和特定的用例,因此根据项目要求、团队技能和测试目标在它们之间进行选择是一个关键决策。本文探讨了 Cypress 与 Selenium 的主要区别、优点和局限性,以帮助您选择适合您的测试需求的工具。 Cypr…

    2025年12月19日
    000
  • 对象属性的点表示法与括号表示法 – 有什么区别?

    点符号 点表示法更简单且更具可读性。它在以下情况下使用: 属性名称是一个有效的标识符(仅包含字母、数字、$或_,并且不以数字开头)。您提前知道属性名称。 例如: const person = { name: ‘alice’, age: 30 };console.log(person.name); /…

    2025年12月19日
    000
  • Express or NestJS? Choosing the Best Framework for Your Backend

    随着 Express.js 和 NestJS 主导 Node.js 生态系统,在这些强大的框架之间进行选择就像解决一个复杂的难题。 虽然 Express.js 因其简单性和灵活性而长期以来一直是首选,但 NestJS 因其结构化的、受 Angular 启发的架构而迅速受到欢迎。但问题是,为您的项目选…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信