Shopify JavaScript对象中如何正确检测继承属性是否存在？

在Shopify的JavaScript环境中，当customer_id不存在时，执行原有函数会抛出错误：Uncaught TypeError: Cannot read properties of undefined (reading 'customer_id')。原函数代码如下：

function () {
  if ("customer_id" in Shopify !== "undefined") {
    return Shopify.checkout.customer_id;
  } else {
    return ShopifyAnalytics.meta.page.customerId;
  }
};

当前存在的问题：

• 当前函数在customer_id存在时能正常运行，但不存在时会触发上述错误
• 若将条件改为if ("customer_id" in Shopify) {，即使customer_id实际存在，条件也不成立
• 若将条件改为if ("customer_id" in Shopify.checkout) {，customer_id存在时条件成立，但customer_id不存在时仍会抛出错误

由于需要检测对象的继承属性，无法使用hasOwnProperty()方法，正确的检测方法如下：

核心修复思路 #

1. 先确保上层对象存在：直接访问Shopify.checkout时，如果Shopify或Shopify.checkout本身是undefined，会直接抛出错误，所以必须先逐层验证这些对象的存在性
2. 正确使用in操作符：in操作符用于检测属性是否存在于对象（包括继承的属性），但必须确保操作的对象本身是存在的
3. 安全访问备选值：返回ShopifyAnalytics相关属性时，同样要避免因层级对象不存在触发新的错误

修复后的代码 #

function getCustomerId() {
  // 先验证Shopify和Shopify.checkout存在，再检测customer_id是否在其中（含继承属性）
  if (Shopify && Shopify.checkout && "customer_id" in Shopify.checkout) {
    return Shopify.checkout.customer_id;
  } else {
    // 可选链+空值合并操作符，安全访问备选属性，兜底返回null（可按需调整）
    return ShopifyAnalytics?.meta?.page?.customerId ?? null;
  }
}

错误原因解析 #

• 原函数的条件判断逻辑完全错误："customer_id" in Shopify返回布尔值，和字符串"undefined"比较永远为false，导致无论什么情况都会走else分支，但此时如果Shopify.checkout不存在，访问Shopify.checkout.customer_id就会报错
• 问题2中的条件"customer_id" in Shopify不成立，是因为customer_id属性实际属于Shopify.checkout，而非Shopify本身，检测对象层级错误
• 问题3中的条件"customer_id" in Shopify.checkout会报错，是因为当Shopify.checkout不存在时，尝试访问该属性会触发“读取undefined的属性”错误，未提前做存在性验证

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