Develop Reference

How to create Factory Functions instead of using Classes

I am using a javascript library that is implementing ES6 class in their modules. I have not used classical inheritance in javascript and would like to essentially "undo" their class implementation. Is there a way I can take those classes and still use them in a Factory/Composition approach. I want to take advantage of JS prototypal inheritance and easy compostability of objects. The following is an example of what I have so far. Ultimately I am trying to avoid using class and new, because I am not used to using it in JavaScript. Could anyone tell me if I am approaching this in the right way or if I am just wasting my time, thank you.
class Example {
constructor(id) {
this.id = id;
}
getID() {
console.log(this.id);
}
}
function convertClassToObject(theClass) {
var x = new theClass();
var newX = Object.create(x);
return newX;
}
var NewPrototype = convertClassToObject(Example);
function NewFactory(options) {
var x = Object.assign(Object.create(NewPrototype), options);
return x;
}
var NewInstance = NewFactory({id: 123456789});

You should rather get used to new, it's much simpler than doing prototypical inheritance in factories.
Of course, it's trivial to convert a constructor function to a factory function:
function classToFactory(constr) {
return (...args) => new constr(...args);
}
const makeExample = classToFactory(Example);
const newInstance = makeExample(123456789); // no `new` any more

Javascript - transform object in class

I'm new in JS and i'm used to traditional OOP languages, so i'm having a hard time making some things work properly.
Here is my example :
var myObject = {
prop:'something';
callme:function () {
console.log('you called me');
}
}
firstObj = myObject;
firstObj.prop1 = 'new thing';
secondObj = myObject;
secondObj.prop1 = 'second thing';
Obviously the 'secondObj' overrides what 'fristObj' did before. How can i convert the 'myObject' object so it can work like a class , so i can create individual new instances of it ?
Thanks !

To create a 'class' in javascript you create a function which by convention has its first character capitalized.
function MyClass() { }
var obj = new MyClass();
To attach methods to this you add it to MyClass's prototype.
MyClass.prototype.callme = function () {
console.log('you called me');
}
To add properties use this to refer to this instance of the class.
function MyClass() {
this.prop = 'something';
}
So all together:
function MyClass() {
this.prop = 'something';
}
MyClass.prototype.callme = function () {
console.log('you called me');
}
// Remember to use var to declare variables (or they are global)
var firstObj = new MyClass();
firstObj.prop = 'new thing';
var secondObj = new MyClass();
secondObj.prop = 'second thing';

There is a style of JS programming where you just make objects and functions which return objects. In your case, make myObject into a function which returns the hash. It will return a new one each time it's called.
var myObject = function() {
return {
prop: 'something';
callme: function () {
console.log('you called me and prop is', this.prop);
}
};
}
firstObj = myObject();
firstObj.prop1 = 'new thing';
firstObj.callme();
secondObj = myObject();
secondObj.prop1 = 'second thing';
secondObj.callme();

In addition to the two good answers you already have, I wanted to point out that if you are ready to use edge stuff, ES6, the next JavaScript spec, includes classes.
Using transpilers like babel, you can already write ES6 code then compile it so that it can run on all browsers. It works increadibly well, especially when combined with tools like webpack that automates the process, and raises more and more adepts. It is the future, and clearly worse a try (classes are just the tip of the iceberg).
You can read more on ES6 classes here. Here is one of the example they give:
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
get area() {
return this.calcArea()
}
calcArea() {
return this.height * this.width;
}
}

A theoretical answer to a practical question. JavaScript is more traditional (take for example SmallTalk - one of the JavaScript grandparents) in terms of OOP than most of the current OOP languages. It is prototype-based, meaning that objects inherit from other objects. The constructor function is an unpleasant legacy (also called "classical inheritance") for the sake of typical OOP class imitation (in the way class is just a fabric for objects in most popular OOP, the typical JavaScript object is a fabric for other object). Analogous example could be the Io language (given for simplicity). IMO there is no need for separate objects' fabrics like class.

