'this' 关键字不起作用在 Atom 中不起作用答案

【问题标题】：'this' Keyword not working not working in Atom'this' 关键字不起作用在 Atom 中不起作用
【发布时间】：2021-11-01 21:26:31
【问题描述】：

当我在 Atom 中键入以下代码时，this 关键字不被视为关键字，而只是一个常规单词。

但是，如果我使用 chrome 开发工具，它会显示为关键字。我不认为这是语法错误

有没有人知道如何处理它，如果没有，我可以使用哪个其他文本编辑器。

var numberOfDrumButtons = document.querySelectorAll(".drum").length;

for (var i = 0; i < numberOfDrumButtons; i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", function() {
    console.log(this.style.white);
  })
}

【问题讨论】：

要将答案标记为已接受，请单击答案旁边的复选标记以将其从灰色切换为已填充。

标签： javascript atom-editor

【解决方案1】：

它工作正常，没有“白色”这样的样式“白色”是一个值，而不是一个属性。试试console.log(this.style)

附言

numberOfDrumButtons 应该包含元素列表，而不是长度，这样可以避免多次查询。

var numberOfDrumButtons = document.querySelectorAll(".drum");

for (var i = 0; i < numberOfDrumButtons.length; i++) {
  numberOfDrumButtons[i].addEventListener("click", function() {
    console.log(this.style.color);
  })
}

<div class="drum" style="color: red">drum</div>
<div class="drum" style="color: green">drum</div>
<div class="drum" style="color: blue">drum</div>
<div class="drum">drum</div>

【讨论】：

很酷，感谢您的帮助，我最终切换到 VS 代码，它运行良好

【解决方案2】：

颜色可能与您的预期不同的原因有多种：

语法包

JavaScript 有多种语法语法。除了内置的language-javascript，还有流行的第三方包language-babel，比前者更具体，支持ESNext、JSX、GraphQL以及React、Etch等多种框架。

顶部：language-javascript
底部：language-babel

解析器

在 2018 年左右，Atom 引入了它从 TextMate 借来的默认解析器的替代方案：tree-sitter。在这些之间切换通常会导致看起来不同的语法：

顶部：TextMate 解析器
底部：Tree-sitter 解析器

虽然您可能会发现旧 TextMate 解析器的结果更令人愉悦和/或更实用，但应该注意的是，Tree-sitter 的速度要快得多！最好找到适合您的 tree-sitter 和语法语法的组合。

您可以在核心设置中切换使用的解析器。

语法/主题组合

最后，语法的颜色总是由两个因素决定：

语法语法定义了一种语言的规则并将它们分类到“范围”中
语法主题将颜色应用于这些范围

并非每个语法主题都支持语法提供的所有规则。语法也可能比语法主题更具体。

简而言之：不同的主题会对同一种语言进行不同的着色。

【讨论】：

酷我一定会安装语言babel包。