The main purpose of this blog post is to fill in the holes. A long time ago I published an article called Everything in JavaScript Objects (I) – Object properties, and I wanted to talk about JavaScript objects, but at the time I just posted a mind map on the topic, which I will expand on today. The JavaScript object some common not commonly used knowledge system sorted out, convenient readers’ memory and understanding. After reading this post, feel free to jump back to this blog post and save your mind map to reinforce your memory.

General knowledge of objects

Before we get started, let’s instinctively recall what we know about JavaScript objects in general:

  1. Object is a reference type value;
  2. There are two ways to create objects: “literal” and “constructor”;
  3. The properties of an object can be modified at any time, and once changed, the value of the property will be changed everywhere the object is referenced (this is also a characteristic of reference types).
  4. Objects can be inherited through prototype chains;

These should be the most basic concepts JavaScript developers have for the concept of “objects”. But JavaScript actually gives developers the ability to manipulate/set objects and their properties in a much finer granularity. What are these capabilities? How to use it? That’s what we’re going to talk about.

Objects and Properties

Let’s be patient and tease out the relationship between objects and properties again: objects are collections of properties, and when the properties of objects are functions, we call them “methods.”

Let’s build mental models like this: Object is a blue (the color is particularly important here, because in fact, the variable is itself a big octopus, but her body is red 🐙) big octopus, octopus each tentacle only hold an attribute memory address card, when the object to read the attributes, octopus tentacles will follow the address of the card to get the corresponding data values, And give it back to the user (you).

Next, let’s talk about some knowledge that we may not be familiar with, from the perspective of objects and properties.

Object’s internal methods and characteristic properties

Let’s define these two terms first:

  • Internal methods are methods defined by JavaScript inside objects that cannot be accessed/modified by users.
  • Attribute attributes are used to describe the characteristics of an object/property (such as configurable? Iterable or not);

In short, JavaScript objects and properties “hide” properties and methods that we don’t use very often, and our goal is to tease them out, analyze their usage and meaning, and get a complete and clear picture of JavaScript objects.

Let’s start with the internal methods of JavaScript objects:

JavaScript objects have the following three internal methods:

  1. [[Put]]: used to create object properties, called when new object properties are created, like ordering the blue octopus to grow an antenna and hold a memory address card;
  2. [[Set]]: used to modify the value of an object attribute. Called when modifying an object attribute, this can be imagined as ordering one of the tentacles of the blue octopus to drop an existing memory address card and replace it with another.
  3. [[Delete]]: Deletes the value of an object attribute when useddeleteThe keyword is called when the object property is deleted, which can be imagined as cutting off one of the tentacles of the blue octopus (don’t worry, the blue octopus doesn’t care);

At this point we have a good illustration of what happens when you set an object property value to null, and the blue octopus still has its tentacles, just a blank card!

let obj1 = { x: null, } console.log(obj1.x) // null let obj2 = { y: } delete obj2.y console.log(obj.y) // undefinedCopy the code

Then let’s talk about the characteristic properties of the object.

Unfortunately, there aren’t as many properties to an object as properties. The first one, named [[Extensible]], is a Boolean value used to indicate whether the object itself can be modified or, in a nutshell, whether properties can be added (and, indeed, an internal [[proto]] property).

To configure this property, JavaScript gives us a special method: Object-preventextensions (), and JavaScript also provides object.isextensible () methods to check whether an Object isExtensible. Let’s see how they work:

let obj = {
    x: 1,
}

console. log(Object.isExtensible(obj))   // true

Object.preventExtensions(obj)

console.log(Object.isExtensible(obj))   // false

obj.y = 2

console.log('y' in obj)   //false
Copy the code

As you can see, from this attribute we can create a relatively conservative unextensible object. When we understand the attribute’s characteristic properties, you will see at the end of this article how we end up with a very closed object (not only unextensible, but also the property can’t be changed).

Let’s wrap things up: JavaScript objects have three internal methods and a characteristic property, which are:

  1. Built-in methods:[[Put]].[[Set]].[[Delete]];
  2. Characteristic attributes:[[Extensible]];

In the next article, we’ll take a break from combing through some of the little secrets of object properties, and then we’ll move on.