Understanding prototypal inheritance javascript

This is sort of a follow up of from this question: Python like inheritance for JavaScript
But I phrased it wrong and made it seem like I wanted classical inheritance in JavaScript when I just wanted to figure out how to do it similarly to Python.
This is what I have so far but it isn't working as I would like it to.
var util = require("util")
function FirstClass() {
this.name = "First Class";
}
FirstClass.prototype.sayName = function(){
this.callFunction("some_function", "hello")
}
FirstClass.prototype.callFunction = function(){
var func = arguments[0];
var args = Array.prototype.slice.call(arguments).slice(1, arguments.length)
if (this[func] !== undefined){
this[func].apply(null, args);
}
}
function SubClass(){}
util.inherits(SubClass, FirstClass)
SubClass.prototype.some_function = function(msg){
console.log(msg, this.name) // "hello undefined"
}
var sub_class = new SubClass();
sub_class.sayName();
When I try sub_class.sayName() It calls correctly and inherited sayName right, but when I try using the this keyword to show the name it doesn't work and prints undefined next to 'hello', so how would I fix it so it will show 'hello FirstClass'?
I was thinking this have all the variables and objects that FirstClass has since it inherits from it but it doesn't. Is that how prototypal inheritance is suppose to work? If so is there any way I can view/change parent variables from the child class?
I've tried looking up prototypal inheritance for JavaScript to figure it out but I'm not quite grasping the concept since I'm use to classical inheritance. Does anyone know how to inherit from the parent class and change it's variables from a child class?
Also if anyone has a good link to look at so I can understand prototypal inheritance better for future references that would be great.

You are missing this part:
function SubClass(){
FirstClass.apply(this);
}
This would be the equivalent to a super invocation in traditional class inheritance.

Your problem lies here: this[func].apply(null, args);
It should read: this[func].apply(this, args);

Here is a simplified example of how to inherit and extend a class. I very highly recommend checking Javascript Design Patterns for much better examples of how to create Classes with inheritance.
Now, as I was not familiar with what util was supposed to be doing, this example demonstrates how to achieve the result with native JS and no helpers:
JSFiddle here: http://jsfiddle.net/YAj5R/
function FirstClass() {
this.name = "First Class";
}
FirstClass.prototype.sayName = function () {
this.callFunction("some_function", "hello")
}
FirstClass.prototype.callFunction = function () {
var func = arguments[0];
var args = Array.prototype.slice.call(arguments).slice(1, arguments.length)
if (this[func] !== undefined) {
this[func].apply(this, args);
}
}
function SubClass() {
var parent = new FirstClass();
// this is lightweight example of an "extend" method
for(var attr in parent) {
// if this subclass has not over-written an attr,
// copy the attributes of FirstClass to SubClass
if(!this[attr]) {
this[attr] = parent[attr];
}
}
return this;
}
SubClass.prototype.some_function = function (msg) {
console.log(msg, this.name);
}
var sub_class = new SubClass();
sub_class.sayName();

Javascript OOP best practices? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
I'm sick of seeing dozens of different ways of doing object oriented programming in Javascript. Can anyone just tell me which technique I should use considering I want to work on a large scale project and I want my code to be future proof?

