SoFunction
Updated on 2025-04-09

A brief discussion on properties in JavaScript: How to traverse properties

In JavaScript, it is often not as simple as traversing a key that hash (some languages ​​call dictionaries) in other languages. There are two main reasons for this: one is that objects in JavaScript are usually in a prototype chain, and they will inherit some properties from one or more upper prototypes. The second reason is that properties in JavaScript not only have values, but also have some other characteristics besides values. One of the characteristics that affects attribute traversal is [[Enumerable]]. If the value is true, this property is called enumerable, otherwise otherwise.

Knowing this, we can divide the traversal of attributes into four situations.

Note: In the example code, the object we want to traverse is the window in the browser, the environment is Firefox 19, and the code runs in the script tag in the blank page. There is no impact of Firebug or other debugging tools (some global variables, console, etc. will be imported).

1. Traverse the enumerable properties

The enumerable means that the [[Enumerable]] attribute of the attribute is true, and the own attribute means that the attribute is not inherited from the prototype chain.

(function () {
 var propertys = (window);
 alert();   //3
 alert(("\n"));  //window, document, InstallTrigger, except for the last one, which is a private property of Firefox, it turns out that the window object only has two enumerable properties. The window attribute points to the window object itself, which is generally useless.})()

2. Iterate through all its own attributes

Properties whose properties are non-enumerable are not impossible to traverse. ES5 provides us with the getOwnPropertyNames method, which can obtain all the properties of an object.

(function () {
 var propertys = (window);
 alert();  //72
 alert(("\n")); //Object, Function, eval, etc.})()

3. Traverse the enumerable properties and inherited properties

How to traverse inherited attributes, you should know that it is the most commonly used for in traversal

(function () {
 var getEnumPropertyNames = function (obj) {
  var props = [];
  for (prop in obj) {
   (prop);
  }
  return props;
 }
 var propertys = getEnumPropertyNames(window);
 alert();  //185
 alert(("\n")); //addEventListener,onload, etc.})()

4. Iterate through all your own attributes and inherited attributes

This kind of traversal is mainly used in the code completion functions of various js debugging tools, such as Firebug.

(function () {
 var getAllPropertyNames = function (obj) {
  var props = [];
  do {
   props = ((obj));
  } while (obj = (obj));
  return props;
 }
 var propertys = getAllPropertyNames(window);
 alert();   //276
 alert(("\n"));  //toString etc.})()

The above article briefly talks about attributes in JavaScript: How to traverse attributes is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.