OOP in Javascript

Question

JavaScript

Please help me figure out if there is any fundamental difference in the following two examples?

function A(){
    this.a = 100;
    this.b = 200;
}
var a = new A();

function A(){
    this.a = 100;
}
A.prototype.b = 200;
var a = new A();

In different places met both that and another example. If there is a difference, what is it?

Answer 1

function С(){
    this.a = 100; 
    // this - это новый объект, который будет присвоен переменной o.
    // т.е. свойство "a" - это свойство создаваемого объекта
}
С.prototype.b = 200;
//С - формально  это функция, логически у нас - это класс. Любая функция имеет прототип, с помощью которого мы можем добавлять свойства и методы для класса
//т.е. свойство "b" - это свойство прототипа, которое наследуется при создании объекта класса
var o = new C();

Now for some practice:

var CThis;
function C(){
    alert(this.b); // 200 (b - уже есть, т.к. это свойство прописано в прототипе)
    this.a = 100;
    CThis=this; // сохраним для исследований
}
C.prototype.b = 200; // дополняем в класс новое свойство
var o = new C();

alert(CThis == o); //true 
alert(o.prototype); //undefined (у объекта нет прототипа)
alert(o.constructor==C); //true (у объекта есть конструктор)
alert(o.constructor.prototype==C.prototype); //true

Answer 2

In the first case, you add attributes to the newly created instance, in the second, one of the attributes is added to the prototype.

function A(){this.a = 100; this.b = 200;}
var a = new A();
var b = new A();
function B(){this.a = 100;}
B.prototype.b = 200;
var c = new B();
var d = new B();
a //A {a: 100, b: 200}
b //A {a: 100, b: 200}
a.a = 150; b.b = 250;
a //A {a: 150, b: 200}
b //A {a: 100, b: 250}
c.a = 175;
B.prototype.b = 275;
c //B {a: 175, b: 275}
d //B {a: 100, b: 275}

In objects c, the dproperty is binherited from the prototype and it is the same for all instances. Instances of object B do not have a "private" property. bThat is,

a.hasOwnProperty('a') //true
a.hasOwnProperty('b') //true
c.hasOwnProperty('a') //true
c.hasOwnProperty('b') //false

Answer 3

In the first case, when creating a new object var a = new A(), the values ​​a and b will be written to this object each time.
var a = new A(); var b = new A();
Both a and b will have properties with values. Both there and there, there will be 100 and 200. That is, simply speaking, in the first case, each new object will have properties a and b in it when it is created.
In the second case, the object will have only the property a when it is created. Because prototypes are quite an interesting thing and I advise you to read articles about them. But already when the object is created, the b property will also be present, because prototypes, as mentioned above, complement the finished object. The only difference is that all created objects will each have their own property a and one property on all b.
Prototyping is usually used to describe the methods of an object. I created a constructor, in which I described all the properties of the object, and in the prototype I described the methods of the object.

Answer 4

Difference? It depends on the context, but like this: in the first case, you explicitly specified the property of the object (class) A, in the second case, you added this property to an already prepared object (class).
When creating your own objects (classes), it is usually more transparent to use the first method.
"prototype" is more convenient when you complement an already existing object (class).

Answer 5

The prototype sets the value of the property on all objects of the class - this is an important point. Those. in the first case, each object of class A will have a personal property b, in the second case, all objects of class A have one common property b.