Which template to use when creating a javascript class?

Question

What is the best way to create classes (as in OOP) in Javascript? Now I am using the following template. This is normal?

var myclass = (function() { var _name; var baseObject = { a: 10, c: function() { return _name + " world " + privateFunc(); } }; function privateFunc() { return _name + "-ba"; }; function myclass(name) { _name = name; this.x = 9; }; myclass.prototype = baseObject; return myclass; })(); 

Answer 1

There is no “better” way. JavaScript has several OOP templates, and one of them you mentioned one of them (as well as popular). This is essentially a prototype (or pseudo-classical) template with closure for encapsulating static variables based on a private class.

There are other templates (for example, a functional template recommended by Douglas Crockford).

I personally recommend a pseudo-classical pattern (although the best example is a heated discussion).

If you are running OOP using JavaScript, I strongly recommend that you study the JavaScript library with built-in OOP, such as Dojo Toolkit or Closing Library . Other libraries (e.g. jQuery, MOOtools, Ext, etc.) have OOP modules and / or plugins.

Answer 2

In my opinion, the best way to create classes in JavaScript is to not do it. Forgive me for being stupid, but when working with JavaScript, try to forget about classes - they are not here, and you will agree that the language only concerns objects.

Without classes in the language, this means that less code needs to be written. In typical applications, most objects do not have siblings. You will have only one document , one window , one userList , etc. Create these objects using object literal notation:

 var userList = { users: [] }; 

While there are no classes in JavaScript, there are constructors and prototypes. These concepts come in handy when you have several similar objects (for example, users contained in userList ). Your code example uses both of these concepts. Using names like myclass , it's hard to say what you're trying to model. Here is an example of the User constructor and an extension of its prototype:

 var User = function (name) { this.name = name; }; User.prototype.sayHello = function () { return "Hello, my name is " + this.name; }; 

Answer 3

The following example illustrates a pattern that I personally developed over time.

It uses scope to allow private fields and methods.

For a detailed discussion, see JavaScript class templates .

 Employee = (function(){ // private static field var staticVar; // class function aka constructor function cls() { // private instance field var name = ""; var self = this; // public instance field this.age = 10; // private instance method function increment() { // must use self instead of this self.age ++; } // public instance method this.getName = function(){ return cls.capitalize(name); }; this.setName = function(name2){ name = name2; }; this.increment = function(){ increment(); }; this.getAge = function(){ return this.age; }; } // public static field cls.staticVar = 0; // public static method cls.capitalize = function(name){ return name.substring(0, 1).toUpperCase() + name.substring(1).toLowerCase(); }; // private static method function createWithName(name) { var obj = new cls(); obj.setName(cls.capitalize(name)); return obj; } return cls; })(); john = new Employee(); john.setName("john"); mary = new Employee(); mary.setName("mary"); mary.increment(); alert("John name: " + john.getName() + ", age==10: "+john.getAge()); alert("Mary name: " + mary.getName() + ", age==11: "+mary.getAge()); 

Answer 4

Javascript uses prototypal inheritance.

If you want to create custom classes, I would recommend reading what prototypal inheritance is, rather than trying to force the C # methodology to js (implementing prototype class inheritance)

http://phrogz.net/js/classes/OOPinJS.html