Object.hasOwn()

在JavaScript开发中，检测对象属性是否存在是一个常见且重要的操作。随着ECMAScript 2022（ES13）的发布，Object.hasOwn()方法作为更优雅、更安全的属性检测方案被引入。本文将深入探讨这一方法，对比传统方案，并详细分析其在前端开发中的应用场景。

1. Object.hasOwn()方法概述

1.1 基本定义

Object.hasOwn()是一个静态方法，用于判断指定对象是否包含特定自身属性（非继承属性）。其语法如下：

javascript 复制代码

Object.hasOwn(object, property)

object: 要检查的目标对象
property: 要检测的属性名称（String或Symbol类型）
返回值: Boolean类型，表示对象是否直接拥有该属性

1.2 基本示例

javascript 复制代码

const person = {
  name: 'Alice',
  age: 30
};

console.log(Object.hasOwn(person, 'name')); // true
console.log(Object.hasOwn(person, 'toString')); // false（继承属性）
console.log(Object.hasOwn(person, 'gender')); // false（不存在属性）

2. 与传统方法的对比

2.1 与hasOwnProperty()的比较

在Object.hasOwn()出现之前，我们通常使用Object.prototype.hasOwnProperty()方法：

javascript 复制代码

const obj = { name: 'John' };

// 传统方式
console.log(obj.hasOwnProperty('name')); // true

// 新方式
console.log(Object.hasOwn(obj, 'name')); // true

2.1.1 安全性对比

hasOwnProperty()方法存在潜在的安全问题：

javascript 复制代码

// 问题1: 对象可能没有hasOwnProperty方法
const obj1 = Object.create(null); // 创建没有原型的对象
console.log(obj1.hasOwnProperty); // undefined
// obj1.hasOwnProperty('prop') // 报错: TypeError

// 使用Object.hasOwn()则安全
console.log(Object.hasOwn(obj1, 'prop')); // false（安全执行）

// 问题2: 属性名冲突
const obj2 = { hasOwnProperty: 'I am a string' };
console.log(obj2.hasOwnProperty('prop')); // 报错: TypeError

// 使用Object.hasOwn()避免冲突
console.log(Object.hasOwn(obj2, 'prop')); // false（安全执行）

2.1.2 解决方案的演进

在Object.hasOwn()之前，开发者使用各种变通方案：

javascript 复制代码

// 方案1: 直接调用Object.prototype上的方法
Object.prototype.hasOwnProperty.call(obj, 'prop');

// 方案2: 使用in运算符配合Object.getOwnPropertyNames()
Object.getOwnPropertyNames(obj).includes('prop');

// 现在只需使用
Object.hasOwn(obj, 'prop');

2.2 与in运算符的比较

in运算符检查属性是否存在（包括继承属性），而Object.hasOwn()只检查自身属性：

javascript 复制代码

const parent = { inheritedProp: 'parent' };
const child = Object.create(parent);
child.ownProp = 'child';

console.log('inheritedProp' in child); // true（继承属性）
console.log('ownProp' in child); // true（自身属性）
console.log('toString' in child); // true（原型链上的属性）

console.log(Object.hasOwn(child, 'inheritedProp')); // false
console.log(Object.hasOwn(child, 'ownProp')); // true
console.log(Object.hasOwn(child, 'toString')); // false

3. 技术细节深入解析

3.1 参数处理机制

Object.hasOwn()方法对参数有严格的类型检查：

javascript 复制代码

// 第一个参数必须为对象类型
Object.hasOwn(null, 'prop'); // TypeError: Cannot convert undefined or null to object
Object.hasOwn(undefined, 'prop'); // TypeError: Cannot convert undefined or null to object

// 第二个参数会自动转换为字符串或Symbol
const obj = { 123: 'numeric', [Symbol('sym')]: 'symbol' };

