首页 > 编程语言 >[JavaScript] this 关键字

[JavaScript] this 关键字

时间:2024-10-03 22:00:31浏览次数:5  
标签:const name JavaScript Alice greet 关键字 Hello log

全局作用域

在浏览器中,如果在全局作用域下使用 this,它将指向 window 对象;在 Node.js 环境中,则指向 global 对象。

方法调用

当一个函数作为对象的方法被调用时,this 会指向该对象。

const obj = {
  name: "Alice",
  greet: function () {
    console.log(`Hello, ${this.name}`);
  }
};
obj.greet(); // Hello, Alice

构造函数

使用 new 关键字调用函数创建新实例时,this 会指向新创建的对象。

function Person(name) {
  this.name = name;
}
const alice = new Person("Alice");
console.log(alice.name); // Alice

箭头函数

箭头函数没有自己的 this 绑定,它会从父作用域继承 this 值。

const obj = {
  name: "Alice",
  greet: () => {
    console.log(`Hello, ${this.name}`); // undefined, 因为箭头函数的 this 指向全局对象
  }
};
obj.greet();

绑定方法

.call(), .apply(), .bind() 这些方法可以显式地设置函数执行时 this 的值

const person = {
  name: "Alice"
};

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

greet.call(person); // Hello, Alice

总结

this 关键字的值取决于函数如何被调用,而不是如何被定义。掌握 this 的行为可以帮助你更好地控制代码中的上下文,并避免常见的陷阱。

标签:const,name,JavaScript,Alice,greet,关键字,Hello,log
From: https://www.cnblogs.com/Himmelbleu/p/18446068

相关文章

  • 从 JavaScript 到 OCaml:浅浅浅总结一下函数式编程
    背景这几天突击了一下Cornell的cs3110;抽了两个下午刷完了Chapter3,4,5的课后习题,很有感触。结合自己浅薄的函数式编程理解和贫瘠的JavaScript/TypeScript开发经历,总结一下自己第一阶段的函数式编程学习经历。......
  • 盘点五大热门JavaScript图表库,助你高效开发!
    1、Chart.jsChart.js是一个简单、灵活的图表库,支持8种图表类型(如折线图、柱状图、饼图等)。它使用HTML5Canvas元素来渲染图表,并且有良好的文档和社区支持。使用方法:npminstallchart.jsvue-chartjs然后在你的Vue组件中使用:<template><div><line-chart:data......
  • 掌握防抖与节流:如何用JavaScript封装通用函数
    在日常前端开发中,我们经常会遇到一些频繁触发的事件,如窗口调整大小、滚动条滚动、输入框输入等。为了提高页面性能和用户体验,我们需要对这些事件进行优化。本文将介绍如何使用JavaScript封装通用的防抖和节流函数。一、什么是防抖(Debounce)和节流(Throttle)?防抖(Debounce):当持续......
  • 总结28个令人惊艳的JavaScript单行代码
    1.阶乘计算使用递归函数计算给定数字的阶乘。12constfactorial=n=>n===0?1:n*factorial(n-1);console.log(factorial(5));//输出120 2.判断一个变量是否为对象类型1constisObject=variable===Object(variable);......
  • JavaScript-快速语法参考-全-
    JavaScript快速语法参考(全)原文:JavaScriptQuickSyntaxReference协议:CCBY-NC-SA4.0一、使用JavaScript要开始试验JavaScript,您应该安装一个支持这种语言的集成开发环境(IDE)。有很多不错的选择,比如NetBeans、Eclipse、VisualStudio、括号。在本书中,我们将使用NetBe......
  • JavaScript-正则表达式入门指南-全-
    JavaScript正则表达式入门指南(全)原文:IntroducingRegularExpressions协议:CCBY-NC-SA4.0一、正则表达式简介为了开始介绍正则表达式,我将从一个例子开始。这是一个你已经经历了几百次的问题。当您在线输入客户数据时,许多web表单会要求您提供电子邮件地址。为了避免输入......
  • C++(关键字)
    5.作用域限定符::5.1名字空间(掌握)名字空间是一种代码的层级划分。#include<iostream>usingnamespacestd;//C++课程中几乎所有的类型(不包括基本数据类型)都在std中inta=1;//新建一个名字空间namespacemy_space{inta=3;strings="哈哈......
  • JavaScript笔记
    基操数据类型原始类型对象类型MapandSet流程控制函数及面向对象函数方法常用内部对象面向对象编程(OOP)操作BOM元素操作DOM元素(I)操作表单jQuery基操js作为一种脚本语言,可以嵌入到HTML页面中js是双标签,可以写多行,也可以写一行内部标签<script>......
  • C++ 语言特性04 - decltype关键字
    一:概述        decltype是C++11引入的一个关键字,用于查询表达式的类型,而不对表达式进行求值。它的主要作用是在编译时确定变量或表达式的类型,非常适合在模板编程和泛型编程中使用。二:使用场景    1.获取变量的类型intx=10;decltype(x)y=20;//......
  • 教你如何免费获取股票数据用python、JavaScript (Node.js)、JAVA等多种语言的实例代码
    ​近一两年来,股票量化分析逐渐受到广泛关注。而作为这一领域的初学者,首先需要面对的挑战就是如何获取全面且准确的股票数据。因为无论是实时交易数据、历史交易记录、财务数据还是基本面信息,这些数据都是我们进行量化分析时不可或缺的宝贵资源。我们的核心任务是从这些数据......