JavaScript中in和hasOwnProperty区别详解

what is in

in 关键字可以用于判断一个对象是否具有某个属性，或者一个数组中是否包含某个元素。其用法如下：

propertyNameOrIndex in objectOrArray

这里propertyNameOrIndex代表要查找的属性名或者数组中的索引位置，objectOrArray代表要查找的对象或者数组。

判断对象是否具有某个属性：

const obj = { name: 'Tom', age: 18 };
console.log('name' in obj); // true
console.log('email' in obj); // false

判断数组中是否包含某个元素：

const arr = [1, 2, 3];
console.log(0 in arr); // true
console.log(4 in arr); // false

what is hasOwnProperty

hasOwnProperty 方法是 JavaScript 中的一个实例方法，它返回一个布尔值，表示一个对象是否具有指定的属性。其用法如下：

obj.hasOwnProperty(propertyName)

这里obj代表要判断的对象，propertyName代表要查找的属性名。

判断对象是否具有某个属性：

const obj = { name: 'Tom', age: 18 };
console.log(obj.hasOwnProperty('name')); // true
console.log(obj.hasOwnProperty('email')); // false

需要注意的是，hasOwnProperty 只能检测对象本身的属性，无法检测从原型继承的属性。

差异

它们的区别在于hasOwnProperty 可以检测对象本身的属性，无法检测从原型继承的属性，而 in 关键字可以检测对象本身的属性和从原型继承的属性。

function Person(name) {
  this.name = name;
  this.sayName = function() {
    console.log(this.name);
  };
}

Person.prototype.sayAge = function() {
  console.log(this.age);
};

const tom = new Person('Tom');
tom.age = 18;

console.log(tom.hasOwnProperty('name')); // true
console.log(tom.hasOwnProperty('age')); // true
console.log('name' in tom); // true
console.log('age' in tom); // true
console.log(tom.hasOwnProperty('sayAge')); // false
console.log('sayAge' in tom); // true

由上例可以看到，tom 既有自己的属性，也从原型继承了方法，但是 hasOwnProperty 只能检测到 tom 自己的属性，无法检测到从原型继承的方法，而 in 关键字既能检测到自身的属性，也能检测到从原型继承的方法。