JS从变量中获取Object属性值时返回undefined如何解决

1. 浏览器控制台打印对象时默认输出的是对象的引用，而非打印时刻的对象快照。你看到控制台展开的userData有对应属性值，是你展开对象时才读取的最新属性值，而你执行console.log(userData.pKey1)时是同步读取代码执行到该行时的属性值，二者的取值时间点不一致。
2. 本质原因是你调用setProperty赋值的操作，晚于你读取userData.pKey1的操作，读取时属性还未完成赋值，所以返回undefined。

• 首先确认代码执行顺序，保证dataShareProvider().setProperty(7, "active", true)的调用时机，早于读取userData.pKey1的代码执行时机。你可以分别在赋值和读取代码行添加打印标记，确认执行顺序：

// 赋值位置
console.log('执行赋值操作')
dataShareProvider().setProperty(7, "active", true);

// 读取位置
console.log('执行读取操作')
console.log(userData.pKey1)

如果打印结果中「执行读取操作」出现在「执行赋值操作」之前，调整代码逻辑保证赋值先执行即可。

• 要避免控制台对象引用的误导，需要查看打印时刻的对象真实值，可以序列化后再打印：

console.log(JSON.stringify(userData, null, 2))

• 你当前的数据共享实现可以做如下优化，支持更灵活的属性设置，无需固定写死参数数量和属性名：

var paramsObj = {};
var dataShareProvider = () => {
    return {
        getProperty: function () {
            return paramsObj;
        },
        // 支持传入对象批量设置属性
        setProperty: function (props) {
            Object.assign(paramsObj, props);
        },
    };
};

// 调用示例
dataShareProvider().setProperty({
  pKey1: 7,
  pKey2: "active",
  pKey3: true
})

// 读取示例
var userData = dataShareProvider().getProperty();
console.log(userData.pKey1) // 7

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