Several things JavaScript objects can do

Besides normal object property assignment and traversal, we can perform many other operations with Javascript objects. In this article, we’ll see how to use them, including accessing internal properties, manipulating property descriptors, and inheriting read-only properties.

1. Accessing internal properties

Internal properties of Javascript objects that cannot be accessed in the normal way. Internal property names are surrounded by square brackets [[ ]] and are available at object creation time.

Internal properties cannot be dynamically added to existing objects.

Internal properties are available on certain built-in Javascript objects that store internal state as specified by the ECMAScript specification.

There are two internal properties, a method for manipulating objects, and a method for storing data. For example:

• [[Prototype]] — prototype of the object, can be null or object

• [[Extensible]] — Indicates whether new properties are allowed to be dynamically added to the object

• [[PrivateFieldValues]] — Used to manage private class fields

2. Attribute Descriptor Object

The data attribute contains the location of a data value, which can be read and written value. That is to say, data attributes can be accessed through object.attribute, that is, what value is assigned by the user we usually contact, they will return what is, and no additional things will be done.

A data attribute has 4 characteristics that describe its behavior (in order to represent the internal value, put the attribute in two square brackets), called a descriptor object.

value descriptor is the data value of the property, for example, we have the following object:

let foo = {
   a: 1}

Then, the value attribute descriptor of a is 1.

Writable refers to whether the value of the attribute can be changed. The default value is true, indicating that the property is writable. However, we can make it non-writable in several ways.

Configurable means that the properties of the object can be deleted or its property descriptor can be changed. The default value is true, which means it is configurable.

enumerable means it can be traversed by for … in loop. The default value is true, indicating that the property can be returned through a for-in loop

Before adding the property key to the returned array, the Object.keys method also checks the enumerable descriptor. However, the Reflect.ownKeys method does not examine this property descriptor, but returns all own property keys.

Prototype descriptors have other methods, get and set are used to get and set values ​​respectively.

When creating a new object, we can use the Object.defineProperty method to set the descriptor as follows:

let foo = {
   a: 1}Object.defineProperty(foo, 'b', {
   value: 2,
   writable: true,
   enumerable: true,
   configurable: true,});

The new value of foo is {a: 1, b: 2}.
We can also use defineProperty to change the descriptor of an existing property. For example:

let foo = {
   a: 1}Object.defineProperty(foo, 'a', {
   value: 2,
   writable: false,
   enumerable: true,
   configurable: true,});

So when we try to assign a value to foo.a, such as:

foo.a = 2  ;

If strict mode is turned off, the browser will ignore it, otherwise it will throw an error, because we set writable to false, indicating that the attribute cannot be written.
We can also use defineProperty to turn a property into a getter, like this:

'use strict'let foo = {  a: 1}Object.defineProperty(foo, 'b', { get() { return 1;
   }
 })

When we write like this:

foo.b = 2;

Because of the b attribute is a getter property, so when using strict mode we get an error: Getter properties cannot be reassigned.

3. Inherited read-only properties cannot be assigned

Inherited read-only properties cannot be assigned. This makes sense since we set it this way, it’s inherited, so it should propagate to objects that inherit the property.

We can use Object.create to create an object that inherits properties from the prototype object as follows:

const proto = Object.  defineProperties({}, {
   a: {
     value: 1,
     writable: false
   }})const foo = Object.create(proto)

In the above code, we set proto.a’s writable descriptor to false, so we cannot assign another value to it.

If we write:

foo.a = 2;

In strict mode, we will Received an error message.

Summary

We can do a lot of things with Javascript objects that we may not know about.

First, some Javascript objects (such as built-in browser objects) have internal properties, surrounded by double square brackets, that have internal state that cannot be added dynamically by object creation.

Javascript object properties also have property descriptors that allow us to control their values ​​and whether they can be set, or their property descriptors can be changed, etc.

We can change the property descriptor of a property using defineProperty, it is also used to add new properties and their property descriptors.

Finally, an inherited read-only property remains read-only, which makes sense since it is inherited from the parent prototype object.

Recommended tutorial: “Javascript Tutorial”

The above are the details of several things that Javascript objects can do. For more, please pay attention to other related articles on 1024programmer.com!