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 from this result, how does this all affect performance and what does do it all :)

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 the pros the first parts may seem boring and banal, but then it will be much more interesting :)
')

Objects in JavaScript

In many articles, the phrase "In JavaScript - all the object." Technically, this is not quite true, however, it makes a proper impression on newbies :)

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

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

So, in JavaScript there are 6 basic data types - Undefined (meaning no value), Null, Boolean (boolean type), String (string), Number (number) and Object (object).
In this case, the first 5 are primitive data types, but Object is not. In addition, it can be conditionally assumed that the Object type has “subtypes”: an array (Array), a function (Function), a regular expression (RegExp), and others.
This is a somewhat simplified description, but in practice it is usually sufficient.

In addition, the primitive types String, Number, and Boolean are definitely associated with non-primitive “subtypes” Object: String, Number, and Boolean, respectively.
This means that the string 'Hello, world', for example, can be created both as a primitive value and as an object of type String.
In short, this is done so that the programmer can also use methods and properties in working with primitive values ​​as if they were objects. And more about this can be read in the relevant section of this article.

Work on the link

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

test=function() {alert('Hello!')} // {alert('Hello!')} ( , , ) test
test_link=test; //test_link
test(); //Hello!
test_link(); //Hello!
* This source code was highlighted with Source Code Highlighter.

, , .
, test, test - «» «» , «test_link» — .

, — , . , — , (, ), (garbage collection), , .

, :

test={prop: 'sometext'} // prop
test_link=test; //

alert(test.prop); //sometext
alert(test_link.prop); //sometext

//
test_link.prop='newtext';

alert(test.prop); //newtext
alert(test_link.prop); //newtext
/* , - .
- . , , . */

//
test.new_prop='hello';
delete test.prop;

alert(test_link.prop); //undefined -
alert(test_link.new_prop); //hello -

//
delete test;
alert(test.new_prop);
/* , test , test.new_prop */
alert(test_link.new_prop); //hello
/* , , . test_link */

//
test=test_link; // test
test_link={prop: 'sometext'} //

alert(test_link.prop); //sometext
alert(test.prop); //undefined
/* C , test test_link .
, test_link , */
alert(test.new_prop); //hello - test

* This source code was highlighted with Source Code Highlighter.

, . , , — — .

, , , .

, String Number , .

obj=new String('hello'); //
simple='hello'; //

alert(obj); //hello
alert(simple); //hello -

alert(obj.length); //6 - String length,
alert(simple.length); //6
/* simple - , , String. */

obj.prop='text';
simple.prop='text';

alert(obj.prop); //text - obj ,
alert(simple.prop); //undefined - simple ,

* This source code was highlighted with Source Code Highlighter.

Number, Boolean (, , length, ).
, .. , . , .

— , , «test=new Array()» «test=[]», . .

, , - , , . , :

test={
 simple_property: 'Hello',
 object_property: {
  user_1: '',
  user_2: ''
 },
 function_property: function(user) {
  alert(this.simple_property + ', ' + this.object_property[user]);
 }
}

test.function_property('user_1'); //Hello, .

* This source code was highlighted with Source Code Highlighter.

test, 3 , , , . function_property, . .

this, (.. ) , . , this.simple_property=test.simple_property='Hello', this.object_property[user]=test.object_property[user]=''.

, this , , , . , .

test.function_property('user_1'); //Hello, .

test2=new Object(); // , test2={}

test.function_property.call(test2, 'user_1'); //
/* call . , function_property test, this test, test2. .. object_property, this.object_property[user] */

//
test2.simple_property='Good day';
test2.object_property=test.object_property; // ,

test.function_property.call(test2, 'user_1'); //Good day, .


* This source code was highlighted with Source Code Highlighter.

, . — , . «» .

2 , . simple_property object_property. , . , .

. JavaScript — ( ), . .

make_me=function(_name) {
alert(' ');
this.name=_name;
this.show_name=function() {alert(this.name);}
}

child=new make_me(''); //
/* , . new , . .. make_me - , , make_me, this . name, _name, show_name. ( , ) child , */

alert(child.name); //
child.show_name(); //

child2=new make_me('');
child2.show_name(); //

child2.show_name=function() {alert(' ');} // ,
child2.show_name(); //

child.show_name(); // -


* This source code was highlighted with Source Code Highlighter.

— , , .

, , Object (Function, Array ) — , , ..

, . . , . -, , . -, , , . .

( ), JavaScript. , , , — . , :