These are just a few quick guidelines I've come up with, if anyone else has anything meaningful to add, I've set this answer as a community wiki so it should be easy enough for you to edit.
Namespace your objects to ensure they will never conflict with third party JavaScript libraries.
window['Andrew']['JS'] = {
addEvent: function(el,evName) {/*Stuff*/},
Rectangle: function(width,height) {/*Stuff*/}
};
So then you would create a rectangle object by using:
var myRect = new Andrew.JS.Rectangle(14,11);
And then your code will never interfere with, or be interfered by anybody else's Rectangle.
Use a consistent naming strategy, specifically:
Object names should be capitalized, everything else (variables, functions) should begin with a lower case character i.e.
var myRect = new Andrew.JS.Rectangle(14,11);
document.write(myRect.getArea());
Ensure everything is meaningful, i.e. verbs for methods, nouns + adjectives for parameters.
Make sure all methods and parameters are relevant to the object they belong to. e.g.
In this example, the area of the rectangle can be converted to square feet using the method inSquareFeet().
myRect.getAreaObject().inSquareFeet();
Make sure inSquareFeet is a method of the object returned by getAreaObject() and not a method of Andrew.JS.Rectangle
Use constructors, or more specifically, try as hard as possible to make sure that an object doesn't need any further initialization to be used once it has been constructed, so instead of:
var Person = function()
{
this.name = "";
this.sayHello = function ()
{
alert(this.name + " says 'Hello!'");
return this;
}
}
var bob = new Person();
bob.name = "Bob Poulton";
bob.sayHello();
try:
var Person = function(name)
{
this.name = name;
this.sayHello = function ()
{
alert(this.name + " says 'Hello!'");
return this;
}
}
var bob = new Person("Bob Poulton");
bob.sayHello();

I always use John resig's:
http://ejohn.org/blog/simple-javascript-inheritance/
It's simple and doesn't require any frameworks to function.

Because you are working on a large scale project i would suggestion a javascript framework like mootools http://mootools.net/.
It has a good class and inheritance structure.

My ideal Object for OOP is like using an Instance method with prototypes:
Example:
var Users = function()
{
var _instance;
this.prototype.getUsername = function(){/*...*/}
this.prototype.getFirstname = function(){/*...*/}
this.prototype.getSecurityHash = function(){/*...*/}
/*...*/
/*Static Methods as such*/
return { /*Return a small Object*/
GetInstance : function()
{
if(_instance == null)
{
_instnance = new Users(arguments);
}
return _instnance; //Return the object
},
New: function()
{
_instnance = null; //unset It
return this.GetInstnace(arguments);
}
}
}
Then I would always use like:
Firstname = Users.GetInstance('Robert','Pitt').getFirstname();
Username = Users.GetInstance().getUsername(); //Returns the above object.
Me = Users.New('Robert',null); //Deletes the above object and creates a new instance.
Father = Users.New('Peter','Piper'); //New Object
Me.AddFather(Father); //Me Object.
And that's the kind of road i go down when it comes to building a JavaScript OO Style architecture.

just for your information, i think YUI provides few great tutorials on this topic

//Create and define Global NameSpace Object
( function(GlobalObject, $, undefined)
{
GlobalObject.Method = function()
{
///<summary></summary>
}
GlobalObject.Functionality = {};
}) (GlobalObject = GlobalObject || {}, jQuery);
//New object for specific functionality
( function(Events, $, undefined)
{
//Member Variables
var Variable; // (Used for) , (type)
// Initialize
Events.Init = function()
{
///<summary></summary>
}
// public method
Events.PublicMethod = function(oParam)
{
///<summary></summary>
///<param type=""></param>
}
// protected method (typically define in global object, but can be made available from here)
GlobalObject.Functionality.ProtectedMethod = function()
{
///<summary></summary>
}
// internal method (typically define in global object, but can be made available from here)
GlobalObject.InternalMethod = function()
{
///<summary></summary>
}
// private method
var privateMethod = function()
{
///<summary></summary>
}
}) (GlobalObject.Funcitonality.Events = GlobalObject.Funcitonality.Events || {}, jQuery )
// Reusable "class" object
var oMultiInstanceClass = function()
{
// Memeber Variables again
var oMember = null; //
// Public method
this.Init = function(oParam)
{
oMember = oParam;
for ( n = 1; i < oMemeber.length; i += 1 )
{
new this.SubClass.Init(oMember[i]); // you get the point, yeah?
}
}
this.Subclass = function()
{
this.Init = function() { }
}
}
The strength to this is that it initializes the Global object automatically, allows you to maintain the integrity of your code, and organizes each piece of functionality into a specific grouping by your definition.
This structure is solid, presenting all of the basic syntactical things you would expect from OOP without the key words.
There are even some ingenious ways to set up interfaces as well. If you choose to go that far, a simple search will give you some good tutorials and tips.
Even setting up intellisense is possible with javascript and visual studio, and then defining each piece and referencing them makes writing javascript cleaner and more manageable.
Using these three methods as needed by your situation helps keep the global namespace clean, keep your code organized and maintains separation of concerns for each object.. if used correctly. Remember, Object Oriented Design is of no use if you don't utilize the logic behind using objects!