console.log(Object.hasOwn(obj, 123)); // true（数字转换为字符串）
console.log(Object.hasOwn(obj, '123')); // true
console.log(Object.hasOwn(obj, Symbol('sym'))); // true

// 非字符串/Symbol值会转换为字符串
const key = { toString: () => 'customKey' };
obj.customKey = 'value';
console.log(Object.hasOwn(obj, key)); // true（对象转换为字符串）

3.2 不可枚举属性的处理

Object.hasOwn()能够检测到所有自身属性，包括不可枚举属性：

javascript 复制代码

const obj = {};

// 定义不可枚举属性
Object.defineProperty(obj, 'hiddenProp', {
  value: 'hidden',
  enumerable: false
});

// 定义可枚举属性
obj.visibleProp = 'visible';

console.log(Object.hasOwn(obj, 'hiddenProp')); // true
console.log(Object.hasOwn(obj, 'visibleProp')); // true

// 对比for...in循环（只能遍历可枚举属性）
for (let key in obj) {
  console.log(key); // 只输出 'visibleProp'
}

3.3 与Object.getOwnPropertyNames()和Object.getOwnPropertySymbols()的关系

javascript 复制代码

const obj = {
  strProp: 'string',
  [Symbol('symProp')]: 'symbol'
};

// 获取所有自身属性名（字符串）
const propertyNames = Object.getOwnPropertyNames(obj);
console.log(propertyNames.includes('strProp')); // true

// 获取所有自身Symbol属性
const propertySymbols = Object.getOwnPropertySymbols(obj);
console.log(propertySymbols.length > 0); // true

// 使用Object.hasOwn()逐一检查
console.log(Object.hasOwn(obj, 'strProp')); // true
console.log(Object.hasOwn(obj, propertySymbols[0])); // true

4. 实际应用场景

4.1 对象属性遍历与过滤

javascript 复制代码

const user = {
  id: 1,
  name: 'Alice',
  age: 30,
  // 继承的属性
  toString() { return this.name; }
};

// 只处理自身属性
function processOwnProperties(obj) {
  for (const key in obj) {
    if (Object.hasOwn(obj, key)) {
      console.log(`处理自身属性: ${key} = ${obj[key]}`);
    }
  }
}

processOwnProperties(user);
// 输出:
// 处理自身属性: id = 1
// 处理自身属性: name = Alice
// 处理自身属性: age = 30

4.2 安全地检查属性存在性

javascript 复制代码

// 在处理用户输入或第三方数据时特别有用
function safePropertyAccess(obj, propName) {
  if (Object.hasOwn(obj, propName)) {
    return obj[propName];
  }
  return undefined; // 或者默认值
}

// 即使用户恶意修改了hasOwnProperty也不受影响
const maliciousData = {
  data: 'important',
  hasOwnProperty: 'overridden'
};

console.log(safePropertyAccess(maliciousData, 'data')); // 'important'
console.log(safePropertyAccess(maliciousData, 'nonexistent')); // undefined

4.3 与JSON序列化的配合

javascript 复制代码

const data = {
  name: 'John',
  age: 25,
  // 方法不会被JSON序列化，但仍然是自身属性
  getInfo() { return `${this.name} - ${this.age}`; }
};

// 只序列化数据属性（非函数）
function toJSONSafe(obj) {
  const result = {};
  for (const key in obj) {
    if (Object.hasOwn(obj, key) && 
        typeof obj[key] !== 'function') {
      result[key] = obj[key];
    }
  }
  return result;
}

console.log(JSON.stringify(toJSONSafe(data)));
// {"name":"John","age":25}

4.4 类与继承场景中的应用

javascript 复制代码

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const myDog = new Dog('Rex', 'German Shepherd');

// 区分自身属性和继承属性
console.log(Object.hasOwn(myDog, 'name')); // true（自身，虽然在父类中定义）
console.log(Object.hasOwn(myDog, 'breed')); // true（自身）
console.log(Object.hasOwn(myDog, 'speak')); // false（继承自原型）

