背景

在這篇Accessible Object.prototype.hasOwnProperty() 提案中，提出了一個(gè)更簡單的方法來檢查對象時(shí)候具有特定的屬性-

Object.hasOwn()，主要目標(biāo)是用來替代Object.prototype.hasOwnProperty()。目前本提案已經(jīng)進(jìn)去第四階段，預(yù)計(jì)2022年納入標(biāo)準(zhǔn)。

隨著Object.hasOwn()的加入，目前我們已經(jīng)有了5個(gè)判斷對象屬性是否存在的方法！

檢查屬性是否存在

in

JavaScript的in操作符可以用來判斷一個(gè)屬性是否屬于一個(gè)對象，也可以用來變量一個(gè)對象的屬性

本文我們只討論in的檢查作用

in運(yùn)算符檢查對象是否具有給定名稱的屬性：

> 'name' in {name: '搞前端的半夏'}
true
> 'name' in {}
false

但是因?yàn)閕n會判斷繼承過來的屬性！

> 'toString' in {}
true

那是因?yàn)閧}繼承了方法Object.prototype.toString()

Reflect.has()

Reflect是在ES2015新增的一個(gè)內(nèi)置對象，提供了與Javascript對象交互的方法。

判斷一個(gè)對象是否存在某個(gè)屬性，和 in 運(yùn)算符] 的功能完全相同。

用法：Reflect.has(obj, propName)

Reflect.has({name:"搞前端的半夏"}, "name"); // true
Reflect.has({name:"搞前端的半夏"}, "age"); // false

Reflect.has({name:"搞前端的半夏"}, "toString"); //true

hasOwnProperty

hasOwnProperty這個(gè)方法可以用來檢測一個(gè)對象是否含有特定的自身屬性，即是用來判斷一個(gè)屬性是定義在對象本身而不是繼承自原型鏈的，

通過對象字面量或者構(gòu)造函數(shù)法創(chuàng)建的對象都從Object.prototype繼承了hasOwnProperty()。

構(gòu)造函數(shù)法

o = new Object();
o.name = '搞前端的半夏';
o.hasOwnProperty('name');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.hasOwnProperty('hasOwnProperty');   // 返回 false

對象字面量

o={name:"搞前端的半夏"}
o.hasOwnProperty('name');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.hasOwnProperty('hasOwnProperty');   // 返回 false

缺點(diǎn)

不支持create

但是下面這種情況：

o =  Object.create(null)
o.hasOwnProperty('name');             // 返回 true

會直接報(bào)錯(cuò)：

Uncaught TypeError: o.hasOwnProperty is not a function
    at <anonymous>:1:3

覆蓋報(bào)錯(cuò)

如果一個(gè)對象有一個(gè)自己的名為 name 的屬性'hasOwnProperty'，那么該屬性將被覆蓋Object.prototype.hasOwnProperty并且我們無法訪問它：

o={hasOwnProperty:"搞前端的半夏"}
o.hasOwnProperty('name');    

直接報(bào)錯(cuò)

VM123:3 Uncaught TypeError: o.hasOwnProperty is not a function
    at <anonymous>:3:3

Object.prototype.hasOwnProperty()

用法：Object.prototype.hasOwnProperty.call(obj, propName);，接受兩個(gè)參數(shù)。請注意我們這里用到了call。改變this的指向。

Object.prototype.hasOwnProperty除了支持hasOwnProperty的相同用法，同時(shí)還解決了hasOwnProperty的兩個(gè)缺點(diǎn)。

o={hasOwnProperty:"搞前端的半夏"}
Object.prototype.hasOwnProperty.call.hasOwnProperty(o,'name'); // 返回false

ES13（ES2022）Object.hasOwn()

Object.hasOwn()，目前來看就是替代Object.prototype.hasOwnProperty.call()。

如果用Object.prototype.hasOwnProperty.call() 來封裝的話，代碼如下：

function hasOwn(obj, propName) {
  return Object.prototype.hasOwnProperty.call(obj, propName);
}

Object.hasOwn({name: '搞前端的半夏'}, 'name')  // true
Object.hasOwn({}, 'name')               //false
Object.hasOwn({}, 'toString')             //false
Object.hasOwn(Object.create(null), 'name')     //false
Object.hasOwn({hasOwnProperty: 'yes'}, 'name')  //false
Object.hasOwn({hasOwn: 'yes'}, 'name')		 //false

總結(jié)

到此這篇關(guān)于JS判斷對象屬性是否存在的五種方案的文章就介紹到這了,更多相關(guān)JS判斷對象屬性存在內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論