A visit to a web resource is a specific URI in the address bar of the browser. The visitor specifies the address of the page, and it is parsed by the browser into elements of the DOM tree - Document Object Model. Any link on that page tells the browser to parse another page and build another tree of objects.

The browser allows the visitor to go back or go forward through the chain of pages that have already been viewed in the current session.

In fact, user actions are moving between systems of objects formed in the process of visiting pages. Each page is its own DOM tree and, in addition, JavaScript object "s are objects of the syntax of the language itself and custom descriptions.

DOM: loading, updating and modifying

There are three main options that form the objects of the web resource page, both at the DOM level and the JavaScript language itself, which performed the constructs for creating variables, and based on the descriptions made by the developer:

loading - the visitor came to the site page;
update - visitor (browser button or Ctrl-F5);
changing a page element, for example (AJAX, script, event, ...).

All three processes are radically different, but it is especially important to distinguish the features of the first two. It is difficult to prevent a visitor from refreshing the page - this is an ineradicable visitor addiction that a developer should keep in mind.

Navigation around the page and beyond should lie solely in the functionality of the page itself, and not in the history of browser visits and the functions of its buttons. Many sites declare this important requirement, but visitors traditionally violate it.

Changing the page without reloading at the level of its individual element (for example, AJAX) is a common solution for dynamic pages. As a rule, this is used to navigate through the elements of the page, change its objects, control the dialogue with the visitor.

Fundamental JavaScript Objects

JavaScript is based on objects. Almost all language variables are objects. The developer can formulate his own object descriptions using a variety of syntax options.

Anything that is not a "string", "number", true, false, , or undefined is an object. Within the framework of the syntax of the language, this can be ignored, understanding by objects only DOM elements and JavaScript Object's own descriptions. The fundamental structure of the language in most cases for the developer has no significant practical meaning.

For example, mathematical functions are represented by the Math object. This is convenient within the framework of the concept of the language, but for the developer it is just a convenient syntax for using the necessary arsenal of mathematical operations.

It is important to work with the DOM correctly and correctly describe your own objects. The syntax of JavaScript object function "s and expressions for applying them is a form of writing the logic of the required algorithm.

Strings, Arrays and Objects

All JavaScript objects are based on the rule "property" \u003d "value" and the concept of an associative array. In its simplest case, object JavaScript is a collection of property \u003d value pairs. In this case, the "value" may not always be a number, and the property is not always written without quotes.

Do not overuse property naming. Ideally, when property names contain only Latin characters, satisfy the requirements for naming variables, and are not key (including reserved) words of the language.

No property ordering is expected, but when creating or initializing an associative array, knowing how its elements are arranged is perfectly acceptable. It is not recommended to use this circumstance, but it is possible to keep in mind.

To initialize an array of properties means at the same time:

creating an array;
object creation.

In a specific application context, you can consider a JavaScript object as an associative array, and elsewhere in the algorithm as an object, assign the necessary methods to it, and change the values \u200b\u200bof its elements.

Since property names and their values \u200b\u200bmust be specified in string format when created or modified, it is recommended that you use lowercase notation and quotation marks.

Accessing object properties

You can get and change the values \u200b\u200bof object properties with the Object.keys construction: JavaScript forms an array of all object properties. When objects are dynamically created, this construct is very convenient, because it automatically generates a list of all the properties in the object.

In this example, the description of the two arrays is different. In use, both arrays are equivalent, since they contain properties of the same name and their values. The loop iterates over all the properties of the second array and forms a string of all values.

A similar effect can be achieved with dot notation or bracket notation:

x1_Obj .NameLast;
x1_Obj ["NameFirst"].

Both constructions are valid and give the desired result. In the above example, when specifying an array through curly braces "()", an error may be made in the form of the "," symbol at the end of the enumeration (marked in the example with a red circle). Browsers usually ignore the extra character in the enumeration, but it's best not to.

Removing object properties

Since an object is an associative array, the operation JavaScript delete object is executed at the level of the current object (in case of inheritance - it matters) and viewed on the collection of properties of this object.

In the context of the given example, you can use the following constructions:

delete x1_Obj .NameLast;
delete x2_Obj ["NameFirst"];

The first construct removes the second element of the first object, the second construct removes the first element of the second object. The delete operator does not work on prototype properties and returns false if the property cannot be deleted.

Object properties and methods

The syntax of JavaScript object properties and functions (methods) is similar to the general canons of syntax and semantics of the language. In fact, the opposite is true.

Object properties and methods are a variant of describing information and actions allowed with it through the object-oriented JavaScript paradigm.

This example describes the x3_Obj object, which has only two properties: item and pos. Then the hello () method was added as a function. As a result, JavaScript object values \u200b\u200bwill interpret this description in the context of property values \u200b\u200bas shown in the result window, that is, it will place the body of the function (1) as a value.

When the Hello () property is called directly, it is interpreted as a method (function) and the result (2) will be the execution of this method's code.

The this keyword in an object

For orientation in the property space of an object, a developer can use keyword this and refer through it to the properties it describes to get or change their values.

This is just the beginning of describing an object with only a constructor body. This example describes a cookie object. The object is initialized at the time the page is loaded with the construction:

var oCookie \u003d new scCookies (cOwnerCode);
oCookie .Init ();

In this example, cOwnerCode - unique code visitor. If not, then new code will be generated in the constructor of the oCookie object. It doesn't matter what the developer of the object meant by the authorization of the visitor, it is important how the this keyword is used here to describe the object's methods and call them from other methods of the object:

this .GetCookie \u003d function (cName) (...);
this .SetCookie \u003d function (cName, cValue) (...).

This is how the object's methods are described for reading a cookie by its name and writing the value of a cookie with a specific name.

this .GetCookie ("cOwner");
this .SetCookie ("cOwner", cOwner);

So they are used, if as a result of the first construction the value will not be presented, then the second construction sets it.

Example of a cookie object

One can discuss Object's and the object-oriented paradigm of a language that runs in a browser environment. This is interesting, but the reality is practice, not theory. Serving the DOM of a page, providing a toolkit for manipulating objects and navigating object systems is strong point JavaScript.

In object-oriented practice, something else is important. Working with cookies on almost all web resources is in the order of things. Implementing this in an object format is a great idea. In this context, the initialization of the object occurs at the moment the page is opened: the page is loaded \u003d the cookie object exists and has read everything, and what was not - created.

