使用JavaScript创建SimpleImage报错：Uncaught ReferenceError未定义

API 探路者

2026-5-15

解决Uncaught ReferenceError: SimpleImage is not defined错误

嘿，这个问题我见过不少——别担心，其实原因很简单！

为什么会出现这个错误？

SimpleImage不是JavaScript原生自带的对象，它是专门用于编程教学（比如Coursera的入门编程课、Codecademy的图像处理练习）的自定义工具类。浏览器默认根本不知道它是什么，所以才会抛出“未定义”的错误。

怎么解决？

1. 先加载包含SimpleImage的脚本

如果你是在本地写HTML测试，必须先引入提供SimpleImage类的JS文件：

<!-- 把这行放在你的代码脚本之前，确保路径正确 -->
<script src="SimpleImage.js"></script>

如果是在教学平台上遇到这个问题，大概率是平台的脚本加载出了问题，刷新页面或者检查平台的环境设置就行。

2. 修正代码里的小细节

你的代码还有几个小问题，顺便帮你调整了：

变量w后面少了分号，虽然JS能自动补全，但养成加标点的习惯能避免奇怪的bug
变量x、y没有声明，会变成全局变量，最好加上var/let
浏览器原生没有print(img)方法，教学环境里的print是自定义的图像显示函数，本地测试的话可以用Canvas来渲染

修正后的完整代码示例：

<script src="SimpleImage.js"></script>
<!-- 加一个Canvas用于显示图像 -->
<canvas id="imageCanvas" width="200" height="200"></canvas>

<script>
  var img = new SimpleImage(200, 200);
  var w = img.getWidth(); // 补上分号，提前声明宽度变量
  for (var p of img.values()){
    var x = p.getX();
    var y = p.getY();
    
    if (x > y){
      p.setRed(255);
    }
    if (x + y > w) {
      p.setRed(255);
    }
    if (x > 20){
      p.setRed(255);
    }
  }
  
  // 本地环境用Canvas渲染图像（替代教学平台的print）
  var canvas = document.getElementById('imageCanvas');
  img.drawTo(canvas);
</script>