前端调用Blockchain类报错：Cannot access 'Blockchain' before initialization

我在JavaScript中创建了Blockchain类，该类包含接收object类型参数data的addBlock()方法。点击提交按钮时触发错误：Cannot access 'Blockchain' before initialization at btnMineBlock。

这段代码在无前端环境下运行正常，但通过前端点击调用时出现问题。

点击事件函数代码 #

function btnMineBlock() {
    const blockchain = new Blockchain();
    const btnData = document.getElementById('dataBlock1').value;
    blockchain.addBlock({data:btnData});
    console.log(btnData);

    
console.log(blockchain);
}

HTML代码 #

<div class="block">
    <p id="timestamp">
        Timestamp:
    </p>
    <p id="data">
        Data:
    </p>
    <p id="nonce">
        Nonce:
    </p>
    <p id="hash">
        Hash:
    </p>
    <p id="prevHash">
        prevHash:
    </p>
    <input type="text" id="dataBlock1">
    <button type="submit" id="btn" onclick="btnMineBlock()">Mine Block</button>
</div>

Blockchain类代码 #

class Blockchain {
    constructor() {
        this.chain = [Block.genesis()];
    }
    addBlock({ data }) {
        const newBlock = Block.mineBlock({
            prevBlock: this.chain[this.chain.length - 1],
            data,
        })
        this.chain.push(newBlock);
    }
}

注：所有从其他文件导入的函数在调用btnMineBlock()之前都能正常运行。

• 调整代码定义顺序
  类声明存在变量提升，但处于暂时性死区，初始化前无法访问。确保Blockchain类的代码在btnMineBlock函数之前定义或加载，避免函数执行时类还未完成初始化。

• 替换内联点击事件为事件监听
  内联onclick在全局作用域执行，容易出现作用域匹配问题。移除HTML中的onclick属性，改用JavaScript绑定事件：

  // 等待DOM加载完成后绑定事件
  document.addEventListener('DOMContentLoaded', () => {
      document.getElementById('btn').addEventListener('click', btnMineBlock);
  });
  

  这段代码要放在Blockchain类和btnMineBlock函数之后执行。

• 检查模块导入顺序（若使用ES模块）
  若Blockchain类来自外部模块，确保导入语句在btnMineBlock函数之前执行：

  import { Blockchain } from './blockchain.js';
  
  function btnMineBlock() {
      // ...原有逻辑
  }
  

• 修正区块链实例创建逻辑
  当前每次点击都会新建Blockchain实例，不符合区块链维护单一链的核心逻辑。把实例移到函数外部：

  // 在全局/模块作用域创建唯一实例
  const blockchain = new Blockchain();
  
  function btnMineBlock() {
      const btnData = document.getElementById('dataBlock1').value;
      blockchain.addBlock({data:btnData});
      console.log(btnData);
      console.log(blockchain);
  }
  

内容的提问来源于stack exchange，提问作者krish