OOP syntax in js and use of prototype

Question

JavaScript

What is the difference between these pieces of code and which one will be preferable in what cases?

---

A

function Obj() {}
Obj.method = function(type) {
    return this.coords[type];
};
var obj = new Obj(),
    current = obj.method(type);

---

B

function Obj() {}
Obj.prototype.method = function(type) {
    return this.coords[type];
};
var obj = new Obj(),
    current = obj.method(type);

---

C

var obj = {
    method : function(type) {
        return this.coords[type];
    }
},
    current = obj.method(type);

---

D

function objMethod(type){
    return this.coords[type];
}
var obj = {
    method : objMethod
},
    current = obj.method(type);

---

[email protected]:

E

function Obj() {
    this.method = function(type) {
        return this.coords[type];
    };
}
var obj = new Obj(),
    current = obj.method(type);

Answer 1

JS is an object-oriented language, but it lacks classes, they are replaced by object constructors, so instead of the usual inheritance through classes, there is inheritance through prototypes. Those. an instance of a class inherits its properties and methods that are in its prototype.
The class constructor (function Obj() {}) is a function that describes the properties and methods of the prototype, so all of them will be accessed when an instance is created.
In example A, the constructor is empty, and Obj.method assigns the method to the object, not its prototype, so it will not be inherited in obj = new Obj(). This example doesn't work.
Example B is correct, here the method method is added to the prototype and will be inherited by all instances.
Example C is most often used when one needs to implement a singleton or namespace because it is a simple hash without a constructor and cannot be inherited. In fact, this is not an object in the OOP sense, but simply an associative array that can contain any data, methods, and other objects.
Example D is similar to example C, except that its method property contains a reference to an external function. This example can be used when you need to call some function from an external library.
Example E is correct and similar to example B, with the difference that the inherited method is set immediately in the constructor, and not through prototype.

Answer 2

Well, in fact, there is a difference between B and E, in the case of E, when a method is declared directly in the constructor, it will have access to private variables and methods, these are the so-called privileged methods, but in example B there is no way to work with private data.
Here's what I'm talking about:

var MyClass = function() {
  // Приватные атрибуты
  var _a, _b;
  // Приватный метод
  function _myPrivate(isbn) {
  } 
  // публичный привилегированный метод
  this.MyPublicPlus = function() {
  };
}
// публичный непривилегированный метод.
MyClass.prototype = {
  MyPublic: function() {
  }
};


The MyPublicPlus method will have access to _a, _b and _myPrivate(), but MyPublic won't...

Answer 3

In general, for anyone who is interested in how Javascript works, I advise you to read www.crockford.com/javascript/javascript.html

Answer 4

In example E, you should also pay attention to the word this , which means that the method will be added to the prototype.
If you do not use it, you can create private properties and methods that will be available from other methods of the instance, but not directly.

function Obj() {
    var privateMethod = function(x) {
        return x;
    }
    this.publicMethod = function(x) {
      return privateMethod(x); 
   }
}
var obj = new Obj();
obj.privateMethod(1); // -> вызовет ошибку
obj.publicMethod(1); // -> вернет '1'

Answer 5

A, B, E - there is a constructor Obj. in the case of a function call through new, the constructor will work with a new object, in the case of a call through call / apply, it will expand the object you specified. those. one function can be both a "class" and a "mixture".
C, D - creating an object "by hand", without a constructor. in D, the function is moved and named - it is understood that it can be used not only as a method.
B - prototyping is used. Each object* has a prototype, which means that non-primitive data types (functions, arrays, dates, objects) will be stored only in the prototype, saving memory and time for “creating” the object, but slowing down subsequent work with the object due to the fact that access to "general" data/methods will occur through the (chain of) prototypes.
A - a function is also an object, and the "method" is designated exactly at the function object. the object of a function (-constructor) is in no way related to the objects it modifies. The constructor object is a good place for all the junk that you don't want to spread to all of its "instances".
a couple of points to be aware of:

function Obj() {}
Obj.prototype.q = [1,2,3];
var obj = new Obj();
Obj.prototype.q[1] = 8;
alert(obj.q +" - "+ Obj.prototype.q); // 1,8,3 - 1,8,3

function Obj() {
  this.val = 5;
  this.method = function() { alert(this.val *2); };
};
var obj = new Obj();
window.setTimeout(obj.method, 1); // NaN

read:
ru.wikipedia.org/wiki/Prototype_programming
* dklab.ru/chicken/nablas/40.html - .constructor.prototype; somewhere in the same place there was an explanation of the need to put the prototype conctructor in the “current” class
www.webreference.com/js/column26/apply.html - apply- mixture
I also recommend google about all sorts of typeof, instanceof, hasOwnProperty, isPrototypeOf, etc.
in what proportion to use prototypes, closures, mixins and other decorators is a matter of your style.