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)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
在 Nodejs 中进行身份验证的正确方法 [uide]
上一篇 2025年12月19日 20:57:04
TIL 如何使用 JS 查看 GitLab 上的整个提交列
下一篇 2025年12月19日 20:57:30

相关推荐

  • 利用CSS Grid实现复杂嵌套结构水平重排

    本文详细介绍了如何将一个包含主方块和两个底部小方块的嵌套结构,通过CSS Grid布局实现水平重排,使小方块垂直堆叠在主方块的旁边。教程对比了Flexbox在处理此类二维布局时的局限性,并深入讲解了CSS Grid的`grid-template-columns`、`grid-template-row…

    2026年5月10日
    000
  • Golang如何使用 time.Ticker 定时执行任务_Golang Ticker 定时任务实现方法

    time.Ticker用于周期性定时任务,通过NewTicker创建并监听其通道C执行操作,需调用Stop()防止资源泄漏;可结合for循环控制执行次数或使用select与channel实现优雅退出,适用于监控、心跳等场景。 在 Golang 中,time.Ticker 是实现周期性定时任务的常用方…

    2026年5月10日
    000
  • c++中静态链接和动态链接的区别_c++程序链接方式对比分析

    静态链接将库代码复制到可执行文件中,独立运行且性能高,但体积大、维护难;动态链接在运行时加载共享库,节省资源、便于更新,但依赖环境且有轻微开销。 在C++程序开发中,链接是将编译生成的目标文件与所需的库函数合并成可执行文件的关键步骤。根据库的使用方式不同,链接可分为静态链接和动态链接两种主要形式。它…

    2026年5月10日
    000
  • PHP Memcache 精准缓存项管理:删除与更新策略

    本文旨在提供一套在PHP中使用Memcache精准管理缓存项的教程。我们将探讨如何通过`Memcache::delete()`配合`Memcache::add()`或`Memcache::set()`方法来清除并更新特定缓存项,而非执行全量刷新。文章将详细阐述`add()`与`set()`之间的关键…

    2026年5月10日
    100
  • Go语言错误处理:获取、传递与安全类型断言实践指南

    本教程深入探讨go语言中获取和处理错误信息的最佳实践。我们将学习如何使用`errors`包创建和返回错误,理解`panic`和`recover`机制的适用场景(及其局限性),并重点介绍如何通过“逗号,ok”惯用法安全地进行类型断言,从而避免运行时恐慌,构建健壮的go应用程序。 Go语言在错误处理方面…

    2026年5月10日
    000
  • python如何判断一个字符串是否全是数字_python isdigit()等方法判断字符串是否为纯数字

    判断字符串是否为纯数字可通过isdigit()、isnumeric()、isdecimal()和正则表达式实现;其中isdigit()适用于ASCII数字,isnumeric()支持更广的数字类型,isdecimal()仅限十进制,正则^d+$可灵活匹配但性能较低;含符号或小数可用float()转换…

    2026年5月10日
    100
  • C++ multiset容器 允许重复元素集合

    C++ multiset与set的核心区别在于multiset允许重复元素而set不允许,multiset适用于需自动排序且容纳重复值的场景,如统计频次或维护有序序列。 C++ std::multiset 容器是一个有序集合,它允许你存储重复的元素。它本质上是一个关联容器,所有元素都会根据其值自动排…

    2026年5月10日
    000
  • Express.js 应用中跨模块共享与修改全局数组的教程

    在Express.js应用中,当需要在主应用文件与独立的路由模块之间共享并修改一个全局数组时,`app.locals`提供了一种简洁有效的解决方案。本文将详细介绍如何利用`app.locals`在`index.js`中定义一个数组,并在路由处理函数(如`module.js`)中安全地访问和更新该数组…

    2026年5月10日
    100
  • c++ static关键字有什么作用_c++中static的作用与使用场景详解

    静态局部变量在函数内声明,生命周期贯穿程序运行始终,仅初始化一次且作用域限于函数内,适用于记录调用次数或缓存结果,如static int count = 0;使count值在多次调用间保持递增。 在C++中,static关键字具有多种用途,根据上下文不同,其作用也有所区别。它主要用于控制变量或函数的…

    2026年5月10日
    000
  • Golang值类型传递与指针传递比较

    Go语言中函数参数传递分为值传递和指针传递。值传递复制变量副本,函数内修改不影响原值,适用于小型数据类型如int、string等;示例中modifyValue函数对参数x的修改未影响外部变量a。指针传递通过传递地址实现共享内存,可修改原始数据,适合大型结构体或需变更原值场景;示例中modifyPoi…

    2026年5月10日
    000
  • 股票对比特币的投资价值是真的吗?股票与比特币之争原因分析

    股票与比特币投资价值之争源于属性差异:股票依托企业盈利和现金流,具备稳定分红与监管保障,适合长期投资;比特币则依赖去中心化、稀缺性及市场共识,价格波动剧烈,缺乏内在价值支撑,监管风险高,更多被视作投机性资产或数字黄金。两者在风险特征、功能定位和市场成熟度上存在根本区别。 Binance币安 欧易OK…

    2026年5月10日
    000
  • Go 语言中的泛型:概念、影响与演进

    泛型是一种允许在编译时使用类型参数编写代码的编程范式,它使得函数或数据结构能够处理多种数据类型,从而实现代码复用和类型安全。在静态类型语言中,泛型的缺失曾导致大量重复代码,开发者不得不为不同类型的数据集合编写功能相同的函数。go 1.18版本引入泛型后,有效解决了这一痛点,显著提升了代码的灵活性和可…

    2026年5月10日
    000
  • JavaScript中模拟点击事件触发DOM元素的onclick功能

    本教程详细阐述了如何在JavaScript中通过编程方式触发HTML元素的点击事件,以激活其关联的`onclick`功能或其他事件监听器。我们将介绍使用`element.click()`方法的最佳实践,并探讨其与直接调用`onclick`函数之间的区别,同时提供示例代码和注意事项,帮助开发者实现页面…

    2026年5月10日
    000
  • setTimeout与异步执行的关系

    setTimeout与异步执行的关系setTimeout与异步执行的关系setTimeout与异步执行的关系setTimeout与异步执行的关系

    settimeout是理解javascript异步编程的关键,因为它揭示了单线程环境下任务调度的机制。1. settimeout将任务放入宏任务队列,等待调用栈清空后执行,避免阻塞当前代码;2. settimeout(…, 0)用于延迟到下一个事件循环执行,而promise.resolv…

    2026年5月10日 用户投稿
    000
  • 深入理解Go语言接口赋值:数据复制机制解析

    go语言中,将具体值赋给接口变量时,通常会发生数据复制,而非简单地传递原始数据的引用。本文将通过示例代码深入探讨这一机制,解释值类型和指针类型在接口赋值时的不同行为,并揭示接口底层如何处理数据,帮助开发者正确理解和利用go接口的强大功能,避免常见的误解。 Go接口基础回顾 在Go语言中,接口(Int…

    2026年5月10日
    000
  • C++ char*与string如何相互转换_C++字符串类型转换完整指南

    答案:char与std::string转换需注意内存管理;char转string可用构造函数,string转char*用c_str()获取只读指针,避免悬空指针与内存泄漏。 在C++开发中,char* 和 std::string 是处理字符串最常用的两种方式。虽然它们都能表示字符串数据,但底层机制和…

    2026年5月10日
    000
  • js怎么获取元素的样式值

    想获取元素的最终计算样式应使用window.getcomputedstyle(),因为它能返回元素所有来源样式的计算值;2. 若仅需读取或设置内联样式,可直接使用element.style;3. getcomputedstyle返回的是浏览器渲染后的绝对值,如相对单位会转为px,颜色转为rgb格式;…

    2026年5月10日
    000
  • WPF中的用户控件如何创建与使用?

    WPF用户控件是UI与逻辑的封装单元,通过继承UserControl将常用界面元素组合复用;创建时添加.xaml和.xaml.cs文件,在XAML中定义界面布局,后台代码中定义依赖属性(如ButtonText、ButtonCommand)以支持数据绑定和命令传递;使用时在父窗体引入命名空间后直接实例…

    2026年5月10日
    000
  • python中有哪些比较操作

    Python中的比较操作用于判断值间关系,返回True或False。1. ==和!=比较值是否相等或不等;2. =比较数值或字典序大小;3. is和is not检查对象是否同一内存地址;4. in和not in判断成员是否存在序列中,常与逻辑运算符组合使用,需注意==与is及in的适用场景差异。 P…

    2026年5月10日
    000
  • 区块链比特币以太坊是什么关系大白话讲解

    很多人对区块链、比特币和以太坊感到困惑,觉得它们是同一个东西。其实,它们三者的关系就像操作系统、第一款软件和应用商店的关系一样。本文将用最简单的大白话,帮你彻底理清它们之间的区别与联系。 一、区块链:一本公开的、不可篡改的“公共账本” 1、想象一下,村里有个公共账本,任何人记账都必须大声喊出来,全村…

    2026年5月10日
    100

发表回复

登录后才能评论
关注微信