Detailed explanation of the properties and instance usage of hasOwnProperty in js

Detailed explanation of the properties and instance usage of hasOwnProperty in js

1. js will not protect hasOwnProperty from being illegally occupied. If an object happens to have this property, you need to use an external hasOwnProperty function to get the correct result.

2. When checking whether a property on an object exists, hasOwnProperty is the only method available.

Examples

var foo = {
    hasOwnProperty: function() {
        return false;
    },
    bar: 'Here be dragons'
};
foo.hasOwnProperty('bar'); // always returns false
// Use hasOwnProperty of other object and set its context to foo
({}).hasOwnProperty.call(foo, 'bar'); // true

Knowledge point expansion:

Determine whether the attribute exists

var o = new Object();
o.prop = 'exists';

function changeO() {
 o.newprop = o.prop;
 delete o.prop;
}

o.hasOwnProperty('prop'); // true
changeO();
o.hasOwnProperty('prop'); // false

Determine own attributes and inherited attributes

function foo() {
 this.name = 'foo'
 this.sayHi = function () {
  console.log('Say Hi')
 }
}

foo.prototype.sayGoodBy = function () {
 console.log('Say Good By')
}

let myPro = new foo()

console.log(myPro.name) // foo
console.log(myPro.hasOwnProperty('name')) // true
console.log(myPro.hasOwnProperty('toString')) // false
console.log(myPro.hasOwnProperty('hasOwnProperty')) // fail
console.log(myPro.hasOwnProperty('sayHi')) // true
console.log(myPro.hasOwnProperty('sayGoodBy')) // false
console.log('sayGoodBy' in myPro) // true

Iterate over all the properties of an object

When looking at open source projects, you often see source code similar to the following. The for...in loop enumerates all properties of the object and then uses the hasOwnProperty() method to ignore inherited properties.

var buz = {
  fog: 'stack'
};

for (var name in buz) {
  if (buz.hasOwnProperty(name)) {
    alert("this is fog (" + name + ") for sure. Value: " + buz[name]);
  }
  else {
    alert(name); // toString or something else
  }
}

Note hasOwnProperty as the property name

JavaScript does not protect the hasOwnProperty property name, so if there may be an object containing this property name, it is necessary to use an extended hasOwnProperty method to get the correct result:

var foo = {
  hasOwnProperty: function() {
    return false;
  },
  bar: 'Here be dragons'
};

foo.hasOwnProperty('bar'); // always returns false

// If you are concerned about this, you can directly use the real hasOwnProperty method on the prototype chain // Use another object's `hasOwnProperty` and call
({}).hasOwnProperty.call(foo, 'bar'); // true

// You can also use the hasOwnProperty property on the Object prototype Object.prototype.hasOwnProperty.call(foo, 'bar'); // true

This is the end of this article about the properties and example usage of hasOwnProperty in js. For more content about the property usage of hasOwnProperty in js, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • The JS hasOwnProperty() method detects whether a property is an object's own property.
  • Detailed explanation of the difference between in and hasOwnProperty in JavaScript
  • JavaScript hasOwnProperty() function example
  • A brief discussion on the difference between using in and hasOwnProperty to obtain object properties in js
  • Detailed discussion of the difference between using in and hasOwnProperty to obtain object properties in js
  • hasOwnProperty(), propertyIsEnumerable(), and isPrototypeOf() in JS

<<:  Docker custom bridge docker0 and docker's opening, closing, and restarting command operations

>>:  Detailed explanation of box-sizing in CSS3 (content-box and border-box)

Recommend

Implementation of mysql configuration SSL certificate login

Table of contents Preface 1. MySQL enables SSL co...

HTTP header information interpretation and analysis (detailed summary)

HTTP Header Explanation 1. Accept: Tells the web s...

Detailed explanation of using scp command to copy files remotely in Linux

Preface scp is the abbreviation of secure copy. s...

Detailed explanation of Vue's hash jump principle

Table of contents The difference between hash and...

CentOS7.5 installation of MySQL8.0.19 tutorial detailed instructions

1. Introduction This article does not have screen...

How to operate MySQL database with ORM model framework

What is ORM? ORM stands for Object Relational Map...

MySQL 8.0.14 installation and configuration method graphic tutorial (general)

MySQL service 8.0.14 installation (general), for ...

Ideas and methods for incremental backup of MySQL database

To perform incremental backup of the MySQL databa...

Summary of problems encountered in the implementation of Vue plug-ins

Table of contents Scene Introduction Plugin Imple...

How to add Vite support to old Vue projects

1. Introduction I have taken over a project of th...

Example of implementing colored progress bar animation using CSS3

Brief Tutorial This is a CSS3 color progress bar ...

Detailed explanation of how to use the vue3 Teleport instant movement function

The use of vue3 Teleport instant movement functio...

jQuery plugin to achieve image suspension

This article shares the specific code of the jQue...