[英]'this' Keyword not working not working in Atom
When I type the following code in Atom the this
keyword is not seen as a keyword but rather just a regular word.当我在 Atom 中键入以下代码时,
this
关键字不被视为关键字,而只是一个常规词。
However, if I use the chrome dev tools it is shown as a keyword.但是,如果我使用 chrome 开发工具,它会显示为关键字。 I don't think it's a syntax error
我不认为这是语法错误
Would anyone have an idea on what to do about it and if not which other text editor could I use.有没有人知道该怎么做,如果没有,我可以使用哪个其他文本编辑器。
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);
})
}
It's working fine, there is no such style as "white" "White" is a value, not a property.它工作正常,没有“白色”这样的样式,“白色”是一个值,而不是一个属性。 Try
console.log(this.style)
试试
console.log(this.style)
PS聚苯乙烯
numberOfDrumButtons
should contain the list of elements, not length, so you can avoid querying multiple times. 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>
There are several reasons why the coloring might differ from your expectations:颜色可能与您的预期不同的原因有多种:
There are several syntax grammars for JavaScript. JavaScript 有多种语法语法。 Besides the built-in
language-javascript
, there's the popular third-party package language-babel
which is more specific than the former and supports ESNext, JSX, GraphQL and several frameworks such as React or Etch.除了内置的
language-javascript
,还有流行的第三方包language-babel
,它比前者更具体,支持 ESNext、JSX、GraphQL 和几个框架,如 React 或 Etch。
Top: language-javascript
顶部:
language-javascript
Bottom: language-babel
底部:
language-babel
Around 2018, Atom introduced an alternative to the default parser it borrowed from TextMate: tree-sitter . 2018 年左右,Atom 引入了一种替代它从 TextMate 借来的默认解析器的替代方案: tree-sitter 。 Switching between these usually results in a differently looking syntax:
在这些之间切换通常会导致外观不同的语法:
Top: TextMate parser顶部:TextMate 解析器
Bottom: Tree-sitter parser底部:保姆解析器
While you might find the result of the old TextMate parser more pleasing and/or functional, it should be noted that Tree-sitter is significantly faster!虽然您可能会发现旧 TextMate 解析器的结果更令人愉悦和/或更实用,但应该注意的是 Tree-sitter 明显更快! It's probably best to find a combination of tree-sitter and syntax grammar that suits you.
最好找到适合您的 tree-sitter 和语法语法的组合。
You can toggle the used parser in the core settings.您可以在核心设置中切换使用的解析器。
Lastly, the coloring of the syntax is always determined by two factors:最后,语法的颜色总是由两个因素决定:
the syntax grammar defines the rules for a language and categorizes them into "scopes"句法文法定义语言的规则并将它们分类为“范围”
the syntax theme applies colors to these scopes语法主题将颜色应用于这些范围
Not every syntax theme supports all rules provided by the grammar.并非每个语法主题都支持语法提供的所有规则。 A grammar might also be more specific than the syntax theme.
语法也可能比语法主题更具体。
In short: different themes will color the same language differently.简而言之:不同的主题会给同一种语言涂上不同的颜色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.