如何在HTML中通过window.onload调用JS中Dog和Cat的speak方法

没问题，你找对方向啦！window.onload确实是确保页面资源全部加载完成后再执行JS代码的可靠方式，能避免因为外部JS文件没加载完或者DOM未就绪而出错。下面一步步帮你实现：

首先，先确认你的Ej6.js文件里已经正确定义了Dog和Cat类，比如常见的写法是这样：

// Ej6.js
class Dog {
  speak() {
    // 两种实现方式：直接控制台输出，或者返回字符串用于页面展示
    console.log("Woof!");
    // return "Woof!";
  }
}

class Cat {
  speak() {
    console.log("Meow!");
    // return "Meow!";
  }
}

接下来，你只需要在window.onload的回调函数里实例化类对象，然后调用它们的speak方法即可。如果想把结果展示在页面上，还可以添加DOM元素来显示内容。修改后的完整HTML代码如下：

<!DOCTYPE html>
<html>
<head>
  <script src="Ej6.js"></script>
  <script>
    window.onload = function() {
      // 第一步：创建Dog和Cat的实例对象
      const myDog = new Dog();
      const myCat = new Cat();

      // 第二步：调用speak方法
      myDog.speak(); // 控制台会输出"Woof!"
      myCat.speak(); // 控制台会输出"Meow!"

      // 如果你的speak方法是返回字符串，还可以把结果展示在页面上
      // 示例（需要把Ej6.js里的speak改成返回字符串）：
      // const dogSound = myDog.speak();
      // const catSound = myCat.speak();
      // document.body.innerHTML = `<p>狗狗：${dogSound}</p><p>猫咪：${catSound}</p>`;
    }
  </script>
</head>
<body>
</body>
</html>

关键说明 #

• window.onload的作用是等待整个页面（包括外部JS、图片等所有资源）加载完成后再执行内部代码，这样能保证Ej6.js里的Dog和Cat类已经被正确加载，不会出现“类未定义”的报错。
• 必须先通过new Dog()、new Cat()创建类的实例，才能调用类的实例方法speak——这是类的基本使用规则哦。

如果你的speak方法逻辑有其他写法（比如需要传参数），只需要在调用时对应传入参数即可，比如myDog.speak("loud")。

内容的提问来源于stack exchange，提问作者M.K