In the process of working with the page, the visitor performs certain actions and the browser must change or create cookies. There are two object methods (outlined above) that do this.

In fact, the cookie object appears immediately after the browser builds the DOM and adds new functionality to the JavaScript object system: read and create (modify) the cookie.

On this simple example is considered as a procedure for creating real objects that have exclusively their own properties and functionality (methods). Each object does its job and does not participate in the general algorithm, does not change the data of other objects or the general namespace.

With this approach, the developer ensures the creation of a system of unique objects sufficient to describe and maintain the problem being solved.

Page and Object Events

An important element of the functioning of the DOM and JavaScript: object event "s - allows you to get information about an event in its handler. Almost every element of the page can be assigned its own handler for one or more events.

In fact, a JavaScript developer does not create one large "piece" of code, but many descriptions of functions, objects, data structures and assigns event handlers to specific page elements.

Object event is information about the event that caused the handler and the ability of this handler to perform an adequate response to this event. Each event differs not only in name and place of occurrence, but also in many other parameters.

In particular, keyboard events are one set of parameters, mouse events are a completely different range of data, and the server response via AJAX is completely planned by the developer himself.

In each specific case, the picture of events that may occur on the page is transformed into a range of included handlers; outside of the provided options for handling a specific set of events, the page does not take any action.

Object creation and operation

The browser "transforms" the URI, the address of the web resource specified by the visitor, into a DOM tree - the system of page objects of this web resource. When a visitor moves through the links on a page, the browser navigates to the corresponding trees of other pages.

This circumstance allows the developer to build his system of objects as the foundation of a web resource that adequately responds to the behavior of the visitor. If we single out the general functionality, for example:

work with cookies;
receiving / transmitting data (AJAX);
pop-up tips;
internal messages (site chat);
other tasks;

then, once created, object systems can be used to develop other sites. This is a significant advantage of the object approach over the usual use of JavaScript, as the browser language that provides the functioning of the page and the reaction to events.

Objects are complete components that can be styled as individual files and use in the future. A characteristic feature of this approach is the possibility of feedback, when an updated, improved object can be used in a previous development, automatically updating its functionality without modifying the site.

The task :

1. There are three objects (three cars): first_Car, second_Car and third_Car.

2. Each of the objects (cars) has a set of properties and their corresponding values (vehicle characteristics).

3. Consider one of the objects:

var first_Car \u003d (
make: "VAZ",/ * manufacturer * /
model: 2106, / * model * /
year: 1980,/* year of issue */
color: "beige",/* Colour */
passengers: 5,/ * number of passengers * /
convertible: false,/ * convertible top * /
mileage: 80000/* mileage */
}

Properties make and color have string values;

Properties model, year, passengers and mileage - numerical values;

Property convertible takes a boolean value.

You need to do the following:

Write a function that checks the car by two parameters (year of manufacture and mileage) and returns a boolean value true or false.

Details:

1. The function has one parameter car, in the capacity of which it receives one of the 3 objects. For example, the car discussed above first_Car.

2. The function should work with any similar object.

Function for checking an object - true or false

Comments on the solution:

So, we have three objects (three cars), each of which can be analyzed using the function good_Car.
Function good_Carhas one parameter car, which can be any of the objects (cars): first_Car, second_Car or third_Car: function good_Car (car) .
In Body Functions good_Cara condition has been drawn up according to which:
If the property value year object car less than 2000 (in other words: if the vehicle is manufactured in less than 2,000 years), then the function returns false;
Otherwise, if the property value mileage object car more than 50,000 (if the mileage of the car is more than 50,000), then the function returns false;
Otherwise, the function returns true.
Next, we call the function and specify the object as a parameter third_Car(third car)that successfully passes the test. The result of the function is stored in a variable result:
var result \u003d good_Car (third_Car); .
Variable result displayed on the screen;
Two other objects (car) will not meet the conditions.

Optimizing your code

Let's continue work with objects in javascript.

So, the above function when checking objects (cars) gives as a result true or false (true or false).

You can slightly improve the quality of perception of the solution of the considered problem, that is, instead of true or false display any text. To do this, we will create a condition for analyzing the result.

Result Conditional Solution - Result ...

The condition for analyzing the result is composed as follows.

Expression if (result) is a shorthand form of expression
if (result \u003d\u003d true) .
If the result of the function good_Car is true true, then we display the phrase: “You have a good car: 2012 year of manufacture, with mileage 15000 km. ", where
2012 and 15000 are property values year and mileage object third_Car.
If the condition for checking the result will return a false value false, then we will see: "We will not talk about your car ....". That is, the object in question (car) failed verification.

Code Optimization - Going Further - Adding a Function

But that's not all. Look carefully at the code snippet for calling the function and analyzing the result:

/ * Calling the function and Analyzing the result * /
var result \u003d good_Car ( third_Car );

if (result) (
document.write ("You have a nice car:" + third_Car .year + "year of manufacture, with mileage" + third_Car .mileage + "km.");
}
else (
document.write ("Let's not talk about your car ....");
}

Here the object third_Car (third car) is indicated three times:

First time calling a function good_Car it is specified as its parameter: good_Car (third_Car) .
And then it appears twice more when we refer to it to indicate its properties: third_Car.year and third_Car.mileage .

I didn't like this, because when analyzing another object (car) we'll have his name too indicate three times!!!

To achieve a one-time indication of the analyzed object, you also need the result of the function good_Car and analysis of this result (that is, the whole) add to another function.

Solution using one more function - Result ...

You have a nice car: 2012, with 15,000 km mileage.

Last update: 08.04.2018

Object-oriented programming is one of the dominant paradigms in application development today, and in JavaScript we can also take full advantage of OOP. At the same time, object-oriented programming has some peculiarities in relation to JavaScript.

Objects

In previous topics, we worked with primitive data - numbers, strings, but data does not always represent primitive types. For example, if in our program we need to describe the essence of a person who has a name, age, gender, and so on, then naturally we will not be able to represent the essence of a person in the form of a number or a string. We need a few lines or numbers to properly describe the person. In this regard, a person will act as a complex complex structure, which will have separate properties - age, height, name, surname, etc.

JavaScript uses objects to work with such structures. Each object can store properties that describe its state and methods that describe its behavior.

Creating a new object

There are several ways to create a new object.

The first way is to use the Object constructor:

Var user \u003d new Object ();

In this case, the object is named user. It is defined just like any regular variable using the var keyword.