function foo() {
var bar = function() { console.log("i'm a private method"); return 1; };
var iAmAPrivateVariable = 1;
return {
publicMethod: function() { alert(iAmAPrivateVariable); },
publicVariable: bar()
}
}
//usage
var thing = foo()
This is a functional approach, and has a great deal more going for it (such as encapsulation) then anything else you are going to see
In a general way, you shouldn't be doing OO in javascript, it isn't that great a language for it for a great many reasons. Think scheme with squiggly brackets and semi-colons, and you will start writing the language like the pros do. That being said, sometime OO is a better fit. In those cases, the above is typically the best bet
to bring inheritance into the mix
function parent() {
return { parentVariable: 2 };
}
function foo() {
var bar = function() { console.log("i'm a private method"); return 1; };
var iAmAPrivateVariable = 1;
me = parent();
me.publicMethod = function() { alert(iAmAPrivateVariable); };
me.publicVariable = bar();
return me;
}
This makes things a tad more complected, but accomplishes the desired end result while still taking a functional approach to OO concepts (in this case, using decorator functions instead of real inheritance). What I like about the whole approach is we are still really treating objects the way they are intended to be in this kind of language -- a property bag you can attach stuff to at will.
Another note is this is wildly different then what you will see most of the time in most of the jobs you will ever work at, and often is very hard to explain a) what is going on, and b) why it is a good idea to coworkers.

I use such a pattern and recommend to you to use it too:
function Person(firstname, lastname, age)
{
var self = this;
var _ = {};
// Private members.
var firstname = firstname;
var lastname = lastname;
var age = age || 'unknown';
// Private methods.
function first_letter_to_uppercase(str) {
return str.charAt(0).toUpperCase() + str.substr(1);
}
// Public members and methods.
_.get_age = function()
{
return age;
}
_.get_name = function()
{
return first_letter_to_uppercase(firstname) + ' ' +
first_letter_to_uppercase(lastname);
}
return _;
}
var p = new Person('vasya', 'pupkin', 23);
alert("It's " + p.get_name() + ', he is ' + p.get_age() + ' years old.')

You can try with a simple, usefull and quick object:
var foo = {
foo1: null,
foo2: true,
foo3: 24,
foo4: new Array(),
nameOfFunction1: function(){
alert("foo1");
},
nameOfFunction2: function(){
alert("foo2");
},
}
To use this, you have to create an instance of this object and use like a object in java:
foo.nameOfFunction2();
Also you can check this link to other solution: http://www.javascriptkit.com/javatutors/oopjs.shtml
I hope that answer your question.

How to Establish Inheritance Between Objects in JavaScript?

