本文详解 JavaScript 中 hasOwnProperty 方法的唯一性与重要性。该方法用于区分对象自有属性与继承自原型链的属性,在 for...in 遍历中不可或缺。文章指出,若对象属性名被命名为 hasOwnProperty 将覆盖原型方法,此时需通过 Object.prototype.hasOwnProperty.call 或空对象调用方式安全判断,避免原型污染导致的逻辑错误。
// Poisoning Object.prototype
Object.prototype.bar = 1;
var foo = {goo: undefined};
foo.bar; // 1
'bar' in foo; // true
foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true
hasOwnProperty 的唯一性与必要性
在 JavaScript 中,只有 hasOwnProperty 方法能准确判断属性是否存在于对象自身,这在遍历对象属性时至关重要。JavaScript 标准库中没有任何其他内置方法能够区分一个属性是定义在对象本身,还是继承自原型链。
hasOwnProperty 作为属性名的陷阱
hasOwnProperty 作为属性名
JavaScript 并未将 hasOwnProperty 设为保留字或敏感词,这意味着开发者可以为对象定义一个名为 hasOwnProperty 的属性。在这种情况下,对象自身的 hasOwnProperty 方法将被覆盖,导致无法直接调用该方法来判断属性归属。此时,必须借助外部引用的 hasOwnProperty 方法来进行判断。
var foo = {
hasOwnProperty: function() {
return false;
},
bar: 'Here be dragons'
};
foo.hasOwnProperty('bar'); // always returns false
// Use another Object's hasOwnProperty and call it with 'this' set to foo
({}).hasOwnProperty.call(foo, 'bar'); // true
// It's also possible to use hasOwnProperty from the Object
// prototype for this purpose
Object.prototype.hasOwnProperty.call(foo, 'bar'); // true
总结与最佳实践
总结
当需要判断对象是否拥有某个属性时,hasOwnProperty 是唯一可靠的方法。此外,在使用 for...in 循环遍历对象属性时,结合 hasOwnProperty 可以有效过滤掉从原型对象扩展而来的属性,避免处理非预期属性的困扰。
下面是其他网友的补充:
其他补充说明
JavaScript 中 Object 对象原型上的 hasOwnProperty() 方法用于判断一个属性是定义在对象本身,而不是继承自原型链。
obj.hasOwnProperty(prop)
参数 prop
要检测的属性,可以是字符串名称或者 Symbol(ES6 标准)。
o = new Object();
o.prop = 'exists';
o.hasOwnProperty('prop'); // 返回 true
o.hasOwnProperty('toString'); // 返回 false
o.hasOwnProperty('hasOwnProperty'); // 返回 false
使用 hasOwnProperty 作为某个对象的属性名
由于 JavaScript 没有将 hasOwnProperty 设为保留字,我们有可能将对象的一个属性命名为 hasOwnProperty。这将导致无法再使用对象原型的 hasOwnProperty 方法来判断属性是否来自原型链。
var foo = {
hasOwnProperty: function() {
return false;
},
bar: 'Here be dragons'
};
foo.hasOwnProperty('bar'); // 始终返回 false
如果无法直接使用该对象.hasOwnProperty 方法,如何解决这个问题?我们需要使用原型链上真正的 hasOwnProperty 方法:
({}).hasOwnProperty.call(foo, 'bar'); // true
// 或者:
Object.prototype.hasOwnProperty.call(foo, 'bar'); // true
参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty