In my opinion, no matter what programming language we use, we should first understand the nature of the object, right

Characteristics of JavaScript objects

  • Objects have unique identifiers: even two objects that look exactly the same are not the same object.

Objects are uniquely identifiable. Generally speaking, the unique identification of objects in various languages is reflected by memory addresses. Objects have unique identification because they have uniquely identified memory addresses.

Any different JavaScript objects are not really equal

var str1 = { a: 1 }
var str2 = { a: 1 }

console.log(str1 == str2)   // false
Copy the code
  • ​Objects have state: Objects have states. the same object may be in different states
  • Objects have behavior: The behavior of an object that can change its state
Var obj = {a: 0, // status f(){// behavior console.log(this.a)}}Copy the code

In JavaScript, state and behavior are abstracted as “properties.” In the example above, a and F are two common properties to JavaScript, even though they are written differently

Features of JavaScript objects

Unlike Java or other languages, JavaScript allows the runtime to add properties to objects;

On the basis of realizing the basic characteristics of objects, objects in JavaScript are unique in that they are highly dynamic because JavaScript gives users the ability to add state and behavior to objects at run time.

var obj = { a: 1 }
obj.b = 2

console.log(obj.a, obj.b)   // 1  2
Copy the code

To improve abstraction, JavaScript properties are designed to be more complex than other languages, providing data properties and getter/setter properties.

Two classes of properties for JavaScript objects

Data attributes

Data properties are close to the concept of properties in other languages. Data attributes have four characteristics:

  • Value: Indicates the value of the attribute
  • Writable: Determines whether a property can be assigned a value
  • Enumerable: Determines if for in can enumerate this property
  • Different: Determines whether the property can be deleted or changed

* * * *

The writable, Enumerable, and 64x default values are different, and the code that defines the property creates a different data property. The writable, Enumerable, and cis default values are true.

We can look at it using the built-in function getOwnPropertyDescriptor of the object

var obj = { a: 1 };
o.b = 2

Object.getOwnPropertyDescriptor(o,"a") // {value: 1, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor(o,"b") // {value: 2, writable: true, enumerable: true, configurable: true}
Copy the code

If we want to change the characteristics of a property, we can use Object.defineProperty

var obj = { a: 1 }; Object.defineProperty(o, "b", { value: 2, writable: false, enumerable: false, configurable: true }); / / a and b are attribute data, but the characteristic value changes the Object. The getOwnPropertyDescriptor (obj, "a"); // {value: 1, writable: true, enumerable: true, configurable: true} Object.getOwnPropertyDescriptor(obj, "b"); // {value: 2, writable: false, enumerable: false, configurable: true} obj.b = 3; console.log(obj.b); / / 2Copy the code

Since the writable property is false, we reassign b, and the value of B does not change.

Accessor properties

Accessor properties also have four characteristics:

  • Getter: Function or undefined, called when fetching a property value.
  • Setter: function or undefined, called when setting property values.
  • Enumerable: Determines if for in can enumerate this property.
  • Different: Determines whether the property can be deleted or changed.

The get and set keywords can also be used to create accessor properties when creating objects

var obj = {
    get a(){
    return 1
  }
}

console.log(obj.a)   // 1
Copy the code

An accessor property, unlike a data property, executes a getter or setter function every time it is accessed. Here our getter returns 1, so obj. A gets 1 every time.

In fact, JavaScript objects run as a “collection of properties” that take a string or Symbol as a key and a data attribute or accessor attribute as a value.

An object is an index structure of attributes (an index structure is a common type of data structure, which can be understood as a dictionary that can quickly find values using keys).

Taking the object obj above as an example, imagine that “A” is key.

conclusion

In this article, I started from the basic theory of objects, clarified some basic concepts about objects, and analyzed the design ideas of JavaScript objects. Then, from a runtime perspective, I introduced the concrete design of JavaScript objects: a highly dynamic set of properties.