jquery-3.5.1.js：4055 未捕获的引用错误：初始化前无法访问"connectFour"

Question

我试图在jQuery中console.log('hi') which is passed using a function inside the$(document).ready() '。问题是Chrome中的控制台显示以下错误:

jquery-3.5.1.js:4055 Uncaught Reference Error: Cannot access connect Four before initialization at HTML Document
(grid.html:26)
at might Throw (jquery-3.5.1.js:3762)
at process (jquery-3.5.1.js:3830)

<script>
class connectFour {
constructor(selector) {
console.log(selector);
}
}
</script>
<div id="htmlConnectFour"></div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
const connectFour = new connectFour('hi');
});
</script>

Answer 1

问题在于您给变量赋予了与类相同的名称。

注意，根据标准的JS命名约定，类应该有大写的pascal大小写。变量应该是小写的。遵循这些规则可以避免以下问题:

class ConnectFour {
constructor(selector) {
console.log(selector);
}
}
$(document).ready(function() {
const connectFour = new ConnectFour('hi');
});

<div id="htmlConnectFour"></div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>