The new Object () expression represents a call to a constructor, a function that creates a new object. The new operator is used to call the constructor. Calling a constructor is actually like calling a regular function.

The second way to create an object is using curly braces:

Var user \u003d ();

Today, the second method is more common.

Object properties

After creating an object, we can define properties in it. To define a property, you need to specify the property name after the object name separated by a dot and assign a value to it:

Var user \u003d (); user.name \u003d "Tom"; user.age \u003d 26;

In this case, two properties, name and age, are declared and assigned corresponding values. After that we can use these properties, for example, display their values \u200b\u200bin the console:

Console.log (user.name); console.log (user.age);

You can also define properties when defining an object:

Var user \u003d (name: "Tom", age: 26);

In this case, a colon is used to assign a value to the property, and a comma (rather than a semicolon) is used after the property definition.

In addition, a shorthand way of defining properties is available:

Var name \u003d "Tom"; var age \u003d 34; var user \u003d (name, age); console.log (user.name); // Tom console.log (user.age); // 34

In this case, the names of the variables are also the names of the properties of the object. And this way you can create more complex structures:

Var name \u003d "Tom"; var age \u003d 34; var user \u003d (name, age); var teacher \u003d (user, course: "JavaScript"); console.log (teacher.user); // (name: "Tom", age: 34) console.log (teacher.course); // JavaScript

Object methods

An object's methods define its behavior or the actions it performs. Methods are functions. For example, let's define a method that would display the name and age of a person:

Var user \u003d (); user.name \u003d "Tom"; user.age \u003d 26; user.display \u003d function () (console.log (user.name); console.log (user.age);); // call the user.display () method;

As with functions, methods are first defined and then called.

Also, methods can be defined directly when defining an object:

Var user \u003d (name: "Tom", age: 26, display: function () (console.log (this.name); console.log (this.age);));

As with properties, a method is assigned a function reference using a colon character.

To refer to properties or methods of an object within that object, use the this keyword. It means a reference to the current object.

You can also use a shorthand way of defining methods, when the colon and the word function are omitted:

Var user \u003d (name: "Tom", age: 26, display () (console.log (this.name, this.age);), move (place) (console.log (this.name, "goes to" , place);)); user.display (); // Tom 26 user.move ("the shop"); // Tom goes to the shop

Array syntax

There is also an alternative way to define properties and methods using the array syntax:

Var user \u003d (); user ["name"] \u003d "Tom"; user ["age"] \u003d 26; user ["display"] \u003d function () (console.log (user.name); console.log (user.age);); // call the method user ["display"] ();

Each property or method name is enclosed in quotation marks and in square brackets, and then assigned a value as well. For example, user ["age"] \u003d 26.

When referring to these properties and methods, you can use either dot notation (user.name), or you can refer to this: user ["name"]

Strings as properties and methods

It should also be noted that the names of properties and methods of an object are always strings. That is, we could rewrite the previous definition of an object as follows:

Var user \u003d ("name": "Tom", "age": 26, "display": function () (console.log (user.name); console.log (user.age);)); // call the user.display () method;

On the one hand, there is no difference between the two definitions. On the other hand, there are cases where string wrapping can help. For example, if a property name consists of two words separated by a space:

Var user \u003d (name: "Tom", age: 26, "full name": "Tom Johns", "display info": function () (console.log (user.name); console.log (user.age) ;)); console.log (user ["full name"]); user ["display info"] ();

Only in this case, to refer to such properties and methods, we must use the syntax of arrays.

Removing properties

Above, we saw how you can dynamically add new properties to an object. However, we can also delete properties and methods using the delete operator. And just like adding, we can remove properties in two ways. The first way is to use dot notation:

Delete object.property

Or use the syntax of arrays:

Delete object ["property"]

For example, let's remove the property:

Var user \u003d (); user.name \u003d "Tom"; user.age \u003d 26; user.display \u003d function () (console.log (user.name); console.log (user.age);); console.log (user.name); // Tom delete user.name; // delete the property // alternative option // delete user ["name"]; console.log (user.name); // undefined

After deletion, the property will be undefined, so when you try to access it, the program will return undefined.

In this article, I want to talk as fully and consistently as possible about what an object is in JavaScript, what its capabilities are, what relationships can be built between objects and what methods of "native" inheritance follow from this, how this all affects performance and what do it all :)

The article will NOT say a word about: emulation of the traditional class-object paradigm, syntactic sugar, wrappers and frameworks.

The complexity of the material will grow from the beginning to the end of the article, so for the pros the first parts may seem boring and trivial, but further it will be much more interesting :)

Objects in JavaScript

Many articles contain the phrase "In JavaScript, everything is an object." Technically, this is not entirely true, but it makes the right impression on beginners :)

Indeed, much in a language is an object, and even that which is not an object may have some of its capabilities.

