JavaScript 中 in 和 hasOwnProperty 的区别

Question

给定一个通用的 JavaScript 对象，有两种常用的方法来检查一个对象是否包含一个键： in 操作符和 hasOwnProperty() 函数。 使用简单的 POJO 并且没有特殊键，这两个是等价的：

const obj = { answer: 42 };
'answer' in obj; // true
obj.hasOwnProperty('answer'); // true

'does not exist' in obj; // false
obj.hasOwnProperty('does not exist'); // false

两者也都支持 ES6 符号 。

const symbol = Symbol('answer');
const obj = { [symbol]: 42 };

symbol in obj; // true
obj.hasOwnProperty(symbol); // true

那么两者有什么区别呢？ 关键的区别在于 in 将返回 true 对于继承的属性，而 hasOwnProperty() 将返回 false 对于继承的属性。

例如， Object JavaScript 中的基类有一个 __proto__ 属性 _ constructor 属性 和 hasOwnProperty 函数 。 这 in 操作符将返回 true 对于这些属性，但是 hasOwnProperty() 将返回 false。

'constructor' in obj; // true
'__proto__' in obj; // true
'hasOwnProperty' in obj; // true

obj.hasOwnProperty('constructor'); // false
obj.hasOwnProperty('__proto__'); // false
obj.hasOwnProperty('hasOwnProperty'); // false

因为 hasOwnProperty() 忽略继承的属性，它是普通旧 JavaScript 对象（POJO）的更好选择。 然而， hasOwnProperty() 将返回 false 对于 ES6 类 getter 和方法，例如 ES6 getters 。

class BaseClass {
  get baseProp() {
    return 42;
  }
}
class ChildClass extends BaseClass {
  get childProp() {
    return 42;
  }
}
const base = new BaseClass();
const child = new ChildClass();

'baseProp' in base; // true
'childProp' in child; // true
'baseProp' in child; // true

base.hasOwnProperty('baseProp'); // false
child.hasOwnProperty('childProp'); // false
child.hasOwnProperty('baseProp'); // false

以下是权衡之间的摘要 in 和 hasOwnProperty()。

一般来说， hasOwnProperty() 大多数时候是正确的选择，因为您可以避免特殊键的问题，例如 constructor。 一个好的经验法则是，如果您要查看一个对象是否具有属性，您应该使用 hasOwnProperty()。如果您想查看一个对象是否有您打算调用的函数，例如检查一个对象是否有 toString()，你应该使用 in。