JavaScript中onclick触发函数无法访问全局对象报ReferenceError原因求解

你遇到的报错本质是userData的初始化流程被内部异常打断，导致变量始终处于暂时性死区（TDZ） 无法访问，和第一个示例的差异核心是初始化是否正常完成，具体原因拆解如下：

1. 第一个示例正常的原因 #

第一个示例中obj的初始化没有任何异常：用const声明后立刻完成了对象赋值，执行myFunction时obj已经脱离暂时性死区、是合法的已初始化变量，所以访问不会报错。 #

2. 你的代码报错的根因 #

你在初始化userData对象的时候，内部调用generateUserhandle直接抛出了未捕获的异常，导致const userData = ...的赋值流程中断，userData始终停留在暂时性死区，后续任何访问（包括postMessage里的console.log(userData)）都会抛出ReferenceError。
初始化失败的具体原因有两个：

• 传参错误：对象字面量初始化时，this不会指向当前正在创建的userData对象，全局作用域下的this没有username属性，你给generateUserhandle传的参数实际是undefined
• 函数内部空指针异常：generateUserhandle的形参拿到了undefined，执行userData.username.split(" ")的时候相当于读取undefined.username，直接抛出异常，打断了userData的初始化流程

额外的隐性错误 #

你写的generateUserhandle还有两处逻辑错误：

• forEach遍历调用toLowerCase不会修改原数组，因为字符串是不可变类型，toLowerCase会返回新字符串，原数组元素不会变化，需要改成map或者主动赋值
• 你给generateUserhandle的形参取名为userData，和全局变量重名，会在函数内部屏蔽全局变量，增加debug难度

修复方案参考 #

// 先声明工具函数
function generateUserhandle(username) {
  // 直接处理传入的用户名字符串，用map转小写
  const usernameArr = username.split(" ").map(element => element.toLowerCase());
  return "@" + usernameArr.join("");
}

const username = 'Chinmay Ghule';
// 先处理好userhandle再初始化对象，避免初始化过程出异常
const userData = {
  username: username,
  userhandle: generateUserhandle(username),
  userPostCount: 0
};

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