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 all this affects performance and what in general to do with all this :)

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

The complexity of the material will increase from the beginning to the end of the article, so for pros the first parts may seem boring and banal, but then 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 language is an object, and even what is not an object can have some of its capabilities.

It is important to understand that the word “object” is used here not in the sense of “an object of some class.” An object in JavaScript is first and foremost just a collection of properties (if you prefer, you can call it an associative array or list) consisting of key-value pairs. Moreover, the key can only be a string (even for array elements), but the value can be any type of data listed below.

So in JavaScript there are 6 basic types data are Undefined (indicating the absence of a 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 consider that the Object type has “subtypes”: array (Array), function (Function), regular expression (RegExp) and others.
This is a somewhat simplified description, but in practice it is usually sufficient.

Additionally, the primitive types String, Number, and Boolean are related in certain ways to the non-primitive "subtypes" of Object: String, Number, and Boolean, respectively.
This means that the string "Hello, world", for example, can be created either as a primitive value or as a String object.
In short, this is done so that the programmer can use methods and properties when working with primitive values ​​as if they were objects. You can read more about this in the corresponding section of this article.

Work from the link

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

test= function () (alert("Hello!" )) //Create a function (alert("Hello!")) (and a function, as we remember, is a full-fledged object) and make the test variable a reference to it
test_link=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.
We need to realize that we don't have any function named test, and that the test variable is not some kind of "main" or "primary" link, and "test_link" is a minor one.

Our function, like any other object, is simply 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 immediately after creation (for example, passed to a function), otherwise it will be impossible to access it and will soon be destroyed by the garbage collector (garbage collection), which is responsible for deleting objects without references.

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

test=(prop: "sometext" ) //Create an object with the prop property
test_link=test; //Create another link to this object

Alert(test.prop); //sometext

//Change the property of the object
test_link.prop="newtext" ;

Alert(test.prop); //newtext
alert(test_link.prop); //newtext
/*One could say that the property has changed both here and there - but this is not so.
There is only one object. So the property changed on it once, and the links just continue to point where they point. */

//Add a new property and remove the old one
test.new_prop="hello" ;
delete test.prop;

Alert(test_link.prop); //undefined - this property no longer exists
alert(test_link.new_prop);

//Delete 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 even more so */
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=test_link; //First, create the test link again
test_link=(prop: "sometext" ) //And here is the new object

Alert(test_link.prop); //sometext
alert(test.prop); //undefined
/* Creating a new object breaks the reference link, and now test and test_link point to different objects.
In fact, this is equivalent to deleting the test_link and creating it again, but pointing to a different 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 an 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 fun effects listed above, also provides significant memory savings, which is important when one object is widely used in different places in the program.

Primitive values

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

obj= new String("hello" ); //Create a string as an object
simple="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 an object of type String. It's quite convenient */

Obj.prop="text" ;
simple.prop="text" ;

Alert(obj.prop); //text - since obj is a regular object, we can easily give it another 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 the Number and Boolean types (well, except that they don’t have length properties, and there are a number of other remarkable properties).
Using strings and numbers as objects does not have any practical benefit, because primitive values ​​are more convenient to use, but at the same time retain all the necessary functionality. However, to complete the picture it is necessary to understand this mechanism.

Don't confuse the use of primitive values ​​with the use of literals - for example, whether we create an array as "test=new Array()" or as "test=", the result will still be the same object. We will not receive any primitive values.

Creating and Using Objects

So, unlike languages ​​that implement the class-object paradigm, we do not need to create a class first and then create an object of the class. We can immediately create an object, which is what we will do in the following example:

test=(
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.

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

Used twice in our function keyword this, which is a pointer (i.e. a reference) to the object from which the function is called. Thus, this.simple_property=test.simple_property="Hello", and this.object_property=test.object_property="Peter".

It is important to be clear that this always points to the object from which the function is called, and not to the object to which it belongs. Although in this example they are the same object, this is not always the case.

test.function_property("user_1" ); //Hello, Petya.

Test2=new Object(); //Another form of creating a new object, similar to test2=()

Test.function_property.call(test2, "user_1" ); //error
/* 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 no longer points to the test object, but to the test2 object. And because it does not have the object_property property, then when you try to get this.object_property the script will throw an error */

//let's try to fix the situation
test2.simple_property="Good day" ;
test2.object_property=test.object_property; //In this case, we will use specifying 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. An 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 had some similarity. Both had simple_property and object_property properties. Obviously, when writing real code, the task of creating identical or simply similar objects often arises. And of course, we do not have to create each such object manually.

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

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

}

/* Let's figure out 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 launched for execution, and its this points precisely to this new object. Next, this object is added with a name property, which is assigned the value from the _name argument, and a show_name method. Also (I don’t know at what point, but it doesn’t matter) the child variable starts pointing to our brand new, just born object */

Alert(child.name); //Vasya
child.show_name(); //Vasya

child2.show_name(); //Peter

Child2.show_name=function () (alert( "I won't say my name");} //Don't 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 a designer with a father - he gives birth to a child, endowing him with certain qualities, but immediately after creation the child becomes completely independent of the parent and can become very different from his brothers.

If we remember the description of data types at the beginning of the article, 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 already much better. We now have the ability to create objects according to some pattern. However, all is not well yet. First, each object we create and all its properties and methods occupy a separate place in memory, although in many ways they are repeated. Secondly, what if we want to maintain 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 as 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 have determined, works as a designer, then the mother is precisely the prototype. Let's see how this happens:

make_me= function (_name) (
alert("I was launched" );
this .name=_name;
this .show_name=function () (alert(this .name);)
}
/*
Seeing the function keyword, the interpreter checks the code to the right of it, and so on. everything is ok - it creates a new object in memory, which is also our function. Then, automatically (without programmer intervention) a prototype property is created for this function, which refers to an empty object. If we did this manually, it would look like make_me.prototype=new Object();

Then, this object (pointed to by the prototype property) is also automatically given a constructor property, pointing back to the function. It turns out this is a cyclic link.

Now this object, which can be described as (constructor: ...here is a reference to a function...) is the prototype of the function.
*/

//Object - indeed, an object
alert(typeof make_me.prototype.constructor); //Function is our function
alert(make_me.prototype.constructor === make_me); //true

//Add make_me functions to the prototype new method

Child=new make_me("Vasya"); //I was launched
/* 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 in the child object. Since it's not there, it continues searching in the child.[ property, finds it there, and runs it. */
child.show_name(); //Kolya - now Vasya’s name is Kolya :)

Make_me.prototype.show_name2=function () (alert("Hello, " + this .name;) //Because a prototype is an ordinary object, we can just as well change it on the fly

Child2=new make_me("Petya" );
child2.show_name2(); //Hello, Petya
child.show_name2(); //Hi, Kolya - changes in the prototype affect not only newly created objects, but also all old ones

Child2.show_name2=function () (alert( "I won't say my name");} //We can still change the object itself, and 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 method show_name2, then it is called, and the search in the prototype does not occur

Child.show_name2(); //Hello, Kolya - everything is still the same here

Make_me.prototype=(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. Recreating the prototype breaks the connection, 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 points to another object, which is the new prototype of the make_me function */

Child3=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, as long as the father remains faithful to the mother (that is, as long as the type of function remains the same), all children depend on the mother and are sensitive to all changes in her. However, as soon as the parents divorce (the designer changes the prototype to another), the children immediately run away in all directions and there is no more contact with them.

A little about terminology
As long as the primary connection between the designer and the prototype is not broken, we can observe the following picture:

make_me= function (_name) (
alert("I was launched" );
this .name=_name;
this .show_name=function () (alert(this .name);)
}

Make_me.prototype.set_name=function (_name) (this .name=_name;)
child=new make_me("Vasya" );

Alert(typeof make_me.prototype); //object - the function has a prototype property
alert(typeof child.prototype); //undefined - the created object does NOT have a prototype property
alert(child.constructor.prototype === make_me.prototype); //true - but the object has a constructor property, which points to the constructor function make_me, which, in turn, has a prototype property

* This source code was highlighted with Source Code Highlighter.

As I've noticed after reading numerous forums on this topic, the main problem people have is when they confuse the prototype property of a function with the hidden [] property of the object created by that function.
Both of these properties are a reference to the same object (as long as the primary connection between the prototype and the constructor is not broken), but they are nevertheless different properties, with different names, one of which is accessible to the programmer, and the other is not.

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

Inheritance

Now we know that every object has a hidden prototype reference, and every prototype is a regular object.
The most sensitive readers have already caught the smell of recursion :)
Indeed, because 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= function()() //This is the bird's constructor
bird.prototype.cry=function ()(alert("Cry!");) //The bird can scream
bird.prototype.fly=function ()(alert("I'm flying!");) //and fly

Duck=function () ()
duck.prototype=new bird();
duck.prototype.cry=function ()(alert("Quack-quack!" ;) //Duck screams differently
duck.prototype.constructor=duck; //Forcibly set the prototype.constructor property to duck, because otherwise it will refer to bird

Billy = new duck(); //Billy is our duck
billy.fly(); //I'm flying! - Billy can fly because he's a bird.
billy.cry(); //Quack quack! - Billy screams quack-quack because he's a duck.

* This source code was highlighted with Source Code Highlighter.

This way you can implement a hierarchy of any nesting level.

Star task

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

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

* This source code was highlighted with Source Code Highlighter.

On the first line we create a new function and a variable called make_me that points to that function. This creates a function prototype, 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 father and a mother, i.e. designer and prototype. Its constructor is a native function of the Function() language, and its prototype is an object containing the methods call, apply, etc. - It is thanks to this prototype that we can use these methods in any function. Thus, the make_me function has a [] property pointing to Function.prototype.

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

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

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

Let's return to our example. We have 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 whose 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 finds there the toString method, which launches execution.

Impurities

It may seem that inheritance through prototypes is the only way possible in JavaScript. This is wrong.
We are dealing with a very flexible language that provides possibilities rather than rules.

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

//This is a human constructor
man=function() (
this .live=function ()(alert("I'm live" ;) //Man knows how to live
this .walk=function ()(alert("I'm walking" ;) //The man can walk
}

//This is the poet's constructor
poet=function ()(
this .kill=function ()(alert( "The poet killed a man");} //A poet can kill a person
this .live=function ()(alert("I'm dead" ;) //A person will die from this
}

Vladimir=new man(); //Vladimir is a man
vladimir.live(); //I live - he is alive
vladimir.walk(); //I'm walking - he's walking

Poet.call(vladimir); //Execute the poet constructor for the vladimir object
vladimir.kill(); //The poet killed a man
vladimir.live(); //I'm dead

//Now focus
man.call(vladimir);
vladimir.live(); //I live

* This source code was highlighted with Source Code Highlighter.

What do we see in this example? Firstly, it is possible to inherit from several 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, there is no hierarchy at all. Overriding of properties and methods is determined solely by the order in which constructors are called.
Thirdly, this is the ability to change an object even more dynamically, specifically an individual object, and not all its descendants, as when changing a prototype.

Upd: Closures and private properties

In order not to bloat this already rather large article, I provide a link to the post Closures in JavaScript, where this is written in some detail.

What to do now with all this

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

Moreover, the question of price is quite non-trivial, especially if we are talking about development for the Internet Explorer 6 and 7 browser versions.
1. Memory - everything is simple here. In all browsers, inheritance on prototypes takes up much 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 related specifically to browsers from Microsoft.
On the one hand, objects where methods and properties are created through a constructor can be created many times (in some cases tens and hundreds of times) slower than through a prototype. The more methods, the slower it is. 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 (those created through the constructor) can execute slightly faster than prototype methods. If you desperately need to speed up the execution of a particular method in this browser, then you need to take this into account. Keep in mind that it is the method call (i.e., searching for it in the object) that is speeded up, not its execution. So if the method itself runs for a second, then you won’t notice much of an increase in performance.

Similar problems are observed in other browsers, 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 offers some kind of wrapper, either trying to implement class-object inheritance based on prototypic inheritance, or simply syntactic sugar for prototypic inheritance. I don't do this intentionally, because... I believe 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

Object is a fundamental data type in the JavaScript language. An object is a composite value: it combines a set of values ​​(simple values ​​or other objects) and allows those values ​​to be stored and retrieved by name.

An object is an unordered collection of properties, each of which has a name and a value. Property names are strings, so objects can be said to map strings to values. This mapping of strings to values ​​can go by many names: You may already be familiar with a fundamental data structure such as a hash, a dictionary, or an associative array. However, there is more to an object than a simple mapping of strings to values.

In addition to their own properties, JavaScript objects can also inherit properties from other objects, known as prototypes. Object methods are typical representatives of inherited properties, and " inheritance via prototypes" is key feature JavaScript language.

Objects in JavaScript are dynamic—they typically allow you to add and remove properties—but they can also be used to emulate the static objects and “structures” found in statically typed programming languages. They can also be used (if you ignore that objects map strings to values) to represent sets of strings.

Any value in JavaScript that is not a string, number, true, false, null, or undefined is an object. And even strings, numbers, and booleans that are not objects can behave like immutable objects (have String, Number, etc. wrapper objects).

Objects are mutable values ​​and operations on them are performed by reference, not by value. If the variable x refers to an object and the statement var y = x; , the y variable will contain a reference to the same object, not a copy of it. Any changes made to the object by the y variable will also be reflected in the x variable.

A property has a name and a value. The property name can be any string, including the empty string, but an object cannot have two properties with the same name. The property value can be any value allowed in the JavaScript language, or (in ECMAScript 5) a read or write function (or both).

In addition to names and values, each property has a number of values ​​associated with it, called property attributes :

Attribute writable determines whether a property value is writable.

Attribute enumerable determines whether the property name is available for enumeration in a for/in loop.

Attribute configurable determines the possibility of customization, i.e. deleting a property and changing its attributes.

Before the advent of the ECMAScript 5 standard, all properties in objects created by the program, available for recording, listing and customization. ECMAScript 5 provides the ability to customize the attributes of your properties.

In addition to properties, each object has three object attribute :

Attribute class contains a string with the name of the object's class and specifies the type of the object.

Flag extensible(in ECMAScript 5) indicates the ability to add new properties to an object.

Finally, below is a description of some terms that will help us distinguish between the three broad categories of objects in JavaScript and the two types of properties:

An object base language

It is an object or class of objects defined by the ECMAScript specification. Arrays, functions, dates, and regular expressions (for example) are core language objects.

Runtime object

This is an object defined by the runtime environment (such as a web browser) in which the JavaScript interpreter is embedded. HTMLElement objects, which represent the structure of a web page in client-side JavaScript, are runtime objects. Runtime objects can also be base language objects, for example when the runtime defines methods that are regular Function objects of the base JavaScript language.

Custom object

Any object created by executing JavaScript code.

Own property

This is a property defined directly on a given object.

Inherited property

This is a property defined by the object's prototype.

Creating Objects

Objects can be created using object literals, the new keyword, and (in ECMAScript 5) functions Object.create().

Object literals

The simplest way to create an object is to include an object literal in your program. An object literal is a comma-separated list of properties (name/value pairs) enclosed in curly braces. The property name can be an identifier or a string literal (the empty string is acceptable). The value of a property can be any expression allowed in JavaScript - the value of the expression (this can be a simple value or an object) will become the value of the property.

Below are some examples of creating objects:

Var empty = (); // Object without properties var point = ( x:0, y:0 ); // Two properties var point2 = ( x:point.x, y:point.y+1 ); // More complex values ​​var site = ( "url site": "www..NET Framework", // and hyphens, so use quotes author: ( // The value of this property is firstname: "Alexandr", // object. Please note that surname: "Frolov" // the names of these properties are without quotes. ) );

ECMAScript 5 (and some implementations of ECMAScript 3) allows reserved words to be used as property names without quotes. However, in general, property names that match reserved words in ECMA-Script 3 must be enclosed in quotation marks. In ECMAScript 5, the last comma following the last property in an object literal is ignored. Most ECMAScript 3 implementations also ignore trailing commas, but IE interprets their presence as an error.

An object literal is an expression that creates and initializes a new object whenever that expression is evaluated. The value of each property is recalculated when the value of the literal is evaluated. This means that a single object literal can create many new objects if the literal is placed in the body of a loop or function that will be called repeatedly, and that the property values ​​of these objects can differ from each other.

Creating Objects Using the New Operator

The new operator creates and initializes a new object. This statement must be followed by the function name. A function used in this way is called a constructor and is used to initialize a newly created object. Basic JavaScript includes many built-in constructors for creating base language objects. For example:

Var o = new Object(); // Create a new empty object: same as () var a = new Array(); // Create an empty array: same as var d = new Date(); // Create a Date object representing the current time var r = new RegExp("js"); // Create a RegExp object for pattern matching operations

In addition to these built-in constructors, it is possible to define your own constructor functions to initialize newly created objects. How this is done is described in the next article.

Object.create()

The ECMAScript 5 standard defines the Object.create() method, which creates a new object and uses its first argument as the prototype of that object. Additionally Object.create() can accept a second optional argument, describing the properties of the new object.

Object.create() is a static function, not a method called on some specific object. To call this function, just pass it the desired prototype object:

// obj inherits properties x and y var obj = Object.create((x:1, y:2));

To create an object that has no prototype, you can pass null, but in this case the newly created object will not inherit any properties or basic methods, such as toString() (which means that this object cannot be used in expressions with the + operator):

// obj2 does not inherit any properties or methods var obj2 = Object.create(null);

If your program needs to create a regular empty object (as returned by a literal() or a new Object() expression), pass Object.prototype as the first argument:

// obj3 is like an object created // using () or new Object() var obj3 = Object.create(Object.prototype);

The ability to create new objects with arbitrary prototypes (let's put it another way: the ability to create “heirs” from any objects) is powerful tool, the effect of which can be simulated in ECMAScript 3 using the function presented in the example below:

// inherit() returns a newly created object that inherits the properties // of the prototype object p. Uses the ECMAScript 5 Object.create() function // if defined, otherwise uses an older technique. function inherit(p) ( if (p == null) throw TypeError(); // p cannot be null if (Object.create) // If Object.create() is defined... return Object.create(p ); // use it. var t = typeof p; // Otherwise, find out the type and check it if (t !== "object" && t !== "function") throw TypeError(); function f() () ; // Define an empty constructor. f.prototype = p; // Set its prototype property // to a reference to the p object. return new f(); // Use f() to create a // "successor" of the p object. )

The implementation of the inherit() function will make more sense once we get to know constructors in the next article. For now, just assume that it returns a new object that inherits the properties of the object in the argument. Please note that the inherit() function is not full replacement for Object.create(): it does not allow objects to be created without a prototype and does not take an optional second argument like Object.create() does.

Getting and changing properties

You can get the value of a property using the dot (.) and square bracket () operators. To the left of the operator there must be an expression that returns an object. When using the dot operator, there should be a simple identifier on the right that matches the property name. When using square brackets, the square brackets must include an expression that returns a string containing the name of the desired property:

// Simple object var user = ( login:"kot86", name:"Alexandr", age:26 ); var login = user.login; // Get the "login" property of the user object var name = user.name; // Get the "name" property of the user object var age = user["age"]; // Get the "age" property of the user object

To create a new property or change the value of an existing property, the dot and square bracket operators are also used, as in the operations of reading property values, but the expression itself is placed to the left of the assignment operator:

User.age = 28; // Change the value of the "age" property user["login"] = "kot84"; // Change the value of the "login" property user["surname"] = "Frolov"; // Create a new property "surname"

In ECMAScript 3, an identifier following a dot cannot be a reserved word: you cannot write a property call to o.for or o.class because for is a keyword and class is a word reserved for future use.

If an object has properties whose names match reserved words, you must use the square-bracket notation to access them: o["for"] and o["class"]. The ECMAScript 5 standard relaxes this requirement (as some ECMAScript 3 implementations already do) and allows the use of reserved words after the dot operator.

Prototypes

Every object in JavaScript has a second object (or null, but much less frequently) associated with it. This second object is called the prototype, and the first object inherits its properties from the prototype.

All objects created using object literals have the same prototype object, which can be referenced in a JavaScript program as Object.prototype .

Objects created using the new keyword and a constructor call receive the value of the prototype property of the constructor function as their prototype. Therefore, an object created by new Object() inherits the properties of Object.prototype as if it were created using a brace literal (). Similarly, the prototype of an object created by new Array() is Array.prototype, and the prototype of an object created by new Date() is Date.prototype.

Object.prototype is one of the few objects that doesn't have a prototype: it has no inherited properties. Other prototype objects are just ordinary objects that have their own prototypes.

All built-in constructors (and most custom constructors) inherit the Object.prototype prototype. For example, Date.prototype inherits properties from Object.prototype, so a Date object created by new Date() inherits properties from both Date.prototype and Object.prototype. Such a connected sequence of prototype objects is called a prototype chain.

Inheritance

Objects in JavaScript have many "own properties" and can also inherit many properties from their prototype object. To understand this, you need to carefully study the property access mechanism. The examples in this section use the inherit() function shown above to create objects with specific prototypes.

Suppose the program accesses property x of object obj. If obj does not have its own property with that name, an attempt is made to look up property x in obj's prototype. If the prototype object does not have its own property with that name, but does have its own prototype, an attempt is made to look up the property in the prototype's prototype. This continues until property x is found or an object that has no prototype is reached. As you can see, the prototype attribute of an object creates a chain, or linked list, of objects from which properties are inherited.

Var obj = (); // obj inherits the methods of the object Object.prototype obj.x = 1; // and has its own property x. var p = inherit(obj); // p inherits the properties of objects obj and Object.prototype p.y = 2; // and has its own property y. var q = inherit(p); // q inherits properties of objects p, obj and Object.prototype q.z = 3; // and has its own property z. var s = q.toString(); // toString inherits from Object.prototype var d = q.x + q.y // Result 3: x and y inherit from obj and p

Now suppose that the program assigns some value to the x property of obj. If obj already has its own property (not inherited) named x, then the assignment operation will simply change the value of the existing property. Otherwise, a new property named x will be created in obj. If obj previously inherited property x, the inherited property will now be hidden by a newly created property of its own with the same name.

The operation of assigning a value to a property will check the presence of that property in the prototype chain to ensure that the assignment is valid. For example, if object obj inherits the read-only property x, then the assignment will not occur. However, if assignment is valid, the property is always created or changed in the original object and never in the prototype chain. The fact that the inheritance mechanism works when reading properties, but does not work when writing new values, is a key feature of the JavaScript language because it allows you to selectively override inherited properties:

Var unitcircle = ( r:1 ); // The object from which the property is inherited var c = inherit(unitcircle); // c inherits the property r c.x = 1; c.y = 1; // c defines two properties of its own c.r = 2; // c overrides the inherited property console.log(unitcircle.r); // => 1: the prototype object has not changed

There is one exception to this rule, when the property assignment operation fails or results in a property being created/modified on the original object. If obj inherits property x and that property is accessed through accessors, then instead of creating a new property x on obj, a method for writing the new value is called. However, note that the write method is called on obj, not on the prototype in which the property is defined, so if the write method defines any properties, they will be instantiated on obj, and the prototype chain will again remain unchanged.

Property access errors

Property access expressions do not always return or change the value of a property. This section describes situations when property read or write operations fail.

An attempt to access a non-existent property is not considered an error. If property x is not found among obj's own or inherited properties, the property access expression obj.x will return undefined.

However, attempting to access a property of a non-existent object is considered an error. Null and undefined values ​​have no properties, and attempts to access the properties of these values ​​are considered an error:

// Simple object var user = ( login:"kot86", name:"Alexandr", age:26 ); var a = user.password; // undefined: property is missing // Raises a TypeError exception. // The undefined value does not have a length property var len = user.password.length;

If you are not sure that user and user.password are objects (or behave like objects), you should not use the user.password.length expression because it may throw an exception. The following demonstrates two ways to protect against this type of exception:

// More visual and straightforward way var len = undefined; if (user) ( if (user.password) len = user.password.length; ) // A more concise, JavaScript-specific alternative // ​​to getting the length of the password property value var len = user && user.password && user.password.length ;

Attempting to set a property's value to other values ​​is not always successful: some properties are read-only and do not allow their values ​​to be changed. In addition, some objects do not allow you to add new properties to them. However, the most interesting thing is that such failures, as a rule, do not lead to an exception being raised:

// The prototype properties of built-in constructors are read-only Object.prototype = 0; // Assignment will not raise an exception; // the value of Object.prototype will not change

This historical JavaScript flaw is corrected in strict mode, as defined by the ECMAScript 5 standard. All unsuccessful attempts to change a property value in strict mode result in a TypeError exception.

The rules for determining when an attempt to perform an assignment operation will succeed and when it will fail are simple and straightforward, but difficult to express in a sufficiently concise manner. An attempt to assign a value to property p of obj will fail in the following cases:

The object obj has its own read-only property p: you cannot change the value of a read-only property. (Note, however, that the defineProperty() method is an exception that allows you to change the values ​​of read-only custom properties.)

The obj object has a read-only inherited property p: inherited read-only properties cannot be overridden by your own properties with the same names.

The object obj does not have its own property p; obj does not inherit property p with accessor methods, and obj's extensible attribute is false. If property p is not present in obj and there is no write method defined for it, then the assignment operation will attempt to add property p to obj. But since obj is not extensible, attempting to add a new property to it will fail.

Removing properties

Operator delete removes a property from an object. Its only operand must be a property access expression. It may seem surprising, but the delete operator does not affect the value of the property - it operates on the property itself:

// Simple object var user = ( login:"kot86", name:"Alexandr", age:26 ); delete user.login; // Now the user object does not have a login property delete user["name"]; // Now the user object does not have a name property

The delete operator only deletes its own properties and does not delete inherited ones. (To remove an inherited property, you must remove it from the prototype object in which it is defined. This operation will affect all objects that inherit that prototype.)

The delete expression returns true when the property was successfully deleted or when the delete operation did not change the object (for example, when attempting to delete a property that does not exist). The delete expression also returns true when passed an expression that is not a property access expression:

Obj = (x:1); // obj has its own property x and inherits toString delete obj.x; //Deletes x and returns true delete obj.x; //Does nothing (x doesn't exist) and returns true delete obj.toString; // Will do nothing (toString is not its own property) and return true delete 1; // Pointless, but will return true

The delete operator does not delete non-configurable properties, attribute configurable which has the value false. (However, it can remove custom properties of non-extensible objects.) Non-configurable properties are built-in object properties, as well as global object properties created using variable and function declaration statements. Trying to remove a non-configurable property in strict mode raises a TypeError. In non-strict mode (and in ECMAScript 3 implementations), the delete operator simply returns false in such cases:

Delete Object.prototype; // Removal is not possible - non-configurable property var x = 1; // Declaration of a global variable delete this.x; // This property cannot be deleted function f() () // Global function declaration delete this.f; // This property cannot be deleted either

Checking the existence of properties

Objects in JavaScript can be thought of as sets of properties, and it is often useful to be able to test membership in a set - to check whether an object has a property with a given name. You can perform such a check using the operator in, using methods hasOwnProperty() And propertyIsEnumerable() or simply by accessing the property.

The in operator requires that it be given a property name (as a string) as its left operand and an object as its right operand. It returns true if the object has its own or inherited property with that name:

Var obj = ( x:1 ) "x" in obj; // true: obj has its own property "x" "y" in obj; // false: obj does not have property "y" "toString" in obj; // true: obj inherits the toString property

The hasOwnProperty() method of an object checks whether the object has its own property with specified name. For inherited properties it returns false:

Var obj = ( x:1 ) obj.hasOwnProperty("x"); // true: obj has its own property "x" obj.hasOwnProperty("y"); // false: obj does not have property "y" obj.hasOwnProperty("toString"); // false: toString - inherited property

The propertyIsEnumerable() method imposes additional restrictions compared to hasOwnProperty(). It returns true only if the specified property is a native property whose enumerable attribute is set to true. Properties of built-in objects are not enumerable. Properties created by a regular JavaScript program are enumerable unless one of the ECMAScript 5 methods below has been used to make the properties non-enumerable.

Often, instead of the in operator, it is enough to use a simple property access expression and use the !== operator to check for inequality with the undefined value:

Var obj = ( x:1 ) obj.x !== undefined; // true: obj has property "x" obj.y !== undefined; // false: obj does not have property "y" obj.toString !== undefined; // true: obj inherits the toString property

However, the in operator distinguishes situations that are indistinguishable using the property-based technique presented above. The in operator distinguishes the absence of a property from a property that has the value undefined.

Enumerating Properties

Instead of checking for individual properties, sometimes you want to iterate over all existing properties or get a list of all the properties of an object. This is typically done using a for/in loop, but the ECMAScript 5 standard provides two convenient alternatives.

The for/in loop statement executes the body of the loop for each enumerable property (either native or inherited) of the specified object, assigning the property name loop variable. Built-in methods inherited by objects are non-enumerable, and properties added to objects by your program are enumerable (unless you use the functions described below to make properties non-enumerable). For example:

// A simple object with three enumerable properties var user = ( login:"kot86", name:"Alexandr", age:26 ); user.propertyIsEnumerable("toString"); // false, toString - built-in method for (n in user) console.log(n);

Some libraries add new methods (or other properties) to the Object.prototype object so that they can be inherited and made available to all objects. However, until the ECMAScript 5 standard, there was no way to make these additional methods non-enumerable, so they ended up being enumerated in for/in loops. To resolve this issue, you may need to filter the properties returned by the for/in loop. Below are two examples of implementing such filtering:

For (n in user) ( if (!user.hasOwnProperty(n)) continue; console.log(n); ) for (n in user) ( if (typeof user[n] === "function") continue; console.log(n); )

In addition to the for/in loop, the ECMAScript 5 standard defines two functions that enumerate property names. The first of them, Object.keys(), returns an array of names of the object's own enumerable properties.

The second ECMAScript 5 function that performs property enumeration is Object.getOwnPropertyNames(). It acts like the Object.keys() function, but returns the names of all of the specified object's own properties, not just enumerable ones. ECMAScript 3 implementations do not have the ability to implement such functionality because ECMAScript 3 does not provide the ability to obtain non-enumerable properties of an object.

Methods for reading and writing properties

It was already said above that an object property has a name, a value and a set of attributes. In ECMAScript 5, a value can be replaced by one or two methods, known as methods reads (getter) And records (setter). Properties for which read and write methods are defined are sometimes called properties with access methods to distinguish them from data properties that represent a simple value.

When a program tries to get the value of a property with accessor methods, the interpreter calls the read method (without arguments). The value returned by this method becomes the value of the property access expression. When a program tries to write a value to a property, the interpreter calls the write method, passing it the value to the right of the assignment operator. This method is responsible for "setting" the value of the property. The value returned by the write method is ignored.

Unlike data properties, accessor properties do not have a writable attribute. If a property has both read and write methods, it is read/write. If a property has only a read method, it is read-only. And if a property only has a write method, it is write-only (this is not possible for data properties) and attempts to read the value of such a property will always return undefined.

The simplest way to define a property with accessor methods is to use the extended object literal definition syntax:

Var obj = ( // Normal data property data_prop: value, // A property with access methods is defined as a pair of functions get accessor_prop() ( /* function body */ ), set accessor_prop(value) ( ​​/* function body */ ) );

Properties with accessor methods are defined as one or two functions whose names are the same as the property name and with the function keyword replaced with get and/or set.

Note that you are not required to use a colon to separate the property name from the function that controls access to the property, but you are still required to use a comma after the function body to separate the method from other methods or data properties.

As an example, consider the following object, which represents the Cartesian coordinates of a point on a plane. It has the usual data properties to represent the X and Y coordinates, as well as properties with accessor methods to get the equivalent polar coordinates of a point:

Var p = ( // x and y are regular data properties, read/write x: 1.0, y: 1.0, // r is a read/write property with two access methods. // Don't forget to add commas after the methods access get r() ( return Math.sqrt(this.x*this.x + this.y*this.y); ), set r(newvalue) ( ​​var oldvalue = Math.sqrt(this.x*this.x + this.y*this.y); var ratio = newvalue/oldvalue; this.x *= ratio; this.y *= ratio; ), // theta is a read-only property with a single read method get theta() ( return Math.atan2(this.y, this.x); ) );

Note the use of the this keyword in the read and write methods above. The interpreter will call these functions as methods of the object in which they are defined, i.e. in the body of the function this will refer to the point object. This allows the read method of property r to reference properties x and y, like this.x and this.y.

Properties with accessor methods are inherited just like regular data properties, so the p object defined above can be used as a prototype for other point objects. New objects can define their own x and y properties, and they will inherit the r and theta properties.

Object Attributes

All objects have prototype, class and extensible attributes. All of these attributes are described in the subsections below.

prototype attribute

An object's prototype attribute specifies the object from which properties are inherited. It is important to understand that when a prototype reference occurs in program code, it denotes a regular property of an object, not the prototype attribute.

The prototype attribute is set when the object is created. For objects created using literals, the prototype is Object.prototype. The prototype of an object created using the new operator is the value of the prototype property of the constructor. And the prototype of the object created using Object.create() is the first argument of this function (which can be null).

The ECMAScript 5 standard provides the ability to define the prototype of any object by passing it to a method Object.getPrototypeOf(). ECMAScript 3 does not have an equivalent function, but you can often define the prototype of obj using the expression obj.constructor.prototype.

Objects created using the new operator usually inherit the property constructor A reference to the constructor function used to create the object. And as mentioned above, constructor functions have a prototype property, which defines the prototype of the objects created using this constructor.

Note that objects created using object literals or Object.create() receive a constructor property that refers to the Object() constructor. Thus, constructor.prototype refers to the true prototype for object literals, but this is usually not the case for objects created by calling Object.create().

To determine whether one object is a prototype (or a link in a chain of prototypes) of another object, use the method isPrototypeOf(). To find out whether p is the prototype of obj, you need to write the expression p.isPrototypeOf(obj). For example:

Var p = (x:1); // Define a prototype object. var obj = Object.create(p); // Create an object with this prototype. p.isPrototypeOf(obj); // => true: obj inherits p Object.prototype.isPrototypeOf(p); // => true: p inherits Object.prototype

class attribute

class attribute object is a string containing information about the type of the object. Neither ECMAScript 3 nor ECMAScript 5 provides the ability to change this attribute and provides only indirect ways to determine its value. By default, the toString() method (inherited from Object.prototype) returns a string like:

Therefore, to determine the class of an object, you can try calling the toString() method of this object and extracting the substring from the eighth to the penultimate character from the result. The tricky part is that many methods inherit from other, more useful implementations of the toString() method, and to call the required version toString(), you need to make an indirect call using the Function.call() method.

The example below defines a function that returns the class of any object passed to it:

// Name of the object class function classof(obj) ( if (obj === null) return "Null"; if (obj === undefined) return "Undefined"; return Object.prototype.toString.call(obj).slice (8,-1); )

This classof() function can be passed any value allowed in JavaScript. Numbers, strings, and booleans act like objects when toString() is called on them, but null and undefined values ​​are treated differently.

extensible attribute

The extensible attribute of an object determines whether new properties can be added to the object. In ECMAScript 3, all built-in and user-defined objects were implicitly extensible, and the extensibility of runtime objects was implementation-specific. In ECMAScript 5, all built-in and user-defined objects are extensible unless they have been converted to non-extensible objects, and the extensibility of runtime objects is still implementation-specific.

The ECMAScript 5 standard defines functions for getting and changing the extensibility attribute of an object. To determine whether an object can be extended, you must pass it to the method Object.isExtensible(). To make an object non-extensible, you need to pass it to a method Object.preventExtensions(). Note that once an object is made non-extensible, it cannot be made extensible again. Note also that the call to preventExtensions() only affects the extensibility of the object itself. If new properties are added to the prototype of a non-extensible object, the non-extensible object will inherit those new properties.

The purpose of the extensible attribute is to allow objects to be "fixed" in a certain state, prohibiting changes. The extensible attribute of objects is often used in conjunction with the configurable and writable property attributes, so ECMAScript 5 defines functions that make it easy to set these attributes at the same time.

Method Object.seal() acts like the Object.preventExtensions() method, but not only does it make the object non-extensible, it also makes all of that object's properties unconfigurable. That is, new properties cannot be added to the object, and existing properties cannot be deleted or configured. However, existing writable properties can still be changed.

Once Object.seal() is called, the object cannot be returned to its previous state. To determine whether the Object.seal() method has been called on an object, you can call the method Object.isSealed().

Method Object.freeze() provides even more rigid fixation of objects. In addition to making the object non-extensible and its properties unconfigurable, it also makes all native data properties read-only. (This does not apply to object properties with accessor methods that have write methods; those methods will still be called by assignment statements.) To determine whether the object's Object.freeze() method has been called, you can call the Object.isFrozen().

It is important to understand that Object.seal() and Object.freeze() only affect the object that is passed to them: they do not affect the prototype of that object. If your program needs to completely commit an object, you will probably need to also capture the objects in the prototype chain.

Object Serialization

Object serialization is the process of converting objects into a string representation form, which can later be used to restore them. ECMAScript 5 provides built-in functions for serializing and restoring JavaScript objects JSON.stringify() And JSON.parse(). These functions use the interchange format JSON data. The name JSON comes from "JavaScript Object Notation" (a form of JavaScript object notation), and the syntax of this notation is similar to the syntax of object and array literals in JavaScript:

Var obj = (x:1, y:(z:)); // Define a test object var s = JSON.stringify(obj); // s == "("x":1,"y":("z":))" var p = JSON.parse(s); // p - copy of object obj

JSON format syntax is only a subset of JavaScript syntax and cannot be used to represent all possible values ​​allowed in JavaScript. Supported and can be serialized and restored: objects, arrays, strings, finite numeric values, true, false and null. NaN, Infinity, and -Infinity values ​​are serialized to null. Date objects are serialized into ISO date strings, but JSON.parse() leaves them in their string representation and does not restore the original Date objects.

Function, RegExp, and Error objects and the undefined value cannot be serialized or restored. The JSON.stringify() function serializes only the enumerable native properties of an object. If a property's value cannot be serialized, the property is simply excluded from the string representation. Both JSON.stringify() and JSON.parse() take an optional second argument that can be used to customize the serialization and/or recovery process, for example by defining a list of properties to be serialized or a function to transform values ​​during serialization.

An object is an unordered collection of properties. A property is a part of an object that simulates a variable. A property consists of a name and a value.

There are three categories of objects in JavaScript:

• Basic type objects are objects defined in the ECMAScript specification. For example, objects of type Array, Function, Date, or RegExp are objects of the base type.
• Runtime Objects are objects defined in the runtime environment (such as a browser). For example, objects of type HTMLElement are runtime objects.
• Custom objects is any object created as a result of the execution of JavaScript code.

Creating an Object

An object can be created using an object literal or the new operator with a constructor.

An object literal is a comma-separated list of zero or more properties (name: value pairs) enclosed in curly braces. The property name can be any valid identifier, a string literal (the empty string is allowed), or a number. Numeric property names are automatically converted to strings. The property value can be a value of any type or an expression (the property value in this case will be the result of evaluating the expression):

// Create an empty object var o = (); // Create an object with three properties var user = ( name: "Homer", "age": 45, 1: true );

Creating an object using the new operator:

Var o = new Object();

Operations with an object

The main operations performed with objects are adding new properties, changing existing properties, deleting properties and accessing properties.

You can add a new property to an object by assigning a value to the property. To assign a value to a property, it must be accessed. To access a property, use one of the access operators: . (dot) or (square brackets):

Accessing a property and changing its value is done in exactly the same way (using access operators):

Var o = (x:5); alert(o.x); // Accessing the property alert(o["x"]); // Access to property o.x = 10; // Change the value

Removing a property is done using the delete operator:

Var o = (x:5); alert("x" in o); // true delete o.x; alert("x" in o); // false

To iterate through the properties of an object, use a for-in loop:

Var obj = (x: 5, y: 10, str: "Hi!"); for (var prop in obj) ( alert(prop); )

Object Methods

A property whose value is a function is called a method. Calling a method is carried out in the same way as calling a regular function - using the operator () (call operator):

Var o = ( sayHi: function() ( alert("Hello!"); ) ); o.sayHi(); // "Hello!"

To access the properties of an object inside a method, use the this keyword. It contains a reference to the object with which the method was called:

Var o = ( name: "Homer", sayName: function() ( alert(this.name); ) ); o.sayName(); // "Homer"

Instead of the this keyword, you can use the name of the object directly, but this is not very convenient, since if the name of the object changes, you will also have to change the name in the methods:

Var o = ( name: "Homer", sayName: function() ( alert(o.name); ) ); o.sayName(); // "Homer"

Greetings to everyone who reads this publication. Today I want to walk you through a key tool of the language - JavaScript objects. Let me remind you that js is cross-browser and works on all operating systems (windows, mac os, etc.). Unlike object-oriented programming languages, the implementation of objects in js differs significantly from the usual functionality and variations in the use of instances, for example, in C#.

Therefore, after reading the current article, you will learn the main distinguishing features of script objects, learn in what ways they can be created, updated and deleted. I will also touch on the topic of properties, methods and constructors, and talk about useful commands and of course a little about inheritance. I think it's time to start learning!

What is an object in JavaScript and what capabilities does it have?

In js, objects are simple associative arrays (they are also called hashes).

What is an associative array?

This is a data structure that stores a certain amount of information relating to and describing a specific element. All data is structured and interconnected as “key => value”.

For example, you need to describe cars. Then you create an auto object and describe its characteristics in an array. I decided to describe the make of the car (name), its color (color) and cost (price). Below I have attached the code for implementing the described task.

1 2 3 4 5

var avto = ( name: "BMW 116i", color: "black", price: 588000 );

var avto = ( name: "BMW 116i", color: "black", price: 588000 );

Here you see one way to create an object called “avto”. Name, color and price are keys that can be used during the writing of the application.

I got ahead of myself with this example, so now let’s look at everything in order.

You can create an object in several ways:

var auto = (); or var auto = new Object();

In both cases an empty object is created with famous name, but the first option is used much more often, since it is shorter and more convenient to write.

All about properties

Now you need to fill the empty object with parameters. To do this, you need to add properties, which I also called keys above. Again, there are two ways to declare properties.

I would like to note that JavaScript does not have a strict framework for creating and initializing such parameters. New properties can appear throughout the code, just as they can be deleted and updated.

Thus, you can create all the keys at once or declare them as they become available. And even if during the writing of the program you turn to non- existing keys, there will be no error. In this case, “undefined” will be returned.

First way.

Creating and accessing properties using a dot. To implement this option, you need to write the name of the object, and then add the name of the key to it through a dot and then assign some value through the equal sign:

avto.name = “BMW 116i”

But in this method you will add one more element to the existing keys:

This method is used when the name of the property is already known and you need to do certain actions with the values.

Second way.

No different from the first, if you compare their purposes. However, this method has a slight advantage. For this option, square brackets are used:

avto[“name”] = “BMW 116i”

A nice addition is the ability to create property names in the form of any string. Eg,

avto[“name of the car”] = “BMW 116i”

Working with keys through square brackets is used when some parameters are entered by the user and stored in variables or when the names of properties are unknown in advance. For example, a user requests the price of a selected car. The element that was called is written to the variable, and the price is sent in response:

var auto = (); avto.name = "BMW_116i"; avto.price = 588000; var key = "price"; // the price of the car was requested alert(avto);

Now let's move on to deleting properties. Everything is very simple here. To remove, use the command delete. So, if you add the following 2 lines to the last example below:

delete auto.price;

alert(auto);

Then, when calling alert a second time, the dialog box will display “undefined”.

A few words about compactness

At the current stage, I told you how to create an object and describe its properties. I have attached test cases to this, but the most attentive of you, dear readers, have noticed that the first program code is somewhat different from all the others.

And all because it uses a compact data representation. This is a very popular method of declaring keys because it is shorter to write and easier to understand visually.

Let's go through our properties

In JavaScript, you can quickly iterate through created properties. For this purpose, a special mechanism was provided, better known as cycle.

If you are familiar with other programming languages, you know that most often loops are created using the word for, then the condition for enumerating elements is written in parentheses.

In js it reminds its appearance cycle foreach from the C# language. Check out the general design:

for (var obj in object) ( // performing the search)

where obj is responsible for the name of the enumerated keys,

object – for their values.

And now here is a concrete example for you.

1 2 3 4 5 6 7 8

var avto = ( name: "BMW 116i", color: "black", price: 588000 ); for (var obj in object) ( alert(obj + ":" + object) )

var avto = ( name: "BMW 116i", color: "black", price: 588000 ); for (var obj in object) ( alert(obj + ":" + object) )

It's time to get acquainted with the methods

The scripting language provides for the creation of methods. This is an absolutely simple mechanism with which at any time you can add a method or methods to any object that expand the capabilities of the created associative arrays. They are also called function properties.

Js itself is very dynamic and amazing to some extent. This is how elements can be created different types. When learning this language, you do not need to memorize complex structures, since many declarations are very similar to each other.

So, to create a method, you need to declare an object, and then start writing a command that is exactly like creating properties. However, after “=” it is no longer the value that is written, but the keyword function (variable). And then the actions are listed in curly brackets.

Here is the implementation of this mechanism:

var avto =() avto.name = “BMV” avto.year = 1999 avto.drive = function(k) ( alert(“The car has passed”+n+“ km.”)) avto.drive(300) avto.drive( 450)

As you can see, this example contains properties and methods whose calls are initially identical.

Does JS also have constructors?

Yes sir! In this language, everything that uses the keyword " new", automatically becomes a constructor. So, above you saw the declaration of an empty object in the form: avto = new Object ();. This is the constructor.

For clarity, consider the lines below.

var bob = new Object();

bob.name = "Bob Smith";

However, this is not the entire arsenal of possibilities. In js, you can create your own constructors and then use them to declare new objects.

So, I want to “make” a custom constructor for already existing cars. Please note that the name must be capitalized. This distinguishing feature functions. To do this, I write the following software implementation:

function Auto (name, price) (

this.name = name;

this.price = price;

Now, when you create an unlimited number of objects and apply this constructor to them, they will all belong to the same class. For example:

var car1 = new Avto("BMW", 650000);

var car2 = new Avto("Audi", 520000);

In addition to this, you can create methods inside the constructor.

Features of inheritance in JavaScript

Typically, in many languages, inheritance is based on classes that can inherit from each other. Then you can hear expressions such as “ancestor class”, “child class”, etc.

However, in js everything is different. This is where objects are inherited.

All inheritance is based on internal link between objects, which is known as a "prototype". If you add “.prototype” to a method using a dot, and then enter the name of the prototype, then all objects of the selected method will be inherited from this prototype.

Let's move on to an example.

function Transport (name) ( this.name = name this.canDrive = true ) var transport = new Transport ("avto") // created a transport object function Bike (name) ( this.name = name ) Bike.prototype = transport / / specify that all new objects of this class will use transport bike1 = new Bike ("for_sport") bike2= new Bike ("for_child") console.log(bike1.name) console.log(bike2.name) console .log(bike1.canDrive)

I guess I'll end here. I've told you about the fundamental aspects of a scripting language. However, this is only superficial knowledge. Next we will go deeper. In the meantime, don’t forget to join the ranks of my subscribers and share the link to the article with your friends. Good luck!

Bye bye!

Best regards, Roman Chueshov

Read: 97 times

Objects are the cornerstone of JavaScript. Many built-in data types are represented as objects. To be successful developer JavaScript, you need to have a clear understanding of how they work. The building blocks of an object are called its fields or JavaScript object properties. They are used to describe any aspect of an object. The property could describe the length of a list, the color of the sky, or a person's date of birth. Creating objects is an easy process. The language provides a 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. In dot notation, a resource can be accessed by specifying the name of the host object, followed by the period and the name of the property. For example, when object.foo was initially assigned the value one, then its value will become 2 after execution JavaScript operator objects.

An alternative access syntax is known as bracket notation. In notation, the object name is followed by a set of square brackets. In them, the property name is specified as a string:

object["foo"] = 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 obtains the corresponding property. Property names are created on the fly by concatenating the contents of the variable f with the string "oo":

object = "bar".

Bracket notation allows property names to contain characters that are prohibited 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 dot notation, they will encounter a syntax error:

object["!@#$% &*()."] = true.

Properties of nested JavaScript objects can be accessed by chaining dots 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 = ( baz: ( foo: ( bar: 5 ) ) ).

The following expressions access the bar attached property. 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 those shown in the previous example can cause performance degradation if used incorrectly and cause the JavaScript object to fail. Evaluating each dot or bracket 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 uses.

Function as method

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

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

JavaScript object methods can be called using marks 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. Luckily, adding new data is as easy as creating an assignment statement. An empty object is created. Then, using assignment operators, we add two properties, foo, and bar, and the baz method:

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

Program Encapsulation

The basic idea of ​​object-oriented programming is to divide programs into smaller parts and make each part responsible for managing its own state. Thus, some knowledge about how a part of a program works may be local to that part. Someone working on the rest of the program shouldn't 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 communicate with each other through interfaces, limited sets of functions or bindings that provide useful functionality at a more abstract level while hiding their exact implementation. Such parts of a 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. The rest, which should not touch external code, are called private.

Many languages ​​provide the ability to distinguish between public and private properties and do not allow external code to access private ones. JavaScript, again taking a minimalist approach, is not there yet. Work is currently underway to add this language. Therefore, JavaScript programmers will successfully use this idea. Usually, accessible interface described in the documentation or comments. It is also common practice to place an underscore (_) at the beginning of property names to indicate that those properties are private. Separating the interface from the implementation is a great idea. This is usually called encapsulation.

Properties

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

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

A property has a key (also known as a "name" or "identifier") before a 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 ​​are accessed using dot notation. It can be of any type. You can add a boolean value. To remove a property, use delete on the Error case of a JavaScript object.

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

1. The Syntax Error object inherits from the Error object.
2. JSON Parse error of a certain type of Syntax Error object.

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

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

1. Bad control character in a string literal.
2. Bad character in a string literal.
3. Poor Unicode output.
4. Bad escape character.
5. Unterminated string.
6. Unexpected non-numeric code.
7. There are no numbers after the decimal point.
8. Unterminated fractional number.
9. There are no numbers after the degree indicator.
10. There are no numbers after the exponent sign.
11. The exponential part has no number.
12. Unexpected end of data.
13. Unexpected keyword.
14. An unexpected symbol.
15. End of data when reading the contents of an object.
16. Expected property name or ")".

Computational properties

You can use square brackets in an object literal. These are called computed properties. An example is given below.

The meaning of a computed property is simple: it means that the property name must be taken from fruit. So if a visitor enters "apple", bag will become (apple: 5). Can be used more complex expressions in square brackets:

let fruit = "apple";

: 5 // bag.appleComputers = 5

Square brackets are much more powerful than dot notation. They allow property names and variables. But they are also more cumbersome to write. So most of the time, when property names are known and simple, a dot 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", etc. But when sorting JavaScript objects, there is no such restriction.

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

obj.__proto__ = 5;

alert(obj.__proto__); // didn't work as intended

As you can see from the code, the purpose of primitive 5 is ignored. This can be a source of errors and even vulnerabilities if the operator intends to store arbitrary key-value pairs in an object and allow the visitor to specify the keys. In this case, the visitor can select "proto" as the key and add JavaScript to the 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 is converted to an integer and back again, it is still the same. But “+49” and “1.2” are not like that. On the other hand, if the keys are not integer, then they are listed in the order they were created. Example below.

To fix the problem with dialing codes, you can "cheat" by making the codes incomplete. Adding a "+" (plus sign) before 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 ​​are assigned and copied "as an integer value". A variable stores an "address in memory" rather than the object itself or a "reference" to it. You can use any variable to access and change its contents.

The example above shows that there is only one object and admin to log into it. Then, if a different key (user) is later used, the user will notice the changes.

The equality operators == and strict equality === for objects work the same way. Two objects are equal only if they are the same object. For comparisons like obj1 > obj2 or comparisons with the primitive obj == 5, the 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 an error. Only accessing a non-existent property returns undefined. It provides a very common way to test a property and compare it to an undefined one. Below is an example.

Using "in" for properties that store undefined. Usually a strict "=== 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 remains undefined.

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

"for..in" loop

In order to move 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 a looping variable inside a 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 with any string.

The point here requires that the JavaScript object's keys be a valid variable identifier, meaning there are no spaces or other restrictions. Care must be taken to ensure that the line inside the brackets is quoted correctly. Square brackets also provide a way to get the property name from the result of any expression, as opposed to a literal string from a variable:

let key = "likes birds";

// same as user["likes birds"] = true;

user = true.

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

Const object

A declared const object can be modified. An example is given below.

It might seem like the JavaScript object in line (*) would throw an error, but that's not the case. This is because const captures the value of user itself. And here the user keeps a reference to the same object all the time. The line (*) goes inside the object, it is not reassigned to 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 if it needs to be duplicated. This is also doable, but a little more difficult because JavaScript doesn't have a built-in method. In fact, this is rarely necessary. Copying by reference is used in most cases. But if you really need this, then you need to create a JavaScript object and replicate the structure of an existing one, copying its properties at a primitive level. Below is an example.

And you can also use the Object.assign method for this. The arguments 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. Then it returns to dest. For example, you can use it to combine several objects into one.

And you can also use Object.assign to replace the simple clone loop. It copies all of the user's properties to an empty object and returns it, just like a loop, but shorter. Until now, it has been assumed that all user properties are 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 is 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, the method is called _.cloneDeep(obj).

Advanced Methods

If a programmer loops over an object and wants to get all the properties in the same order they were added, he 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 in normal scenarios these powerful features are not needed. Some of these methods may not work in older browsers, such as early releases of Netscape 4.

The prototype could be used to create JavaScript objects and all mycircle methods, not just the new ones. This has a mixed performance impact. They shouldn't store individual copies methods for each object instance, so may require less memory to operate, but the browser must look for the current and parent scopes to find them. This may result in extreme latency. Generally, 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 an object's property 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 that property is bound to an instance of an individual object. In this case, it becomes possible to check whether the constructor of an object has the same property with the same value as the object instance itself. This may give incorrect results if there are separate JavaScript object properties with the same value for both the object instance and the circuit prototype. The hasOwnProperty method takes a single parameter - the property name as a string.

You can create private methods in a similar way. It is simply a function that is created inside a constructor function. This may seem confusing to some, but that's how it works. Private function can only be called by the constructor itself or by methods that are defined on the line. They can be used as public methods if assigned to a public constructor and accessed using public methods of Javascript objects.

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

) var secretValue = "";

this.method1 = function () ( secretValue = "no surprises";!}

this.method2 = cantBeSeen;

) var oneOb = new myob();

oneOb.method1();

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

//alerts "no surprises".

Command Template

Command objects allow for loosely coupled systems by separating those that issue a request from objects and those that actually process the request. These requests are called events, and the code that processes the requests is called event handlers.

Suppose you are creating 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 a context menu, for example by clicking right button mouse over the text field or keyboard shortcut. Command objects allow you to centralize the processing of these actions, one for each operation, when only one command is needed to process all Cut requests, one for all Copy requests, and one for all Paste requests.

Because teams centralize all processing, they are also often involved in handling undo functions for the entire application. Significant improvements can be achieved by applying modern JavaScript techniques, resulting in more efficient, reliable, and maintainable applications.

To learn how to do this, you can use JavaScript + jQuery templates. 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 need the latest tools and techniques for JavaScript templates, jQuery templates and template architectures, then this is the best use case. This package contains valuable, up-to-date information for JavaScript developers. Here's what's included:

1. JavaScript-optimized GoF templates.
2. Modern JavaScript Design Patterns.
3. Model-View Design Patterns.
4. jQuery design templates.
5. Architectural patterns of JavaScript idioms.
6. Example applications (MVC, SPA, etc.)

The proposed basics of JavaScript object syntax are very important for beginning programmers. One must first understand objects, then there will be knowledge of object-oriented programming. It is critical to have a deep understanding of this material as it serves as the foundation for the rest of the JavaScript language.