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()

相关推荐
秋名RG1 天前
深入理解设计模式之原型模式(Prototype Pattern)
设计模式·原型模式
长袖格子衫2 天前
第五节:对象与原型链:JavaScript 的“类”与“继承”
开发语言·javascript·原型模式
常某某的好奇心4 天前
原型模式(Prototype Pattern)
原型模式
牛奶咖啡134 天前
学习设计模式《八》——原型模式
学习·设计模式·原型模式·浅度克隆·深度克隆·c#的克隆·原型管理器
帝锦_li10 天前
Java进阶--设计模式
观察者模式·单例模式·代理模式·抽象工厂模式·适配器模式·原型模式
hyyyyy!14 天前
《从分遗产说起:JS 原型与继承详解》
前端·javascript·原型模式
Frankabcdefgh15 天前
前端面试 js
开发语言·javascript·原型模式
麓殇⊙16 天前
设计模式-- 原型模式详解
设计模式·原型模式
智想天开16 天前
11.原型模式:思考与解读
设计模式·原型模式
碎梦归途20 天前
23种设计模式-创建型模式之原型模式(Java版本)
java·开发语言·jvm·设计模式·原型模式