Details about how to create objects in JS and how to create objects in js

Details about how to create objects in JS and how to create objects in js

This article introduces several methods for creating js objects and shares them with you for your reference. The specific content is as follows:

1. Factory Model

Disadvantages: the problem of object recognition is not solved, that is, how to know the type of an object.

2. constructor Mode

 

Compared with the factory model:
1. No explicit object Creation
2. attributes and methods are directly assigned to this object.
3. No return Statement
To create an instance of person, you must use the new operator. Calling the constructor in this way actually goes through four steps:
1. Create a new object
2. Assign the scope of the constructor to the new object.
3. Execute the code in the constructor.
4. Return the new object
You can create a custom constructor to identify its instance as a specific type.
Constructor disadvantages:
Each method is re-created on each instance. Both person1 and person2 have a sayName () method, but the two methods are not the same Function instance. Functions of the same name on different instances are not equal.
It is unnecessary to create two Function instances that have completed the same task, and there is also a this object. You do not need to bind the Function to a specific object before executing the code, as shown below.

 

Set the sayName attribute to the global sayName function. As sayName contains a pointer to the function, the person1 and person2 objects share the same function.
However, if an object needs to define many methods, many global functions need to be defined, and the custom reference types are not encapsulated. To solve the preceding problems, a prototype is introduced.

3. Prototype

Understanding prototype objects
Each function we create has a prototype attribute, which is a pointer pointing to an object, the purpose of this object is to include attributes and methods that can be shared by all instances of a specific type. Prototype is the object prototype of the object instance created by calling the constructor. The advantage of using the prototype object is that all object instances can share its attributes and methods.

 

First, the parser will ask if the instance person1 has the name attribute. If so, it will return.
If no, search for the name attribute in the prototype of person1. If yes, return.
If not, search for the prototype of person1.

 

IsPrototypeOf () determines the association between the instance and the prototype object
Console. log (Person. prototype. isPrototypeOf (person1); // true
Object. getPrototypeOf () returns the value of [[prototype]
Console. log (Object. getPrototypeOf (person1 ));
// Person {name: "Yvette", age: 26, job: "engineer"} returns the prototype object of Person.
Console. log (Object. getPrototypeOf (person1) === Person. prototype) // true
Console. log (Object. getPrototypeOf (person1). name); // "Yvette"
The hasOwnProperty () method can detect whether an attribute exists in the instance or in the prototype. true is returned only when the specified attribute exists in the instance.
Console. log (person1.hasOwnProperty ("name"); // false
Prototype And in Operator
There are two ways to use the in OPERATOR: separate use and use in the for-in loop. When used independently, the in operator returns true when a given attribute can be accessed through an object, whether in the instance or in the prototype.
With the for in loop, all the enumerated attributes that can be accessed through objects are returned, including the attributes in the instance and those in the prototype. If the attribute in the instance shields the attribute that cannot be enumerated in the prototype, it will also be returned. In versions earlier than IE9, there was a Bug in implementation. Blocking instance properties with non-enumeration properties will not be returned in for-in.

 

There is no log information in IE9. Although the toString () method in the person instance shields non-enumerated toString () in the prototype ();
Simplified prototype

 

This causes person1.constructor to point to Object instead of Person. If constructor is important, you need to set it as an appropriate value, for example:

 

However, this method causes the constructor attribute to become enumerable.
If you want to set it to unenumerable (not enumerative by default), you can use Object. defineProperty (Person. prototype, "constructor ",{
Enumerable: false,
Value: Person
});
Dynamic Prototype
Because the process of searching values in the prototype is a search, any modifications we make to the prototype object can be immediately reflected on the instance.
If you rewrite the entire prototype object, the situation will be different. When calling the constructor, a [[prototype] pointer pointing to the original prototype is added to the instance, changing the prototype to another object will cut off the relationship between the constructor and the original prototype. The pointer in the instance only points to the prototype, not the constructor.

 

Person. prototype points to the original prototype object instead of the new prototype object.
Prototype Object Problems
The biggest problem with the prototype model is its shared nature.
For attributes that contain reference type values, the problem is more prominent.

 

The intent is only to modify the friends of person1, but the friends attribute value of person2. Therefore, we seldom use the prototype separately.

4. Combined use of construction mode and prototype mode

The most common way to create a custom type is to combine the constructor mode and the prototype mode. The constructor mode is used to define instance attributes. The prototype mode is used to define methods and shared attributes, so that each instance has its own copy of instance attributes, at the same time, the reference to the method is shared, saving the memory to the maximum extent.
 

In addition to the above methods, there are also dynamic prototype models, parasitic constructor models and secure constructor models. However, given the low frequency of use, we will not repeat them here.

Articles you may be interested in:

• Create objects in JS (several common methods)
• Create an object using JavaScript
• Three methods for creating objects in JavaScript
• Summary of several common methods for creating objects in js (recommended)
• Javascript Functions, object creation, encapsulation, attributes and methods, and inheritance
• Summary of Multiple object creation methods for js object-oriented
• How to create an object using JavaScript
• Summary of several methods for creating objects in javascript
• Examples of how to create objects in js
• Summary of how js creates objects