JavaScript object

JavaScript series

This chapter introduces objects in JavaScript.

A. Object

1. Overview

Well, about objects you probably already know about the concept of objects. Objects represent an entity, including the information contained in properties and having behaviors that are methods. So is the Object in JS.

The properties of OOP are not as obvious as some other languages, such as Java.

2. Creating object

There are many ways to create an object in JS:

• Create single object with object literal (initializer)
• Create object with new and Object constructor
• Create the object with a custom constructor
• Create from class

From ES5, you can use the Object.create() method to create objects.

Object literal

This is the simplest and most obvious way to create objects. The downside is that it only creates a single object, so if you want to create multiple objects at the same time, you need to use another way.

Note the two ways of writing above, short way 1 for small and simple objects. Option 2 is longer but clear and suitable for complex objects. And notice how I put the space in the lines.

New keyword & Object constructor

This method uses the new keyword and the Object constructor. First line 1 only creates an empty object, and then you add the properties by assigning a value to it.

Define a constructor

This is similar to the above, but we use custom constructors instead of Objects. The constructor is just a normal function, assigns a value to this, and is called by new keyword.

This way before JS has many classes used, because it can create many similar objects.

Instantiate from class

ES6 adds class keywords, so it is possible to initialize multiple objects from a defined class. This is similar in other languages ​​so it’s easier to get used to.

The class section will be discussed further in the next sections.

Object.create ()

Object.create() is a great method to create objects when you want to select prototypes for objects to create.

3. Display object

Sometimes when we want to see all the values ​​of an object, we can use some of the following methods.

• Displays a property
• Use the for in loop to display all of their properties and values
• Use the Object.keys() or Object.values() methods to get all the keys or Object.keys() of an array object.
• Use the toString() or JSON.stringify() .
• Export using console.log() .

However, in this section I want to introduce to you the console.table() method that will display the entire object as a table in the console very convenient. The downside is that the methods will not show up in the table, so it is suitable for when you want to quickly see data in an object.

B. Property & method

1. Property

Property is the place to store data for the object, each attribute is a key: value pair. The key and value attribute names are separated by colons, and between properties separated by commas.

In JS, methods are also considered attributes, as above.

Special attribute names can contain spaces, so use enclosed quotation marks.

Access property

There are two ways to access an attribute, that is, to read its value or to change its value.

Method 1 uses the object.property syntax more object.property used.

Method 2 uses the access method as an object["property"] array, where property is the name of the property. Option 2 is usually used when the property name has spaces, or access the computed name property.

Add, delete property

To add properties to an object, simply assign a value to it.

To delete attributes, use the delete operator.

Note that adding and deleting properties can be blocked because the object does not allow them (the following sections will discuss). In strict mode, delete is prohibited. And should limit adding or removing object properties.

For in loop

To browse properties, use the for in loop.

The prop variable will iterate over each property name in turn, and use john[prop] to get the value the property is pointing to. Note that you must use john[prop] , not john.prop , because the prop here is not a fixed attribute.

Property attributes

Attributes in JS have three special properties:

• Writable: allows to change properties or not
• Enumerable: allows attributes to be found using a for in loop or methods like Object.keys or Object.values .
• Configurable: allows to configure properties, meaning that parameters such as writable and enumerable can be changed. Only configurable attributes can be deleted by the delete operator.

All properties in JS can be read, so for security, you should use closure instead.

2. Method

Methods are functions inside the object, and methods are also properties whose value is an anonymous function.

The two methods above declare two different ways. Method 1 is the old method before, and method 2 is a more streamlined method introduced from ES6.

This keyword

In the method, this keyword points to the owner of the method, which is the object that contains it. Therefore, we can call other methods and properties inside the same object thanks to this .

Exception when calling method by call() or apply() . Then this will be the first argument (as an object) when calling call() , apply() .

Add method

To add a method, similar to adding an attribute, simply assign a value as an anonymous function to it.

Delete method

The methods of the object cannot be deleted.

C. Accessor, constructor & prototype

1. Accessor

Getter & setter

Since ES5 has introduced getter and setter, so that instead of directly accessing the property, it must be through an accessor (access object). Using accessor is similar to property, difference in the way they work:

• The normal property reads and writes directly to the property.
• Accessor uses getter to read and setter to write whenever there is a request to the attribute. Setter and getter are functions, you can write code for it so that they process the data before taking it out (getter) or writing to property (setter).

The _name attribute is the real property, where name is the accessor created by get name() and set name() . Here I write the actual attribute with underscore _ in front.

When reading and writing on the accessor, depending on the action (read or write), the getter (read) or setter (write) will be called accordingly.

An attribute may not have a getter, a setter, either or both.

Structure getter, setter

Getter has a method structure, no parameters and returns a value.