make_me=function(_name) {
alert(' ');
this.name=_name;
this.show_name=function() {alert(this.name);}
}
/*
function, , .. - , . , ( ) prototype, . , make_me.prototype=new Object();

, ( prototype) constructor, . .

, {constructor: ... ...} - .
*/

alert(typeof make_me.prototype); //Object - ,
alert(typeof make_me.prototype.constructor); //Function -
alert(make_me.prototype.constructor === make_me); //true

make_me.prototype.set_name=function(_name) {this.name=_name;} // make_me

child=new make_me(''); //
/* , , child [[Prototype]], , make_me.prototype. .. , , -  */

alert(child.name); //
child.show_name(); //

child.set_name('');
/* , set_name child. , child.[[Prototype]], . */
child.show_name(); // - :)

make_me.prototype.show_name2=function() {alert(', ' + this.name;} //.. - ,

child2=new make_me('');
child2.show_name2(); //,
child.show_name2(); //, - ,

child2.show_name2=function() {alert(' ');} // , show_name2 ( ) ""
child2.show_name2(); // - .. show_name2, ,

child.show_name2(); //, -

make_me.prototype={prop: 'hello'} //

alert(child.prop); //undefined
child.show_name2(); //,
/* , , . , [[Prototype]] child child2 ( make_me), make_me.prototype - , make_me */

child3=new make_me('');
alert(child3.prop); //hello -

* This source code was highlighted with Source Code Highlighter.

, (.. ), . , ( ) — .


, , :

make_me=function(_name) {
alert(' ');
this.name=_name;
this.show_name=function() {alert(this.name);}
}

make_me.prototype.set_name=function(_name) {this.name=_name;}
child=new make_me('');

alert(typeof make_me.prototype); //object - prototype
alert(typeof child.prototype); //undefined - prototype
alert(child.constructor.prototype === make_me.prototype); //true - constructor, - make_me, , , prototype

* This source code was highlighted with Source Code Highlighter.

, , prototype [[Prototype]] , .
( , ), , , , .

, — prototype, — [[Prototype]].

, , — .
:)
, .. — , , . .

bird=function() {} //
bird.prototype.cry=function(){alert('!');} //
bird.prototype.fly=function(){alert(' !');} //

duck=function() {}
duck.prototype=new bird();
duck.prototype.cry=function(){alert('-!');} //
duck.prototype.constructor=duck; // prototype.constructor duck, .. bird

billy = new duck(); // -
billy.fly(); // ! - ,
billy.cry(); //-! - -,

* This source code was highlighted with Source Code Highlighter.

.

, , ,

make_me=function() {}
child=new make_me();
alert(child.toString()); // [object]

* This source code was highlighted with Source Code Highlighter.

make_me, . , make_me.prototype, constructor, make_me.
:)
.. make_me — , , .. . — Function(), — , call, apply .. — . , make_me [[Prototype]], Function.prototype.

, Function — , (!) Object (.. Function.prototype.[[Prototype]].constructor===Object), — , , toString, hasOwnProperty ( — Function.prototype.[[Prototype]]['hasOwnProperty'] — , — , ). , Object.

? , . Object.prototype , . Object.prototype.[[Prototype]]=null; .

— Object Function. .. Object.[[Prototype]].constructor===Function.
— Object Function, Function.prototype — Object.

. , . child, make_me, — make_me.prototype.

, , child child.[[Prototype]] ( make_me.prototype), child.[[Prototype]].[[Prototype]] ( Object.prototype), toString, .

, — , JavaScript. .
, , .

, , . — .

//
man=function() {
this.live=function(){alert(' ');} //
this.walk=function(){alert(' ');} //
}

//
poet=function(){
this.kill=function(){alert(' ');} //
this.live=function(){alert(' ');} //
}

vladimir=new man(); // -
vladimir.live(); // -
vladimir.walk(); // -

poet.call(vladimir); // poet vladimir
vladimir.kill(); //
vladimir.live(); //

//
man.call(vladimir);
vladimir.live(); //

* This source code was highlighted with Source Code Highlighter.

? -, , . 2, .
-, - . .
-, , , , .

Upd:

, JavaScript, .

, , , , — , , , . , , , .

, Internet Explorer 6 7 .
1. — . , . , , . , , , , .. .
2. — Microsoft.
, , — ( ) , . — . IE — .

, ( ) , . , - , . , (.. ), . , .

, .

P.S. , - , . , .. , , , , :)