I have the following code that creates two objects (ProfileManager and EmployerManager) where the object EmployerManager is supposed to inherit from the object ProfileManager.
However, when I do alert(pm instanceof ProfileManager); it returns false.
function ProfileFactory(profileType) {
switch(profileType)
{
case 'employer':
return new EmployerManager();
break;
}
}
function ProfileManager() {
this.headerHTML = null;
this.contentHTML = null;
this.importantHTML = null;
this.controller = null;
this.actions = new Array();
this.anchors = new Array();
}
ProfileManager.prototype.loadData = function(action, dao_id, toggleBack) {
var step = this.actions.indexOf(action);
var prv_div = $('div_' + step - 1);
var nxt_div = $('div_' + step);
new Ajax.Request(this.controller, {
method: 'get',
parameters: {action : this.actions[step], dao_id : dao_id},
onSuccess: function(data) {
nxt_div.innerHTML = data.responseText;
if(step != 1 && !prv_div.empty()) {
prv_div.SlideUp();
}
nxt_div.SlideDown();
for(i = 1; i <= step; i++)
{
if($('step_anchor_' + i).innerHTML.empty())
{
$('step_anchor_' + i).innerHTML = this.anchors[i];
}
}
}
}
)
}
EmployerManager.prototype.superclass = ProfileManager;
function EmployerManager() {
this.superclass();
this.controller = 'eprofile.php';
this.anchors[1] = 'Industries';
this.anchors[2] = 'Employer Profiles';
this.anchors[3] = 'Employer Profile';
this.actions[1] = 'index';
this.actions[2] = 'employer_list';
this.actions[3] = 'employer_display';
}
var pm = new ProfileFactory('employer');
alert(pm instanceof ProfileManager);
BTW, this is my very first attempt at Object-Oriented JavaScript, so if you feel compelled to comment on the stupidity of my approach please feel free to do so, but offer suggestions on how to approach the problem better.

I've been using something similar to Dean Edward's Base.js model.
http://dean.edwards.name/weblog/2006/03/base/

Prototype supports (mimicing) class inheritance via the Object.extend() function.
However, it could be argued that trying to impose class-based inheritance on a language which doesn't support classes is an example of "when you only have a hammer, the whole world looks like a nail".

Thanks for all of the comments. However, the solution to the problem was found in making this change to the declaration of the EmployerManager:
function EmployerManager() {
this.controller = 'eprofile.php';
this.anchors = new Array('Industries', 'Employer Profiles', 'Employer Profile');
this.actions = new Array('index', 'employer_list', 'employer_display');
}
EmployerManager.prototype = new ProfileManager;
Apparently JavaScript supports two different types of inheritance, function based and prototype based. The function based version is what I originally posted but could not make work because the EmployerManager could not see the loadData method that was part of ProfileManager's prototype.
This new example is prototype based and works now. EmployerManager is now an instance of ProfileManager.

In your code, pm is an instance of EmployerManager that has a superclass of ProfileManager. That seems backwards to me. Shouldn't ProfileManager have a superclass of EmployerManager?

I just wanted to interject that while JavaScript is an object oriented language, it does not have many of the features common in other popular OO languages. Conversely, it also has many features that other popular OO languages do not.
As you have already discovered inheritance is managed via prototype objects, rather than by class inheritance. However, the prototype object is not examined when using the "instanceof" operator. This means that JavaScript does not support polymorphism. At least not out of the box.
You can find libraries that will make JavaScript conform to the model of OOP that you're used to; if you're under the gun this might be the best solution. (Although no library is ever going to make a JavaScript object polymorphic when examined using "instanceof"; an isInstanceOf function would probably be necessary.) Or you could choose another language which does conform to that model of OOP, but you're probably working in a browser, so that's obviously not an option. Or you could answer the question, "how can I solve my problem without polymorphism?"

You should note that the same question has been asked (by me). Check out the answers on that post.

You can use new or Object.create to achieve classical inheritance
function A(){
B.call(this);
}
function B(){
}
//there are 2 ways to make instanceof works
//1. use Object.create
A.prototype = Object.create(B.prototype);
//2. use new
//A.prototype = new B();
console.log(new A() instanceof B); //true
//make instanceof works
EmployerManager.prototype = Object.create(ProfileManager.prototype);
//add other prototype memebers
EmployerManager.prototype.superclass = ProfileManager;
console.log(new EmployerManager() instanceof ProfileManager); //true