Setter is a method that accepts a value, and does not return any value.

The name of the method in getter and setter is the accessor name must be the same, to point to the same accessor. And the accessor name is used as the usual property name.

Why use accessor

Some reasons to use accessor are as follows:

• The syntax is simple and the same between property and method
• Make sure the data flow in and out of the object is valid and standard
• Help to perform other operations in the background when accessing properties

Accessor for property is available

You can define an accessor for an existing property without modifying that object code using the Object.defineProperty() method.

The above method takes three parameters. Parameter 1 is the specified object, parameter 2 is the attribute name. Parameter 3 is an object representing the attribute.

The syntax for specifying the getter setter of the above method is slightly different from the definition directly in the object. It is understandable that parameter 3 of Object.defineProperty() is a configuration object, there are two methods: get() and set() representing getter and setter, so it doesn’t have a name but get and set are the names themselves. .

This method will be discussed in more detail in the following sections.

2. Constructor

Constructor is just a function to create object, and is called with new keyword. Constructor uses the keyword this represents the object to create, this will be automatically returned outside the constructor to a new object.

With constructors, it is possible to create many objects of the same structure quickly, although the values ​​in them may be different.

Constructors usually accept parameters that correspond to properties of an object, and are assigned to this as above.

Attention should use the constructor properly with its function. Do not call the function with new, nor call the constructor as the normal function (without new).

This keyword

Depending on the function call, this is normally the owner of the function (object window or object containing method). If the function call has the keyword new, then the function becomes a constructor, then this has a different meaning.

This in the constructor is a temporary object, when the constructor is done, the temporary object will be created and assigned a reference to an object variable.

Add property, method in constructor

Add as normal object, but use this for the object, not the constructor itself.

Type constructors

Data types have built-in constructors, for example, objects have Object() , strings have String() , similar to Number() , Boolean() , … including primitive types.

Although it is possible to create a primitive type with new, it should not be used because of many limitations.

3. Prototype

JS before ES6 had no class concept, so the implementation of inheritance between objects must go through the prototype. It is understandable that if two objects have the same prototype, they will have the same properties and methods of that prototype.

Prototype is usually in constructor, then every object created from this constructor will share the prototype members.

Every object has an attribute named __proto__ , which contains the properties and methods included in its prototype.

Add properties to the prototype similar to the object. Usually, the prototype only contains a method but rarely has a property.

Note that when changing, adding properties to the __proto__ property of any object will affect all other objects that use the same prototype (or constructor).

D. Object constructor

Object in JS is a constructor used to create objects. Besides, it also contains some properties and processing methods for all objects, such as.

Object object handling methods are used as above, similar to the examples of static methods.

1. Object properties

Only two properties of Object are length and prototype .

The length property always returns 1, and the prototype allows adding additional members to objects created from Object.

2. Object methods

All methods of an Object take a parameter of an object.

Object.create method

Create a new object with the prototype of another specified object. Details mentioned above.

Object.keys & Object.values ​​method

Method Object.keys() returns an array of attribute names (also called keys because the attribute has name: value, corresponding to key: value).

If the method does not pass an object but receives a string or an array, then the key list is in the form 1, 2, 3, … (because strings and arrays index each element, the key will be the index).

The Object.values() method is similar, but it returns the value of the attribute instead of the key.

Object.getOwnPropertyNames method

The Object.getOwnPropertyNames() method is similar to Object.keys() , which takes an array of attribute names (key or property name). Or there is another way is to use the for in loop to loop through all properties.

The difference is that Object.getOwnPropertyNames() retrieves both the enumerable and false attributes, while the Object.keys() and for in not find non-enumerable properties.

Object.seal & Object.freeze method

The Object.seal() method prevents the deletion of object properties. Nor does the Object.freeze() method allow deletion, nor does it allow changing the value of any attribute in the object.

There are two other methods to check: Object.isSealed() to check whether the object is sealed, and Obect.isFrozen() to check the object’s freeze status.

Object.preventExtensions & Object.isExtensible

Method Object.preventExtensions() does not allow adding properties and methods to methods.

And use the Object.isExtensible() method to check if the object can add properties and methods. If we used Object.preventExtensions() above, then Object.isExtensible() is false.

Object, is method

Use the Object.is() method to check if the two values ​​are the same:

• Both have the same value, undefined, null, or true, or false, or the same string.
• For an object (including an array), the method returns true when both have the same memory address (or reference to the same object).
• For numbers, it must be the same, for example +0 and -0 are different, Number.NaN and NaN are the same, Number.POSITIVE_INFINITY and Infinity are the same.

In general, Object.is() and the two comparisons == and === quite similar, but Object.is() is more similar to === . For example.

The difference between the === operator and the Object.is() method is that they compare numbers, as in the third heading above. See the following example.