通过变量访问对象报错：Cannot read property 'TeamspeakControl' of undefined

这个问题我太熟了！你遇到的报错核心原因就是异步请求的执行时序问题，咱们一步步拆解来看：

为什么会报错？ #

你用$.get请求语言数据的代码是异步的——浏览器会先发送这个请求，但不会等着它返回结果，而是继续执行后面的代码。这就导致你在尝试访问lang["TeamspeakControl"]的时候，$.get的回调函数还没执行，lang还是你一开始定义的空对象Object()，自然就会抛出"Cannot read property... of undefined"的错误。

而你直接定义lang对象的场景能正常运行，是因为那是同步代码——lang在执行DOM操作前已经被完整赋值了，时序完全没问题。

怎么解决？ #

有几种靠谱的方案，你可以根据自己的场景选：

方案1：把DOM操作放到异步回调里 #

这是最直接的办法，确保只有当语言数据加载完成后，再去操作DOM元素：

var lang = {};
$.get('lang', function(data) {
    lang = data;
    // 数据到手了，再处理DOM
    $('lang').each(function() {
        var label = $(this).attr('label');
        console.log(lang[label]);
        $(this).html(lang[label]);
    });
});

方案2：用async/await让代码更易读 #

如果你的运行环境支持ES6+语法，用async/await可以把异步代码写得像同步代码一样清晰：

async function loadAndRenderLang() {
    try {
        // 等待请求完成，拿到lang数据
        const lang = await $.get('lang');
        // 再处理DOM
        $('lang').each(function() {
            var label = $(this).attr('label');
            console.log(lang[label]);
            $(this).html(lang[label]);
        });
    } catch (err) {
        console.error('加载语言文件出错了:', err);
    }
}

// 调用函数
loadAndRenderLang();

可选优化：添加加载状态 #

为了提升用户体验，可以先给<lang>元素设置一个加载中的提示，等数据回来再替换：

<lang label="TeamspeakControl">加载中...</lang>

额外提醒 #

如果你的后端返回的是JSON字符串而不是直接的JS对象，记得在回调里先解析：lang = JSON.parse(data)——不过通常jQuery的$.get会自动识别响应的Content-Type，如果是application/json的话会帮你自动解析，这一步可以省掉。

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