Object.hasOwn()与Object.prototype.hasOwnProperty()的区别及优势对比

核心区别 #

• 对重写了hasOwnProperty的对象的处理逻辑不同
  如果目标对象自身重写了继承自原型的hasOwnProperty方法，直接调用对象上的该方法会得到不符合预期的结果，Object.hasOwn()不受该问题影响：

  const testObj = {
    hasOwnProperty: () => false,
    count: 10
  };
  
  // 调用对象自身的hasOwnProperty，被重写逻辑影响
  console.log(testObj.hasOwnProperty('count')); // 输出 false，结果错误
  // 调用静态方法Object.hasOwn
  console.log(Object.hasOwn(testObj, 'count')); // 输出 true，结果正确
  

• 对无原型对象的支持不同
  通过Object.create(null)创建的对象没有继承Object.prototype，自身不存在hasOwnProperty方法，直接调用会抛出异常，Object.hasOwn()可以正常处理这类对象：

  const nullProtoObj = Object.create(null);
  nullProtoObj.name = 'test';
  
  // 直接调用hasOwnProperty会报错
  try {
    nullProtoObj.hasOwnProperty('name');
  } catch (e) {
    console.log(e); // 输出 TypeError: nullProtoObj.hasOwnProperty is not a function
  }
  // 调用Object.hasOwn可正常判断
  console.log(Object.hasOwn(nullProtoObj, 'name')); // 输出 true
  

• 调用方式不同
  过去为了规避上述两个问题，开发者通常需要手动调用原型上的方法并绑定目标对象：Object.prototype.hasOwnProperty.call(targetObj, propName)，写法冗长；而Object.hasOwn()作为静态方法，直接传入目标对象和属性名即可，语法更简洁。

使用Object.hasOwn()的优势 #

• 安全性更高：完全规避了目标对象重写原型方法、无原型对象调用报错的两类问题，无需额外做兼容处理即可覆盖所有合法对象的判断场景
• 代码可读性更强：无需写冗长的call绑定逻辑，语法直白易懂，降低维护成本
• 语义更清晰：作为专门为自身属性判断设计的静态API，用法更符合直觉，不需要开发者理解原型链、方法绑定相关的前置知识也能正确使用

注意：Object.hasOwn()是ES2022（ES13）新增的标准API，所有2021年之后发布的主流浏览器、Node.js 16.9+版本都原生支持，如果需要兼容极低版本的运行环境，可以引入对应的polyfill做兼容。

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