“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022”

background

In this Accessible Object. The prototype. HasOwnProperty () in the proposal, a simpler method is proposed to detect objects when with certain attributes –

Object. HasOwn (), the main target is used to replace the Object. The prototype. The hasOwnProperty (). At present, the proposal has entered the fourth phase and is expected to be included in the standard by 2022.

With the addition of object.hasown (), we now have five methods to determine whether an Object property exists or not!

Check whether the attribute exists

in

JavaScript’s in operator can be used to determine whether a property belongs to an object or to variable an object’s property

In this article we only discuss the checking function of IN

The in operator checks whether an object has an attribute of the given name:

} true > 'name' in {} falseCopy the code

But because in determines inherited properties!

> 'toString' in {}
true
Copy the code

That’s because {} inherited the method Object. The prototype. The toString ()

Reflect.has()

Reflect is a built-in object added in ES2015 that provides a way to interact with Javascript objects.

Determining whether an object has an attribute is the same as the in operator.

Usage: reflect. has(obj, propName)

Reflect.has({name:" "}, "name"); // Reflect. Has ({name:" "}, "age"); // Reflect. Has ({name:" toString"}, "toString"); //trueCopy the code

hasOwnProperty

HasOwnProperty this method can be used to check whether an object has a specific property of its own, that is, if a property is defined in the object itself and not inherited from the stereotype chain.

Objects created by Object literals or constructors inherit hasOwnProperty() from Object.prototype.

Constructor method

o = new Object(a); o.name ='Pinellia in the front';
o.hasOwnProperty('name');             / / return true
o.hasOwnProperty('toString');         / / returns false
o.hasOwnProperty('hasOwnProperty');   / / returns false
Copy the code

Object literals

o={name:"Pinellia in the front."}
o.hasOwnProperty('name');             / / return true
o.hasOwnProperty('toString');         / / returns false
o.hasOwnProperty('hasOwnProperty');   / / returns false
Copy the code

disadvantages

Does not support the create

But here’s the case:

o =  Object.create(null)
o.hasOwnProperty('name');             / / return true
Copy the code

Error will be reported directly:

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

Coverage error

If an Object has a own attribute called name ‘hasOwnProperty’, then the attribute will be covered by the Object. The prototype. The hasOwnProperty and we won’t be able to access it:

O ={hasOwnProperty:" "} o.hasownProperty ('name');Copy the code

Direct error

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

Object.prototype.hasOwnProperty()

Usage: Object. The prototype. The hasOwnProperty. Call (propName, obj); , takes two parameters. Notice that we use “call” here. Change the direction of this.

Object. The prototype. The hasOwnProperty in addition to supporting the same hasOwnProperty usage, but also solve the two shortcomings of hasOwnProperty.

O = {hasOwnProperty: "make the front of this decoction"} Object. The prototype. The hasOwnProperty. Call the hasOwnProperty (o, 'name'); / / returns falseCopy the code

ES13 (ES2022) Object.hasown ()

Object. HasOwn (),, is the replacement for the Object. The prototype. The hasOwnProperty. Call ().

If use the Object. The prototype. HasOwnProperty. Call () to encapsulate, code is as follows:

function hasOwn(obj, propName) {
  return Object.prototype.hasOwnProperty.call(obj, propName);
}
Copy the code
Object.hasOwn({name: 'make the front of pinellia'}, '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') //falseCopy the code