The syntax of OOP in js using prototype

0 like 0 dislike
5 views
What is the difference between these pieces of code and which in some cases would be preferable?



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); 



added @ 1732:

E


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

5 Answers

0 like 0 dislike
JS — object-oriented language, but it lacks classes, they are replaced by the constructors of objects, so instead of the usual inheritance using classes there is inheritance through prototypes. I.e. an instance of a class inherits its properties and methods, which are in his prototype.
A class constructor (function Obj() {}) — the function which describes the properties and methods of the prototype, so all of them will have access when creating the instance.
\r
In the example, A empty constructor and Obj.method assigns the method to the object, not its prototype, so it will not be inherited in obj = new Obj(). This example does not work.
\r
Example B is correct, here is the method added to the prototype and is inherited by all instances.
\r
Example C is most often used when you want to implement a singleton or namespace, because it is a simple hash without a constructor, it cannot be derived from. This is not actually an object in the OOP sense, but simply an associative array that can contain any data, methods and other objects.
\r
Example D same as example C, only the 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.
\r
Example E is correct and is similar to example B, with the difference that the inherited method is defined directly in the constructor rather than using prototype.
by
0 like 0 dislike
Well actually the difference between B and E is, in case E, when the method is declared directly in the constructor it will have access to the private variables and methods, is the so-called privileged methods, but in example B it is impossible to work with private data.
That's what I'm talking about:
\r
var MyClass = function() {
\r // Private attributes
\r var _a, _b;
\r // Private method
\r function _myPrivate(isbn) {
}
\r // public privileged method
\r this.MyPublicPlus = function() {
\r
};
}
\r
\r// non-privileged public method.
MyClass.prototype = {
MyPublic: function() {
}
};

\r

Method MyPublicPlus will have access to the _a, _b and _myPrivate(), and no MyPublic...
by
0 like 0 dislike
In General, all who are interested in what is inside of Javascript, I advise you to read www.crockford.com/javascript/javascript.html
by
0 like 0 dislike
In example E another is to draw attention to the word this, which means that the method will be added to the prototype.
If it is not used, you can create private properties and methods accessible from other methods of the instance, but not directly.
\r
\r
function Obj() { var privateMethod = function(x) { return x; } this.publicMethod = function(x) { return privateMethod(x); } } var obj = new Obj(); obj.privateMethod(1); // -> will raise an error obj.publicMethod(1); // -> returns '1' 
by
0 like 0 dislike
A, B, E — a constructor Obj. in the case of a function call through the new designer will work with the new object, in the case of a call through call/apply to extend Your desired object. i.e. one function may be a "class" and "admixture".
C, D — the creation of the object "by hand", without a designer. in the D function is delivered and named — means that it can be used not only as a method.
B — used prototyping. a prototype has each object* this means that non-primitive data types (functions, arrays, dates, objects) will be stored only in the prototype, saving memory and time of "creation" of the object, but slowing later work with the object due to the fact that an appeal to the "common" data/methods will occur through (a chain of) prototypes.
A function is also an object, and "method" is indicated at the function object. a function object (constructor) is not related to its variable objects. duplicate objects the constructor is a good place for all stuff that do not want to extend to all of his "instances".
\r
a couple of things you should be aware of:
\r
\rfunction 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
\rfunction Obj() { this.val = 5; this.method = function() { alert(this.val *2); }; }; var obj = new Obj(); window.setTimeout(obj.method, 1); // NaN
\r
read:
\rru.wikipedia.org/wiki/Прототипное_программирование
* dklab.ru/chicken/nablas/40.html — .constructor.prototype; somewhere there was an explanation of the need to put the conctructor of the prototype to the "current" class
\rwww.webreference.com/js/column26/apply.html — apply-impurity
so I recommend to Google about all sorts of typeof, instanceof, hasOwnProperty, isPrototypeOf, etc.
\r
in what proportion to use prototypes, closures, impurities and other decorators — it's entirely Your style.
by
110,608 questions
257,186 answers
0 comments
1,120 users