js 怎么判断对象是否具有某个属性及各方法的区别

目录

[prop in obj](#prop in obj)

obj.hasOwnProperty(prop)

[Object.prototype.hasOwnProperty.call(obj, prop)](#Object.prototype.hasOwnProperty.call(obj, prop))


prop in obj

使用 in 运算符来检查属性是否存在于对象中,包括原型链。

javascript 复制代码
let obj = {
    a: 'name', 
    b: 'sex'
}
Reflect.setPrototypeOf(obj, {c: 'age'})
'a' in obj // true 因为 a 是 obj 的直接属性
'c' in obj // true 存在原型链中
'v' in obj // false
'toString' in obj // true 因为 toString 是 obj 的原型方法
  • 如果对象 obj 或其原型链中包含名为 prop 的属性,则返回 true。

  • 如果对象 obj 不包含名为 prop 的属性,并且它的原型链上也不存在该属性,则返回 false。

  • 只能用在具体的对象上,不能用于 null 或 undefined

    javascript 复制代码
    let obj = null
    obj 
    // null
    'a' in obj
    // 报错 VM6874:1 Uncaught TypeError: Cannot use 'in' operator to search for 'a' in null

obj.hasOwnProperty(prop)

使用 hasOwnProperty 方法来检查对象是否直接拥有指定的属性,不包括原型链。

javascript 复制代码
let obj = {
    a: 'name', 
    b: 'sex'
}
Reflect.setPrototypeOf(obj, {c: 'age'})
obj.hasOwnProperty('a') // true 因为 a 是 obj 的直接属性
obj.hasOwnProperty('c') // false 存在原型链中,不是直接拥有
obj.hasOwnProperty('v') // true
obj.hasOwnProperty('toString') // false 因为 toString 是 obj 的原型方法
  • 如果对象 obj 直接拥有名为 prop 的属性,则返回 true。

  • 如果对象 obj 不直接拥有名为 prop 的属性,或者它的原型链上存在该属性,则返回 false。

  • 只能用在具体的对象上,不能用于 null 或 undefined

    javascript 复制代码
    let obj = null
    obj 
    // null
    obj.hasOwnProperty('a')
    // 报错 Uncaught TypeError: Cannot read properties of null (reading 'hasOwnProperty')

弊端

若被判断的这个对象自身也有一个名为 hasOwnPropery 的属性,这个时候 js 不会将hasOwnPropery 作为关键名进行保护。故而引出 Object.prototype.hasOwnProperty.call(obj, prop)。

Object.prototype.hasOwnProperty.call(obj, prop)

使用 Object.prototype.hasOwnProperty.call(obj, prop) 来检查对象是否直接拥有指定的属性,不包括原型链。

javascript 复制代码
let obj = {
    a: 'name', 
    b: 'sex'
}
Reflect.setPrototypeOf(obj, {c: 'age'})
Object.prototype.hasOwnProperty.call(obj, 'a') // true 
Object.prototype.hasOwnProperty.call(obj, 'c') // false
Object.prototype.hasOwnProperty.call(obj, 'v') // false
  • Object.prototype 上调用 hasOwnProperty 方法,并通过 call 来设置方法内部的 this 指向 obj,然后检查 obj 对象自身属性中是否存在 prop 属性

  • 可用于任何对象,包括 null 和 undefined,但如果对象为 nullundefined,将会抛出错误

    javascript 复制代码
    let obj = null
    obj 
    // null
    Object.prototype.hasOwnProperty.call(obj, 'a') 
    // 报错 Uncaught TypeError: Cannot convert undefined or null to object
    
    Object.prototype.hasOwnProperty.call(obj2, 'a') 
    // 报错 Uncaught ReferenceError: obj2 is not defined
  • 即使 obj 对象本身没有 hasOwnProperty 方法(例如,如果 obj 是通过 Object.create(null) 创建的),你也可以安全地检查 obj 是否有 prop 属性。

    javascript 复制代码
    let obj = Object.create(null)
    obj 
    // {}
    Object.prototype.hasOwnProperty.call(obj, 'a') 
    // false

在实际编程中,若不确定对象是否为 nullundefined,或想要在一些特殊的环境中(比如严格模式下)避免使用 this,应该使用 Object.prototype.hasOwnProperty.call()

相关推荐
じ☆ve 清风°20 小时前
JavaScript 原型与原型链:深入理解 __proto__ 和 prototype 的由来与关系
开发语言·javascript·原型模式
产品设计大观2 天前
拆解实战案例:电商ERP管理系统从需求到原型全流程设计
产品经理·原型模式·erp·墨刀·erp系统·原型设计·电商erp系统
_r0bin_3 天前
前端八股之JS的原型链
原型模式
将编程培养成爱好3 天前
《复制粘贴的奇迹:小明的原型工厂》
c++·设计模式·原型模式
独步炎凉的大彬4 天前
new操作符具体做了什么
开发语言·javascript·原型模式
linux-hzh8 天前
设计模式之原型模式
设计模式·原型模式
on the way 1239 天前
创建型设计模式之Prototype(原型)
设计模式·原型模式
秋田君11 天前
深入理解JavaScript设计模式之原型模式
javascript·设计模式·原型模式
qqxhb15 天前
零基础设计模式——第二部分:创建型模式 - 原型模式
设计模式·原型模式·浅拷贝·深拷贝
77tian19 天前
设计模式的原理及深入解析
java·开发语言·单例模式·设计模式·代理模式·享元模式·原型模式