当前位置:首页 > 文章列表 > 文章 > 前端 > 了解 JavaScript 中的“this”关键字:完整指南

了解 JavaScript 中的“this”关键字:完整指南

来源:dev.to 2024-12-13 16:13:03 0浏览 收藏

哈喽!今天心血来潮给大家带来了《了解 JavaScript 中的“this”关键字:完整指南》,想必大家应该对文章都不陌生吧,那么阅读本文就都不会很困难,以下内容主要涉及到,若是你正在学习文章,千万别错过这篇文章~希望能帮助到你!

javascript 中的 this 关键字是该语言中最强大但经常被误解的方面之一。它的值取决于函数的调用方式而不是函数的定义位置,这使得它对于管理代码中的上下文至关重要。

在本指南中,我们将通过实际示例探讨其细微差别,并深入探讨如何使用调用、应用和绑定来显式控制它。


这的基础知识

在 javascript 中,this 指的是当前正在执行代码的对象。确定其值的规则取决于函数的调用类型:

  1. 隐式绑定:这是方法调用之前的对象。
  2. 显式绑定:可以使用调用、应用或绑定显式设置。
  3. new binding:在构造函数中,this 指的是新创建的对象。
  4. 全局/窗口绑定:如果上述规则均不适用,则默认为全局对象(浏览器中的窗口或 node.js 中的全局)。

了解 JavaScript 中的“this”关键字:完整指南


1. 隐式绑定:来自调用者的上下文

当函数作为对象的方法调用时,this 指的是点之前的对象。

const car = {
  model: "tesla",
  displaymodel: function () {
    console.log(this.model);
  }
};

car.displaymodel(); // output: "tesla"

在此示例中,this.model 指向 car 对象的 model 属性,因为 car 是调用者。


2. 显式绑定:使用call、apply、bind

当你需要精确控制this的值时,可以使用call、apply或bind。

一个。称呼

call 方法立即调用具有指定 this 值和单独参数的函数。

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "jack" };

greet.call(person, "hello", "!"); // output: "hello, jack!"

这里,调用确保 this.name 引用 person 对象的 name 属性。

b.申请

apply 方法与 call 类似,但将参数作为数组而不是单独接收。

greet.apply(person, ["hi", "."]); // output: "hi, jack."

当您要传递一组参数时,这使得 apply 特别有用。

c.绑定

bind 方法返回一个新函数,并将 this 永久设置为指定对象,允许延迟调用。

const boundgreet = greet.bind(person, "welcome");
boundgreet("?"); // output: "welcome, jack?"

通过绑定,您可以创建一个与特定上下文绑定的可重用函数。


3. new binding:用构造函数创建对象

当使用 new 关键字调用函数时,this 指的是正在创建的新对象。

function person(name) {
  this.name = name;
}

const jack = new person("jack");
console.log(jack.name); // output: "jack"

new 运算符将其设置为新创建的对象,允许您定义可重用的对象蓝图。


4. 全局/窗口绑定:后备

如果以上规则都不适用,则默认为全局对象。但是,在严格模式(“使用严格”)下,在这种情况下这是未定义的。

function showName() {
  console.log(this.name);
}

const name = "Global";
showName(); // Output: "Global" in non-strict mode

谨慎对待全局绑定,因为它可能会导致意外行为。


调用、应用和绑定总结

这是一个快速比较:

method purpose execution argument passing
call immediate invocation yes individually
apply immediate invocation yes array of arguments
bind delayed invocation (returns new function) no individually or partially

结论

掌握 this 关键字对于编写干净的、上下文感知的 javascript 代码至关重要。通过了解隐式、显式、新的和全局绑定,您可以自信地跨各种场景进行管理。调用、应用和绑定等工具提供精细控制,使您的函数灵活且可重用。

关注我:github linkedin

好了,本文到此结束,带大家了解了《了解 JavaScript 中的“this”关键字:完整指南》,希望本文对你有所帮助!关注golang学习网公众号,给大家分享更多文章知识!

版本声明
本文转载于:dev.to 如有侵犯,请联系study_golang@163.com删除
电脑使用中的视力保护:如何有效预防眼部疲劳电脑使用中的视力保护:如何有效预防眼部疲劳
上一篇
电脑使用中的视力保护:如何有效预防眼部疲劳
【延期】清越科技硅基OLED项目延期至明年年底
下一篇
【延期】清越科技硅基OLED项目延期至明年年底
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    542次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    511次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    498次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    484次学习
查看更多
AI推荐
  • AI边界平台:智能对话、写作、画图,一站式解决方案
    边界AI平台
    探索AI边界平台,领先的智能AI对话、写作与画图生成工具。高效便捷,满足多样化需求。立即体验!
    418次使用
  • 讯飞AI大学堂免费AI认证证书:大模型工程师认证,提升您的职场竞争力
    免费AI认证证书
    科大讯飞AI大学堂推出免费大模型工程师认证,助力您掌握AI技能,提升职场竞争力。体系化学习,实战项目,权威认证,助您成为企业级大模型应用人才。
    424次使用
  • 茅茅虫AIGC检测:精准识别AI生成内容,保障学术诚信
    茅茅虫AIGC检测
    茅茅虫AIGC检测,湖南茅茅虫科技有限公司倾力打造,运用NLP技术精准识别AI生成文本,提供论文、专著等学术文本的AIGC检测服务。支持多种格式,生成可视化报告,保障您的学术诚信和内容质量。
    561次使用
  • 赛林匹克平台:科技赛事聚合,赋能AI、算力、量子计算创新
    赛林匹克平台(Challympics)
    探索赛林匹克平台Challympics,一个聚焦人工智能、算力算法、量子计算等前沿技术的赛事聚合平台。连接产学研用,助力科技创新与产业升级。
    662次使用
  • SEO  笔格AIPPT:AI智能PPT制作,免费生成,高效演示
    笔格AIPPT
    SEO 笔格AIPPT是135编辑器推出的AI智能PPT制作平台,依托DeepSeek大模型,实现智能大纲生成、一键PPT生成、AI文字优化、图像生成等功能。免费试用,提升PPT制作效率,适用于商务演示、教育培训等多种场景。
    570次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码