代码定义的square常量控制台显示undefined且类型识别异常问题咨询

首先看你提供的基础代码：

class Rectangle {
  constructor(height, length) {
    this.height = height;
    this.length = length;
  }
  area() {
    return this.height * this.length;
  }
}

const square = new Rectangle(10, 10);

console.log(square);
console.log(square.area());

1. 控制台提示square为undefined的原因 #

最常见的是作用域隔离问题：

• 若脚本标签添加了type="module"，模块的顶层变量不会挂载到全局window对象，控制台默认在全局上下文，直接输入square会因找不到变量返回undefined。
• 代码被包裹在块级作用域（如if语句、IIFE）或函数内部时，square属于局部变量，全局上下文无法访问。
• 脚本执行顺序异常：如果脚本在依赖环境未就绪时提前执行，可能导致代码未完整运行，square未被定义。

2. 控制台未识别square为Rectangle实例的原因 #

结合第一个问题的场景，常见原因有：

• 若square本身是undefined，控制台自然无法识别其类归属；
• 代码被误转译为ES5兼容代码时，ES6类会被转换为普通构造函数，实例的原型链标识丢失，控制台会显示为通用Object；
• 类定义被意外覆盖：如果代码后续有Rectangle = Object这类操作，会导致实例原型指向错误，无法被识别为Rectangle实例。

3. 日常排查此类问题的方法 #

• 检查脚本加载属性：查看HTML中的<script>标签是否带有type="module"，若是，可将需控制台访问的变量手动挂载到全局：window.square = square；
• 确认作用域范围：检查代码是否被包裹在函数、IIFE或块级作用域内，必要时调整变量作用域，或在作用域内直接打印变量验证；
• 验证代码执行状态：在代码末尾添加console.log('代码执行完毕', square)，确认代码是否完整执行，以及square在代码内部的实际状态；
• 检查原型链关系：在代码中执行console.log(square instanceof Rectangle)和console.log(Object.getPrototypeOf(square))，确认实例与类的原型关联是否正常；
• 排除环境干扰：禁用浏览器所有扩展，避免扩展脚本干扰代码执行；切换到隐私模式测试，排除缓存或配置问题；
• 直接在控制台运行代码：将代码片段复制到浏览器控制台执行，判断是代码本身问题还是加载/环境问题。

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