'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. 語法主題將顏色應用於這些范圍

並非每個語法主題都支持語法提供的所有規則。 語法也可能比語法主題更具體。

簡而言之：不同的主題會給同一種語言塗上不同的顏色。