// 检查原型链上的方法
console.log('speak' in myDog); // true
console.log(Object.hasOwn(Animal.prototype, 'speak')); // true

5. 性能考虑与浏览器兼容性

5.1 性能对比

虽然性能差异在大多数场景下可以忽略不计，但在极端性能敏感的场景中值得注意：

javascript 复制代码

// 简单的性能测试
const obj = {};
for (let i = 0; i < 10000; i++) {
  obj[`key${i}`] = i;
}

// 测试hasOwnProperty
console.time('hasOwnProperty');
for (let i = 0; i < 10000; i++) {
  obj.hasOwnProperty(`key${i}`);
}
console.timeEnd('hasOwnProperty');

// 测试Object.hasOwn
console.time('Object.hasOwn');
for (let i = 0; i < 10000; i++) {
  Object.hasOwn(obj, `key${i}`);
}
console.timeEnd('Object.hasOwn');

实际测试中，Object.hasOwn()通常有轻微的性能优势，因为它不需要查找原型链上的方法。

5.2 浏览器兼容性与polyfill

截至2023年，所有现代浏览器都支持Object.hasOwn()：

Chrome ≥ 93
Firefox ≥ 92
Safari ≥ 15.4
Edge ≥ 93

对于旧版浏览器，可以使用polyfill：

javascript 复制代码

if (!Object.hasOwn) {
  Object.defineProperty(Object, 'hasOwn', {
    value: function(object, property) {
      if (object == null) {
        throw new TypeError('Cannot convert undefined or null to object');
      }
      return Object.prototype.hasOwnProperty.call(object, property);
    },
    configurable: true,
    enumerable: false,
    writable: true
  });
}

6. 最佳实践与总结

6.1 使用建议

优先使用Object.hasOwn()：在新项目中，优先选择Object.hasOwn()而不是hasOwnProperty()
明确检查意图：如果需要检查继承属性，使用in运算符；如果只需要自身属性，使用Object.hasOwn()
处理边界情况：始终注意处理null和undefined输入

6.2 代码示例总结

javascript 复制代码

// 推荐的使用模式
function safeObjectProcessing(obj) {
  // 1. 检查输入有效性
  if (obj === null || obj === undefined) {
    return;
  }
  
  // 2. 安全地检查属性
  if (Object.hasOwn(obj, 'requiredProperty')) {
    // 处理属性
  }
  
  // 3. 遍历自身属性
  for (const key in obj) {
    if (Object.hasOwn(obj, key)) {
      // 只处理自身属性
    }
  }
}

6.3 总结

Object.hasOwn()是JavaScript语言发展的一个重要改进，它解决了长期存在的hasOwnProperty()方法的安全性和易用性问题。作为现代JavaScript开发者，理解并正确使用这一方法不仅能够编写更安全的代码，还能提高代码的可读性和维护性。

在前端面试中，对Object.hasOwn()的深入理解能够体现候选人对JavaScript语言细节的掌握程度，特别是对原型链、属性描述符和最新语言特性的理解。

分享

复制链接

微信扫码分享

1. Object.hasOwn()方法概述

1.1 基本定义

1.2 基本示例

2. 与传统方法的对比

2.1 与hasOwnProperty()的比较

2.1.1 安全性对比

2.1.2 解决方案的演进

2.2 与in运算符的比较

3. 技术细节深入解析

3.1 参数处理机制

3.2 不可枚举属性的处理

3.3 与Object.getOwnPropertyNames()和Object.getOwnPropertySymbols()的关系

4. 实际应用场景

4.1 对象属性遍历与过滤

4.2 安全地检查属性存在性

4.3 与JSON序列化的配合

4.4 类与继承场景中的应用

5. 性能考虑与浏览器兼容性

5.1 性能对比

5.2 浏览器兼容性与polyfill

6. 最佳实践与总结

6.1 使用建议

6.2 代码示例总结

6.3 总结