JavaScript Create Object – How to Define Objects in JS
Text Source:
#OBJECTS #DEFINE #CREATE # HOW #JAVASCRIPT #OBJECT #PRODUCTS #NAME
JavaScript Create Object – How to Define Objects in JS
Objects are the main unit of encapsulation in Object-Oriented Programming. In this article, I will describe several ways to build objects in JavaScript. They are:
First, we need to make a distinction between data structures and object-oriented objects. Data structures have public data and no behavior. That means they have no methods.
console.log(product); Objects in JavaScript are dynamic collections of key-value pairs. The key is always a string and has to be unique in the collection. The value can a primitive, an object, or even a function.
} JavaScript supports what is called the shorthand property names. It allows us to create an object using just the name of the variable. It will create a property with the same name. The next object literal is equivalent to the previous one.
JavaScript has what is called the prototype system that allows sharing behavior between objects. The main idea is to create an object called the prototype with a common behavior and then use it when creating new objects.
Let’s create a prototype object that allows us to add products and get the total price from a shopping cart.
} Notice that this time the value of the property addProduct is a function. We can also write the previous object using a shorter form called the shorthand method syntax.
} The cartPrototype is the prototype object that keeps the common behavior represented by two methods, addProduct and getTotalPrice. It can be used to build other objects inheriting this behavior.
//3 The cart object has cartPrototype as its prototype. It inherits the behavior from it. cart has a hidden property that points to the prototype object.
When we use a method on an object, that method is first searched on the object itself rather than on its prototype.
Remember that functions are independent units of behavior in JavaScript. They are not necessarily part of an object. When they are, we need to have a reference that allows the function to access other members on the same object. this is the function context. It gives access to other properties.
You may wonder why we haven’t defined and initialized the products property on the prototype object itself.
We shouldn't do that. Prototypes should be used to share behavior, not data. Sharing data will lead to having the same products on several cart objects. Consider the code below:
//3 Both the cart1 and cart2 objects inheriting the common behavior from the cartPrototype also share the same data. We don’t want that. Prototypes should be used to share behavior, not data.
The prototype system is not a common way of building objects. Developers are more familiar with building objects out of classes.
The class syntax allows a more familiar way of creating objects sharing a common behavior. It still creates the same prototype behind the scene but the syntax is clearer and we also avoid the previous data-related issue. The class offers a specific place to define the data distinct for each object.
//0 Notice that the class has a constructor method that initialized that data distinct for each new object. The data in the constructor is not shared between instances. In order to create a new instance, we use the new keyword.
I think the class syntax is more clear and familiar to most developers. Nevertheless, it does a similar thing, it creates a prototype with all the methods and uses it to define new objects. The prototype can be accessed with Cart.prototype.
It turns out that the prototype system is flexible enough to allow the class syntax. So the class system can be simulated using the prototype system.
Private properties are declared with #name syntax. # is a part of the property name itself and should be used for declaring and accessing the property. Here is an example of declaring products as a private property:
//Uncaught SyntaxError: Private field '#products' must be declared in an enclosing class Factory Functions
Closure is the ability of a function to access variables and parameters from the other function even after the outer function has executed. Take a look at the cart object built with what is called a factory function.
//3 addProduct and getTotalPrice are two inner functions accessing the variable products from their parent. They have access to the products variable event after the parent Cart has executed. addProduct and getTotalPrice are two closures sharing the same private variable.
The new object cart created with the factory function has the products variable private. It cannot be accessed from the outside.
//undefined Factory functions don’t need the new keyword but you can use it if you want. It will return the same object no matter if you use it or not.
Usually, we work with two types of objects, data structures that have public data and no behavior and object-oriented objects that have priva…
Nesta página do site você pode assistir ao vídeo on-line JavaScript Create Object – How to Define Objects in JS duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário How4Pc mac10 07 Agosto 2020, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 2 vezes e gostou 0 espectadores. Boa visualização!
