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

Question

当我在 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);
  })
}

Answer 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>

Answer 2

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

语法包

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

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

解析器

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

顶部：TextMate 解析器
底部：保姆解析器

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

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

语法/主题组合

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

1. 句法文法定义语言的规则并将它们分类为“范围”

2. 语法主题将颜色应用于这些范围

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

简而言之：不同的主题会给同一种语言涂上不同的颜色。