It is important to understand that the word "object" is not used here in the sense of "an object of a certain class." An object in JavaScript is primarily just a collection of properties (if it's easier for anyone, you can call it an associative array or a list), consisting of key-value pairs. Moreover, the key can only be a string (even for array elements), but the value can be any data type listed below.

So there are 6 in JavaScript basic types data are Undefined (denoting no value), Null, Boolean (boolean), String (string), Number (number), and Object (object).
Moreover, the first 5 are primitive data types, but Object is not. In addition, we can conventionally assume that the Object type has "subtypes": an array (Array), a function (Function), a regular expression (RegExp) and others.
This is a somewhat simplified description, but in practice it is usually sufficient.

In addition, the primitive types String, Number, and Boolean are associated in some way with the non-primitive "subtypes" of Object: String, Number, and Boolean, respectively.
This means that the string "Hello, world", for example, can be created as both a primitive value and a String object.
In short, this is done so that the programmer can use methods and properties when working with primitive values \u200b\u200bas if they were objects. You can read more about this in the corresponding section of this article.

Work by reference

A link is a means of accessing an object under various names. Working with any objects is carried out exclusively by reference.
Let's demonstrate this with an example:

test \u003d function () (alert ("Hello!")) // Create a function (alert ("Hello!")) (And the function, as we remember, is a full-fledged object) and make the test variable a reference to it
test_link \u003d test; // test_link now also refers to our function
test (); // Hello!
test_link (); // Hello!

As we can see, both the first link and the second give the same result.
It is necessary to realize that we do not have any function named test, and that the test variable is not some kind of "main" or "main" link, and "test_link" is a minor one.

Our function, like any other object, is just an area in memory, and all references to this area are absolutely equivalent. Moreover, the object may not have any references at all - in this case, it is called anonymous, and can only be used immediately after creation (for example, passed to a function), otherwise it will be impossible to access it and soon it will be destroyed by the garbage collector (garbage collection), which is what deletes objects without references.

Let's see why it is so important to understand this:

test \u003d (prop: "sometext") // Create object with prop property
test_link \u003d test; // Create another link to this object
Alert (test.prop); // sometext
// Change the property of the object
test_link.prop \u003d "newtext";
Alert (test.prop); // newtext
alert (test_link.prop); // newtext
/ * One could say that the property has changed here and there - but it is not.
The object is one. So the property has changed once in it, and the links just keep pointing where they are pointing. * /
// Add a new property and remove the old one
test.new_prop \u003d "hello";
delete test.prop;
Alert (test_link.prop); // undefined - this property no longer exists
alert (test_link.new_prop);
// Remove the link
delete test;
alert (test.new_prop);
/ * At this point, the script will throw an error, because test no longer exists, and test.new_prop does not exist all the more * /
alert (test_link.new_prop); // hello
/ * but here everything is in order, because we did not delete the object itself, but only a link to it. Now our object is pointed to by a single link test_link * /
// Create a new object
test \u003d test_link; // First, create the test link again
test_link \u003d (prop: "sometext") // And here is the new object
Alert (test_link.prop); // sometext
alert (test.prop); // undefined
/ * Creating a new object breaks the link, and now test and test_link point to different objects.
In fact, this is tantamount to removing the test_link and re-creating it, but already pointing to another object * /
alert (test.new_prop); // hello - now test contains a link to our very first object

* This source code was highlighted with Source Code Highlighter.

This behavior of objects often raises a lot of questions for novice developers, so I hope this text will bring some clarity. If we want to create a truly new, independent copy of the object, and not a link, then the only way to do this is to create a new object and copy the required properties there.

It is also worth noting that working with objects by reference, in addition to the above-mentioned funny effects, also provides significant memory savings, which is important when one object is widely used in various places in the program.

Primitive values

As I mentioned above, the String and Number data types can be both objects and primitive values.

obj \u003d new String ("hello"); // Create string as object
simple \u003d "hello"; // Create a primitive value
Alert (obj); // hello
alert (simple); // hello - so far everything is predictable
Alert (obj.length); // 6 - an object of type String has a length property that stores the length of the string
alert (simple.length); // 6
/ * Although simple is not an object, we can access the same set of properties as a String object. It's pretty handy * /
Obj.prop \u003d "text";
simple.prop \u003d "text";
Alert (obj.prop); // text - since obj is an ordinary object, then we can easily give it one more property
alert (simple.prop); // undefined - but simple is not an object, and this number will not work for us
* This source code was highlighted with Source Code Highlighter.

The same is true for both Number and Boolean (well, except that they don't have a length property, but there are a number of other great properties).
Using strings and numbers as objects is of no practical use. primitive values \u200b\u200bare more convenient to work with, but at the same time retain all the necessary functionality. However, it is necessary to understand this mechanism to complete the picture.

Do not confuse the use of primitive values \u200b\u200bwith the use of literals - for example, regardless of whether we create an array as "test \u003d new Array ()" or as "test \u003d", the result will still be the same object. We will not get any primitive values.

Creating and using objects

So, unlike languages \u200b\u200bwhere the class-object paradigm is implemented, we do not need to create a class first, then create an object of the class. We can immediately create an object, which we will do in the following example:

test \u003d (
simple_property: "Hello",
object_property: (
user_1: "Petya",
user_2: "Vasya"
},
function_property: function (user) (
alert (this .simple_property + "," + this .object_property);
}
}
Test.function_property ("user_1"); // Hello, Petya.
* This source code was highlighted with Source Code Highlighter.

Before us is the test object, which has 3 properties, the names of which, I hope, speak for themselves. What interests us most about it is the function_property property, which contains the function. Such a function can be called a method of an object.

Our function uses the this keyword twice, which is a pointer (i.e., a reference) to the object from which the function is called. Thus, this.simple_property \u003d test.simple_property \u003d "Hello", and this.object_property \u003d test.object_property \u003d "Petya".

It should be clearly understood that this always refers to the object from which the function is called, and not to the object to which it belongs. Although in this example it is the same object, this is not always the case.

test.function_property ("user_1"); // Hello, Petya.
Test2 \u003d new Object (); // Another form of creating a new object, similar to test2 \u003d ()
Test.function_property.call (test2, "user_1"); //mistake
/ * The call method allows you to call a function on behalf of another object. In this case, we call the function_property method of the test object, and its this points no longer to the test object, but to the test2 object. And since there is no object_property property in it, then when trying to get this.object_property, the script will give an error * /
// try to fix the situation
test2.simple_property \u003d "Good day";
test2.object_property \u003d test.object_property; // In this case, we will use the object by reference, so as not to duplicate the code
Test.function_property.call (test2, "user_1"); // Good day, Petya.

* This source code was highlighted with Source Code Highlighter.

It should also be clear from the example that there are no clear steps for creating and using an object. The object can be modified in any way at any time - before, after and even during use. This is also an important difference from "traditional" OOP.

Constructor

In the example above, we created 2 objects that have some similarities. Both simple_property and object_property properties were there. Obviously, when writing real code, the task of creating identical or just similar objects often arises. And of course, we do not have to create every such object manually.

A constructor will come to our aid. A constructor in JavaScript is not part of a class (because there are no classes), but just a function on its own. The most common function.

make_me \u003d function (_name) (
alert ("I was launched");
this .name \u003d _name;

}

/ * Let's see what's going on here. The interpreter sees the new operator and checks what is to the right of it. Because make_me is a function, and it can be used as a constructor, then a new object is created in memory and the make_me function is executed, and its this points to this new object. Next, this object is added the name property, which is assigned the value from the _name argument, and the show_name method. Also (I don’t know at what exact moment, but it doesn’t matter) the child variable starts to point to our new, just-born object * /
Alert (child.name); //Vasya
child.show_name (); //Vasya

child2.show_name (); //Peter
Child2.show_name \u003d function () (alert ( "I won't say my name");} // Do not forget that we can change our objects at any time
child2.show_name (); // I won't say my name
Child.show_name (); // Vasya - children do not influence each other in any way

* This source code was highlighted with Source Code Highlighter.

You can also compare the constructor with a father - he gives birth to a child, endowing him with certain qualities, but immediately after creation, the child becomes completely independent from the parent and can become very different from his brothers.

If we recall the description of data types at the beginning of the article, then it becomes clear that Object and its subtypes (Function, Array and others) are actually constructors that give the created object the capabilities of a function, array, etc.

So this is much better. We now have the ability to create objects according to a certain pattern. However, not all is well. First, each object we create and all of its properties and methods take a separate place in memory, although in many ways they are repeated. Secondly, what if we want to keep the connection between parent and child, and be able to change all child objects at once. A prototype will come to our aid.

Prototype

Just like every child has a father and mother (at least in a biological sense), so does every object in JavaScript. And if the father, as we decided, works as a designer, then the mother is just a prototype. Let's see how this happens:

make_me \u003d function (_name) (
alert ("I was launched");
this .name \u003d _name;
this .show_name \u003d function () (alert (this .name);)
}
/*
Seeing the function keyword, the interpreter checks the code to the right of it, and since everything is ok - creates a new object in memory, which is also our function. Then, automatically (without the participation of the programmer) a prototype property is created for this function, which refers to an empty object. If we were to do it manually, it would look like make_me.prototype \u003d new Object ();
Then, the given object (pointed to by the prototype property) is also automatically added with a constructor property pointing back to the function. It turns out such a circular link.
Now this object, which can be described as (constructor: ... here is a reference to the function ...) - is the function prototype.
*/
// Object is really an object
alert (typeof make_me.prototype.constructor); // Function is our function
alert (make_me.prototype.constructor \u003d\u003d\u003d make_me); // true
// Add a new method to the prototype of the make_me function
Child \u003d new make_me ("Vasya"); // they launched me
/ * Now, in addition to everything described in the previous example, an additional hidden property [] is created in the child object, which points to the same object as make_me.prototype. Because the property is hidden, we can neither view its value nor change it - however, it plays an important role in further work * /
Alert (child.name); //Vasya
child.show_name (); //Vasya
Child.set_name ("Kolya");
/ * First, the interpreter looks for the set_name method on the child object. Since it isn't there, it continues to search the child. [] Property, finds it there, and starts it. * /
child.show_name (); // Kolya - now Vasya's name is Kolya :)
Make_me.prototype.show_name2 \u003d function () (alert ("Hello," + this .name;) //T.k. the prototype is an ordinary object, we can also change it on the fly
Child2 \u003d new make_me ("Petya");
child2.show_name2 (); // Hello, Petya
child.show_name2 (); // Hello Kolya - changes in the prototype affect not only newly created objects, but also all old ones
Child2.show_name2 \u003d function () (alert ( "I won't say my name");} // We can still change the object itself, while the new show_name2 method in this object (and only in it) will, as it were, "overwrite" the old method from the prototype
child2.show_name2 (); // I won't say my name - because we now have our own show_name2 method, then it is called, and no search in the prototype occurs
Child.show_name2 (); // Hello, Kolya - everything is still here
Make_me.prototype \u003d (prop: "hello") // Let's try to recreate the prototype again
Alert (child.prop); // undefined
child.show_name2 (); //Hi Kolya
/ * If you remember what working by reference is, then everything is clear. Re-creating the prototype breaks the link, and now the [] property of the child and child2 objects point to one object (which was previously the prototype of the make_me function), and the make_me.prototype property to another object, which is the new prototype of the make_me function * /
Child3 \u003d new make_me ("Oleg");
alert (child3.prop); // hello - as expected

* This source code was highlighted with Source Code Highlighter.

As can be seen from the example, while the father remains faithful to the mother (i.e., while the prototype of the function remains the same), all children depend on the mother and are sensitive to all changes in her. However, as soon as the parents get a divorce (the designer changes the prototype to another), the children immediately scatter who where and there is no more connection with them.

A little about terminology
Until the primary connection between the constructor and the prototype is broken, we can observe the following picture:

make_me \u003d function (_name) (
alert ("I was launched");
this .name \u003d _name;
this .show_name \u003d function () (alert (this .name);)
}
Make_me.prototype.set_name \u003d function (_name) (this .name \u003d _name;)
child \u003d new make_me ("Vasya");
Alert (typeof make_me.prototype); // object - the function has a prototype property
alert (typeof child.prototype); // undefined - the created object has NO prototype property
alert (child.constructor.prototype \u003d\u003d\u003d make_me.prototype); // true - but the object has a constructor property, which points to the make_me constructor function, which, in turn, has a prototype property

* This source code was highlighted with Source Code Highlighter.

As I noticed after reading numerous forums on this topic, the main problems people get when they confuse the prototype property of a function and the hidden [] property of an object created with that function.
Both of these properties are references to the same object (as long as the primary connection of the prototype with the constructor is not broken), but they are nevertheless different properties, with different names, one of them is available to the programmer, and the other is not.

You must always clearly understand that if we are talking about the prototype of a constructor, then this is always the prototype property, and if about the prototype of the created object, then this is a hidden property [].

Inheritance

We now know that every object has a hidden prototype reference, and every prototype is a regular object.
The more empathetic readers have already caught the smell of recursion :)
Indeed, since a prototype is an ordinary object, then it, in turn, has a link to its prototype, and so on. This is how the prototype hierarchy is implemented.

bird \u003d function () () // This is the bird's constructor
bird.prototype.cry \u003d function () (alert ("Cree!");) // The bird can scream
bird.prototype.fly \u003d function () (alert ("I'm flying!");) // and fly
Duck \u003d function () ()
duck.prototype \u003d new bird ();
duck.prototype.cry \u003d function () (alert ("Quack quack!");) // The duck screams differently
duck.prototype.constructor \u003d duck; // Force the prototype.constructor property to be set to duck, because otherwise it will refer to bird
Billy \u003d new duck (); // Billy is our duck
billy.fly (); //I'm flying! - Billy can fly because he is a bird
billy.cry (); //Quack quack! - Billy screams quack because he is a duck

* This source code was highlighted with Source Code Highlighter.

So you can implement a hierarchy of any nesting level.

Asterisk problem

Now, since we know so much about all this, let's try to figure out how much is going on in these three lines

make_me \u003d function () ()
child \u003d new make_me ();
alert (child.toString ()); // outputs

* This source code was highlighted with Source Code Highlighter.

In the first line, we create a new function and a make_me variable that points to this function. This creates a prototype for the function, make_me.prototype, which contains a constructor property pointing to make_me.
But that's not all :)
Because the make_me function is also an object, then it, in turn, has a dad and a mom, i.e. constructor and prototype. Its constructor is a native function of the Function () language, and its prototype is an object containing call, apply, etc. methods. - it is thanks to this prototype that we can use these methods in any function. Thus, the make_me function has a [] property that points to Function.prototype.

In turn, the prototype of the Function constructor is also an object, the constructor of which is (surprise!) Object (i.e. Function.prototype. []. Constructor \u003d\u003d\u003d Object), and the prototype is an object containing standard properties and methods of the object such as toString, hasOwnProperty and others (in other words - Function.prototype. [] ["hasOwnProperty"] - this is exactly the same method that we can use in all derived objects - and this is exactly the own method of this object, and not inherited ). In this interesting way, we find that all kinds of objects are derived from Object.

Can we continue further? It turns out not. Object.prototype contains the basic properties of an object precisely because it does not have its own prototype. Object.prototype. [] \u003d Null; At this point, the journey through the prototype chain to find a property or method stops.

Another interesting fact - the constructor of Object is Function. Those. Object. []. Constructor \u003d\u003d\u003d Function.
There is another circular reference - the Object constructor is Function, and the Function.prototype constructor is Object.

Let's go back to our example. We already understood how the function is created, now let's move on to the second line. There we create a child object whose constructor is the make_me function and the prototype is make_me.prototype.

Well, in the third line we see how the interpreter goes up the chain, from child to child. [] (Aka make_me.prototype), then to child. []. [] (Aka Object.prototype), and already there finds the toString method, which is launched for execution.

Impurities

It might seem that inheritance via prototypes is the only way JavaScript is possible. This is not true.
We are dealing with a very flexible language that provides not so much rules as possibilities.

For example, if we wish, we can not use prototypes at all, but program using the concept of mixins. For this, our good old friends - constructors will come in handy.

// This is a human constructor
man \u003d function () (
this .live \u003d function () (alert ("I live");) // A person knows how to live
this .walk \u003d function () (alert ("I'm walking");) // A person can walk
}
// This is the poet's constructor
poet \u003d function () (
this .kill \u003d function () (alert ( "The poet killed a man");} // A poet can kill a person
this .live \u003d function () (alert ("I'm dead");) // This will cause the person to die
}
Vladimir \u003d new man (); // Vladimir is a man
vladimir.live (); // I live - he is alive
vladimir.walk (); // I walk - he walks
Poet.call (vladimir); // Execute poet constructor for vladimir object
vladimir.kill (); // The poet killed the man
vladimir.live (); //I'm dead
// Now the focus
man.call (vladimir);
vladimir.live (); //I live

* This source code was highlighted with Source Code Highlighter.

What do we see in this example? First, it is the ability to inherit from multiple objects that are not in the same hierarchy. In the example there are 2 of them, but there can be as many as you like.
Secondly, this is the absence of any hierarchy at all. Overriding properties and methods is determined solely by the order in which constructors are called.
Thirdly, this is the ability to even more dynamically change an object, and it is a separate object, and not all descendants, as when changing the prototype.

Upd: Closures and Private Properties

In order not to inflate this already rather big article, I give a link to the post Closures in JavaScript, where it is written in some detail about it.

What to do with all this now

As I said above, arbitrary modification of individual objects, and the use of constructors, and mixins, and the flexibility of prototypes are just tools, opportunities that allow a programmer to create code that is both terrible and beautiful in all respects. It is only important to understand what tasks we solve, by what means, what goals we achieve and what price we pay for it.

Moreover, the question of the price is rather non-trivial, especially if we are talking about development for the browser. Internet Explorer 6 and 7 versions.
1. Memory - everything is simple. In all browsers inheritance on prototypes takes several times less memory than when creating methods through constructors. Moreover, the more methods and properties we have, the greater the difference. However, it is worth remembering that if we do not have a thousand identical objects, but only one, then the memory consumption in any case will be small, because there are other factors to consider here.
2. Processor time - here the main subtleties are associated with Microsoft browsers.
On the one hand, objects where methods and properties are created through a constructor can be created many times (in some cases tens or hundreds of times) slower than through a prototype. The more methods, the slower. So if your IE freezes for a few seconds during script initialization - there is a reason to dig in this direction.

On the other hand, an object's own methods (created via a constructor) can execute slightly faster than prototyped ones. If you desperately need to speed up the execution of a method in this browser, then you need to take this into account. Keep in mind that it is the method call (i.e., finding it in the object) that is accelerated, not its execution. So if the method itself runs for a second, then you will not notice a special increase in performance.

In other browsers, similar problems are observed, where the time for creating objects and calling their methods is approximately the same for both approaches.

P.S. Usually, in articles of this kind, the author proposes some kind of wrapper, either trying to implement class-object inheritance based on prototype, or just syntactic sugar for prototypal inheritance. I don't do this on purpose, because I think that a person who understands the meaning of this article is able to write any wrapper for himself, and many more interesting things :)

Tags: Add Tags

Objects are the cornerstone of JavaScript. Many built-in data types are represented as objects. To be a successful JavaScript developer, you need to have a clear understanding of how they work. The building blocks of an object are called its fields or properties javaScript object... They are used to describe any aspect of an object. The property can describe the length of the list, the color of the sky, or the date of birth of a person. Object creation is an easy process. The language provides syntax known as object literals, which are denoted by curly braces.

Accessing properties

The language provides two entries for accessing properties. The first and most common is known as dot notation. With dot notation, a resource can be accessed by specifying the name of the host object, followed by the period and property name. For example, when object.foo was initially set to one, then its value will become 2 after executing the JavaScript statement of the objects.

An alternative syntax for access is known as parenthesis notation. In notation, the object name is followed by a set of square brackets. They specify the property name as a string:

object ["foo"] \u003d object ["foo"] + 1.

It is more expressive than dot notation because it allows a variable to specify all or part of a property name. This is possible because the JavaScript object interpreter automatically converts this expression to a string and then retrieves the corresponding property. Property names are created on the fly by concatenating the contents of the f variable with the string "oo":

object \u003d "bar".

Bracket notation allows property names to contain characters that are not allowed in dot notation. For example, the following statement is completely legal in parentheses. However, if the user tries to create the same property name in dotted notation, he will encounter a syntax error:

object [" [email protected]# $% & * (). "] \u003d true.

Properties of nested JavaScript objects can be accessed by linking periods and / or parentheses. For example, the following object contains a nested object named baz that contains another object named foo that has a property named bar containing the value five:

var object \u003d (baz: (foo: (bar: 5))).

The following expressions access the nested property bar. The first expression uses dot notation, while the second expression uses square notation. The third expression combines both entries to achieve the same result:

object.baz.foo.bar;
object ["baz"] ["foo"] ["bar"];
object ["baz"]. foo ["bar"].

Expressions like the one shown in the previous example can degrade performance if misused and render the JavaScript object unusable. Evaluating each dot or parenthesis expression takes time. If the same property is used multiple times, then it makes sense to access the property once and then store the value in a local variable for all future purposes.

Function as method

When a function is used as a property of an object, it is called a method. Like properties, they are specified using object literal notation. For instance:

var object \u003d (sum: function (foo, bar) (return foo + bar;)).

JavaScript object methods can be called using labels and parentheses. The following example calls the sum () method from the previous example using both entries:

object.sum (1, 2);
object ["sum"] (1, 2).

Object literal notation is useful for creating new objects, but it cannot add properties or methods to existing ones. Fortunately, adding new data is as easy as creating an assignment statement. An empty object is created. Then, using assignment operators, two properties are added, foo, and bar, and also the baz method:

var object \u003d ();
object.foo \u003d 1;
object.bar \u003d null;
object.baz \u003d function () (return "hello from baz ()";).

Encapsulating programs

The basic idea behind object-oriented programming is to divide programs into smaller pieces and make each one responsible for managing its own state. Thus, some knowledge of how a part of a program works may be local to that part. Someone working on the rest of the program need not remember or even know about it. Whenever this local data changes, only the code immediately around it needs to be updated.

The various parts of such a program interact with each other through interfaces, limited sets of functions or bindings that provide useful functionality at a more abstract level, hiding their exact implementation. Such parts of the program are modeled using objects. Their interface consists of a specific set of methods and properties. Properties that are part of an interface are called public properties. The rest, which should not touch external code, are called private.

Many languages \u200b\u200bprovide the ability to distinguish between public and private properties and prevent external code from accessing private properties. JavaScript, again taking a minimalist approach, has yet to be achieved. Work is currently underway to add this language. Therefore, JavaScript programmers will use this idea successfully. As a rule, the available interface is described in the documentation or comments. It is also common to place an underscore (_) at the beginning of property names to indicate that the properties are private. Separating interface from implementation is a great idea. It is commonly referred to as encapsulation.

Properties

An object with brackets (...) is called an object literal. You can immediately put some properties in such brackets (...). For example, pairs "key: value and so on":

let user \u003d (// an object name: "John", // by key "name" store value "(! LANG: John" age: 30 // by key "age" store value 30 }.!}

The property has a key (also known as "name" or "identifier") before the colon ":" and a value to the right of it. The user object has two properties. The resulting user JavaScript object with two signed files labeled "name" and "age". You can add, delete and read files from it at any time. Property values \u200b\u200bare available using dot notation. It can be of any type. Boolean can be added. To delete a property, use delete in the Error case of a JavaScript object.

All JavaScript error objects are descendants of the Error object, or an inherited object:

The Syntax Error object inherits from the Error object.
JSON Parse error of a specific type of Syntax Error object.

To dive even deeper into how applications deal with JavaScript errors, take a closer look at Airbrake JavaScript, a bug tracking tool for real-time alerts and an instant understanding of what went wrong with JavaScript code.

Error messages that the user may receive before deleting the JavaScript object:

Bad control character in string literal.
Bad character in a string literal.
Bad Unicode output.
Bad escape character.
Unterminated string.
An unexpected non-numeric code.
There are no digits after the decimal point.
Unterminated fractional number.
There are no numbers after the degree indicator.
There are no digits after the exponent sign.
The exponential part has no number.
Unexpected end of data.
An unexpected keyword.
An unexpected symbol.
End of data while reading the contents of the object.
The expected property name or ")".

Computational properties

You can use square brackets in an object literal. This is called computed properties. An example is shown below.

The value of the computed property is simple: it means that the property name must be taken from fruit. So, if the visitor enters "apple", bag becomes (apple: 5). You can use more complex expressions in square brackets:

let fruit \u003d "apple";

: 5 // bag.appleComputers \u003d 5

Square brackets are much more powerful than dot notation. They accept property names and variables. But they are also more cumbersome to write. Therefore, most of the time, when property names are known and simple, a period is used. And if you need something more complex, then switch to square brackets.

Word reservation

A variable cannot have a name equal to one of the reserved words such as for, let, return, and so on. But there is no such restriction when sorting JavaScript objects.

In principle, any name is allowed, but there is a special one: it "__proto__" gets a special treatment for historical reasons. For example, you cannot set it to a value other than an object:

obj .__ proto__ \u003d 5;

alert (obj .__ proto__); //, didn "t work as intended

As you can see from the code, the assignment of primitive 5 is ignored. This can become a source of bugs and even vulnerabilities if the operator intends to store arbitrary key-value pairs in the object and allow the visitor to specify the keys. In this case, the visitor can choose "proto" as the key and add it to the JavaScript object. There is a way to make objects treated with __proto__ as a regular property. There is also another map of data structures that support arbitrary keys.

Integer properties

The term "integer property" here means a string that can be converted from an integer without modification. So, for example, "49" is an integer property name, because when it gets converted to an integer and back, it's still the same. But "+49" and "1.2" are not. On the other hand, if the keys are not integer, then they are listed in the order of creation. See example below.

To fix the problem with dialing codes, you can cheat by making the codes non-integer. Adding a "+" (plus sign) in front of each code is sufficient. Now it will work as intended.

The difference between objects and primitives is that they are stored and copied "by reference". Primitive values \u200b\u200bare assigned and copied "as an integer value". A variable stores an “address in memory”, not the object itself or a “reference” to it. You can use any variable to access and change its content.

The example above shows that there is only one object and admin to login to it. Then, if later uses a different key (user), the user will detect the change.

The equality \u003d\u003d and strict equality \u003d\u003d\u003d operators work the same for objects. Two objects are equal only if they are the same object. For comparisons like obj1\u003e obj2, or for comparisons with the primitive obj \u003d\u003d 5, objects are converted to primitives. To be honest, such comparisons are very rarely needed and are usually the result of a coding error.

JavaScript object validation

Objects have access to any property. However, if it doesn't exist at all, it won't be a mistake. Only accessing a non-existent property returns undefined. It provides a very common way to test a property and compare against an undefined one. Below is an example.

Using "in" for properties that store undefined. Usually the strict "\u003d\u003d\u003d undefined" comparison check works fine. There is a special case where it fails and "in" works correctly. This is when a property of an object exists but keeps undefined.

In the above code, the obj.test property technically exists. Therefore, the in operator works correctly. Situations like this are very rare because undefined is usually not assigned. Mostly null "unknown" or "empty" values \u200b\u200bare used. So the in operator is actually a guest in the code.

Loop "for..in"

In order to loop through all the keys from object to object, there is a special form of loop: for..in. This is a completely different thing from the for (;;) construct.

Below is an example.

Please note that all "for" constructors allow you to declare the looping variable inside the loop as a let key. Alternatively, you can use a different variable name key instead.

For example, for (let prop in obj) is also widely used.

There is an alternative "square bracket" that works on any string.

That being said, the point requires that the keys of the JavaScript object be a valid variable identifier, that is, there are no spaces or other restrictions. It is necessary to pay attention that the line inside the brackets is correctly quoted. Square brackets also provide a way to get the property name from any expression, as opposed to a literal string from a variable:

let key \u003d "likes birds";

// same as user ["likes birds"] \u003d true;

user \u003d true.

Here the variable key can be calculated at runtime and depends on user input and then used to access the property. This gives programmers a lot of flexibility. Dot notation cannot be used in a similar way, as it will iterate over the JavaScript object. Below is an example.

Const object

The declared const object can be modified. An example is shown below.

It might seem like a JavaScript object on line (*) will throw an error, but it won't. This is because const captures the value of the user itself. And here user keeps a reference to the same object all the time. The line (*) goes inside the object, it is not reassigned by user. Const will give an error if you try to set user and something else. Cloning and merging, Object.assign creates another reference to the same object in case you need to duplicate it. This is also doable, but a little more complicated because there is no built-in method in JavaScript. In fact, this is rarely necessary. Copying by reference is used in most cases. But if you really need it, then you need to create a JavaScript object and replicate the structure of the existing one, copying its properties at a primitive level. Below is an example.

And you can also use the Object.assign method for this. Dest and src1, ..., srcN are objects. It copies the properties of all objects src1, ..., srcNINTO dest. In other words, the properties of all arguments starting from the second are copied to the 1st. It then returns to dest. For example, you can use it to combine multiple objects into one.

And you can also use Object.assign to replace the simple clone loop. It copies all the properties of user into an empty object and returns it, just like a loop but shorter. So far, all user properties have been assumed to be primitive. But properties can be references to other objects.

To fix this, you need to use a clone loop that checks each user value and, if it's an object, then replicates its structure. This is called "deep cloning".

There is a standard deep cloning algorithm that handles the above case and more complex cases called the Structured cloning algorithm. To avoid reinventing the wheel, you can use a working implementation from the lodash JavaScript library called _.cloneDeep (obj).

Advanced Techniques

If a programmer loops over an object and seeks to retrieve all properties in the same order in which they were added, they can rely on "special ordering" where integer properties are sorted and others are formed in the order in which the JavaScript object was created.

Advanced object methods deal with concepts that are rarely used in JavaScripting. This is because these powerful features are not needed in normal scenarios. Some of these methods may not work in older browsers such as early releases of Netscape 4.

The use of the prototype could be used to create JavaScript objects and all mycircle methods, not just new ones. This gives a mixed performance load. They don't have to keep separate copies of the methods for each instance of the object, so they may require less memory to work, but the browser must look for the current and parent scopes to find them. This can lead to extreme latency. Typically, the user should use what is appropriate for the code rather than basing that decision on performance, unless they are dealing with a very specific controlled environment.

Return true

In some cases, it may be necessary for a property of an object to be bound to the object itself or somewhere in the prototype chain. In JavaScript, all objects use the hasOwnProperty method, which returns true if this property is bound to a single object instance. In this case, it becomes possible to check if the object's constructor has the same property with the same value as the object instance itself. This can give the wrong result if there are separate JavaScript object properties with the same value for both the object instance and the chain prototype. The hasOwnProperty method takes a single parameter, the property name as a string.

Private methods can be created in the same way. It's just a function that is created inside a constructor function. This may seem confusing to some, but this is how it works. A private function can only be called by the constructor itself or by methods that are defined in the string. They can be used as public methods if assigned to a public constructor and accessed using open methods Javascript objects.

function myob () (function cantBeSeen () (alert (secretValue);

) var secretValue \u003d "";

this.method1 \u003d function () (secretValue \u003d "(! LANG: no surprises";!}

this.method2 \u003d cantBeSeen;

) var oneOb \u003d new myob ();

oneOb.method1 ();

// alerts "no surprises" oneOb.method2 ();

// alerts "no surprises".

Command Template

Command objects allow loosely coupled systems by separating those that issue the request from the objects and, in fact, process the request. These requests are called events, and the code that handles the requests is called event handlers.

Suppose you are building applications that support the Clipboard actions Cut, Copy, and Paste. These actions can be triggered in different ways throughout the application: by the menu system, by the context menu, for example by clicking right button mouse over the text field or a keyboard shortcut. Command objects allow you to centralize the processing of these actions, one for each operation when you only need one command to process all Cut requests, one for all copy requests, and one for all Paste requests.

Since the commands centralize all processing, they are also often involved in the application-wide cancellation processing. Significant improvements can be achieved by applying modern JavaScript techniques, resulting in more efficient, reliable, and maintainable applications.

You can use JavaScript + jQuery templates to see how to do this. This unique package includes optimized JavaScript for all GoF templates using more advanced features such as namespaces, prototypes, modules, function objects, closures, anonymous functions, and more. If users want the latest tools and techniques for JavaScript templating, jQuery templating, and templating architectures, then this is the best option use. This package contains valuable, relevant information for JavaScript developers. Here's what's included:

JavaScript optimized GoF templates.
Modern JavaScript design patterns.
Model-View design patterns.
JQuery Design Templates.
Architectural patterns JavaScript idioms.
Sample applications (MVC, SPA, etc.)

The suggested basics of JavaScript object syntax are very important for novice programmers. You need to understand objects first, then there will be knowledge of object-oriented programming. It is imperative to have a deep understanding of this material as it serves as the basis for the rest of the JavaScript language.