访问JavaScript对象属性频繁返回undefined问题排查求助

问题场景 #

调用load方法时，控制台打印tmp能看到current属性，但代码中tmp['current']却经常返回undefined，相关代码及控制台输出如下：

代码片段：

load: function(key) {
    console.log("SettingsUtils - load(" + key + ")");
    //TODO case for querying non-existing setting
    console.log(this.SETTINGS);         // OK
    console.log(this.SETTINGS[key]);    // OK
    var tmp = this.SETTINGS[key];       // OK
    console.log(tmp);
    var result = tmp['current'];        // 多数情况返回undefined，原因何在？
    //TODO most times is undefined, why ??
    console.log(result);
    if (result === undefined || result === null) {
        result = this.SETTINGS[key].default;
    }
    console.log("return: " + result);
    return result;
},

控制台打印tmp的输出：

Object
current: true
default: false
[[Prototype]]: Object

核心原因：控制台的延迟求值特性 #

浏览器控制台打印对象时采用引用式显示——不会立即生成对象的属性快照，而是等你点击展开对象时，才读取对象的当前状态。这就造成了假象：代码执行到console.log(tmp)时，tmp可能还没有current属性，但后续异步操作（比如AJAX请求、定时器回调）给tmp添加了该属性，等你在控制台展开查看时，属性已经存在了。

排查与验证方法 #

1. 打印对象快照而非引用
   将console.log(tmp)替换为以下代码，打印代码执行那一刻的对象状态，而非后续更新后的状态：

   console.log(JSON.parse(JSON.stringify(tmp)));
   

   如果快照里没有current，说明代码执行到这一步时属性确实未赋值。

2. 直接检查属性存在性
   在访问current前添加判断，确认代码执行时属性的真实状态：

   console.log('current属性是否存在？', 'current' in tmp);
   console.log('current属性值：', tmp.current);
   

解决思路 #

1. 确认属性赋值时机
   排查this.SETTINGS[key]的赋值逻辑，看是否存在异步操作（比如从后端拉取配置、定时器延迟赋值）。如果是异步场景，要确保调用load方法时，current属性已经同步赋值完成。

2. 异步场景下调整逻辑
   如果SETTINGS的更新是异步的，需将load改为异步方法，比如返回Promise，等属性赋值完成后再访问：

   load: function(key) {
       return new Promise((resolve) => {
           // 假设这里有异步获取配置的逻辑
           this.getSettingsAsync(key).then((settings) => {
               const result = settings.current ?? settings.default;
               resolve(result);
           });
       });
   }
   

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