为什么资深前端从不直接用obj.hasOwnProperty?揭秘原型链陷阱

54 阅读1分钟

今天在写需求提交代码的时候,日常被eslint扫出了error

15:16 error Do not access Object.prototype method 'hasOwnProperty' from target object no-prototype-builtins

这个错误来自ESLint的 no-prototype-builtins 规则,它禁止直接从对象实例访问Object.prototype上的方法(如 hasOwnProperty )。

错误原因:

当你使用 obj.hasOwnProperty(prop) 时,ESLint会触发此错误。这是因为如果 obj 本身定义了名为 hasOwnProperty 的属性,会覆盖原型方法,导致意外行为。

正确做法:

应该使用 Object.prototype.hasOwnProperty.call(obj, prop) 来安全检查属性:

// 错误示例
if (obj.hasOwnProperty('key')) { ... }

// 正确示例
if (Object.prototype.hasOwnProperty.call(obj, 'key')) { ... }

为什么需要这样做?

假设存在恶意对象:

const obj = { hasOwnProperty() => false };
obj.hasOwnProperty('key'); // 始终返回false,产生错误结果
Object.prototype.hasOwnProperty.call(obj, 'key'); // 正确检查

如果你的代码中确实需要频繁使用此检查,可以定义一个辅助函数:

const hasOwnProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
// 使用
if (hasOwnProp(obj, 'key')) { ... }