JS对象初始化时访问自身属性报错，求解决方案及原理解析

错误根源 #

错误出在代码第5行：y: canvas.height-mario.h。在创建mario对象的过程中，你试图访问还未完成初始化的mario变量，而let声明的变量存在暂时性死区（TDZ），在变量完成初始化前无法被访问，因此抛出ReferenceError。

修复方案 #

提供两种可行的修复方式：

方式一：提前提取属性值 #

先单独定义高度变量，再在对象中复用该变量：

const marioHeight = 40;
let mario = {
    x: 20,
    w: 20,
    h: marioHeight, 
    y: canvas.height - marioHeight, 
    speedX: 0,
    speedY: 10,
    dx: 4,
    dy: -7,
    color: "black",
    canJump: true,
    onGround: true,
}

export default mario

方式二：初始化后补设属性 #

先完成对象初始化，再单独设置y属性：

let mario = {
    x: 20,
    w: 20,
    h: 40, 
    speedX: 0,
    speedY: 10,
    dx: 4,
    dy: -7,
    color: "black",
    canJump: true,
    onGround: true,
}

mario.y = canvas.height - mario.h;

export default mario

技术原理详解 #

• 暂时性死区（Temporal Dead Zone, TDZ）：使用let/const声明的变量，从当前作用域起始位置到变量完成赋值的这段区间，变量处于不可访问的状态。
• 对象字面量的属性计算是在变量赋值完成前执行的，此时mario还处于TDZ中，无法被引用。如果用var声明变量不会触发这个错误（因为var存在变量提升），但var的变量提升会带来其他潜在问题，不推荐使用。

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