I have written some code I found in a video, and it looks something like this:
var clientX = clientX || {} ;
clientX.MyClass = function(initialValue){
var var1 = initialValue;
var publicMembers = {
get_var1 : function(){
return var1;
}
};
return publicMembers;
}
var result = new clientX.MyClass("val1");
alert(result.get_var1());
clientX.instance = new clientX.MyClass("val2");
alert(clientX.instance.get_var1());
clientX.instance2= new clientX.MyClass("val3");
alert(clientX.instance2.get_var1());
The thing is, after deleting the "new" keyword when I use : var result = new clientX.MyClass("val1"); Nothing is changed, so why the author chose to use it? What's the effect?
The MyClass function makes no use of this and has an explicit return value, so the use of new has no practical effect whatsoever.
the new keyword is used as a piece of pseudoclassical instantiation, wherein a constructor object has properties attached to the keyword "this" but no return value is ever written.
var Car = function(){
this.color = 'blue';
this.make = 'toyota';
this.model = 'camry';
}
now, writing var x = new Car() will add the following lines to the interpretation:
var Car = function(){
var this = {}; //added by new
this.color = 'blue';
this.make = 'toyota';
this.model = 'camry';
return this; //added by new
}
Related
this is the resume: How to call a private method via dot notation inside constructor?:
I know there's a lot of question asking the same... in this particulary I coulnd't find anywhere so I decided to ask.
How receiveAttackFrom() method can be private ?
so if I try this...
soldier1.receiveAttackFrom(soldier2, 50)
would throw an error
var Soldier = function(_name, _life, _damage) {
var name = _name
var life = _life
var damage = _damage
this.getName = function() {return name}
this.getLife = function() {return life}
this.getDamage = function() {return damage}
this.setLife = function(_life) {life = _life}
this.attack = function(_targ) {
_targ.receiveAttackFrom(this, this.getDamage());
}
// how to put this as a private method? :
this.receiveAttackFrom = function(_other, _damage) {
this.setLife( this.getLife() - _damage )
}
}
// MAIN
var soldier1 = new Soldier('jonas', 100, 25);
var soldier2 = new Soldier('mark', 90, 30);
soldier1.attack(soldier2);
// so if I try this...
// soldier1.receiveAttackFrom(soldier2, 50)
// would throw an error
var _self = this;
this.receiveAttackFrom = function(_other, _damage) {
_self.setLife( _self.getLife() - _damage )
}
Define the function at the start of your constructor with var and bind it to this:
var receiveAttackFrom = function (_other, _damage) {
this.setLife( this.getLife() - _damage )
}.bind(this);
Then call it inside the constructor without prefix:
receiveAttackFrom(arg1, arg2);
I want to be able to call sub-functions that work with private data. Currently I have this:
var myFunction4 = function() {
this.secret1 = 0;
this.secret2 = 0;
var that = this;
this.iterate1 = function(){
return that.secret1++;
}
this.iterate2 = function(){
return that.secret2++;
}
this.addSecrets = function(){
return that.secret1 + that.secret2;
}
return {
iterate1: this.iterate1,
iterate2: this.iterate2,
addSecrets: this.addSecrets,
}
};
The bad thing about this is that to call one of the methods, I have to do:
myFunction4().iterate1();
Which executes myFunction4() every single time I want to access a method. Not only is this inefficient, but it resets secret1 each time so I can't iterate it. I've tried using the new operator, but that exposes secret1 and secret2, and it messes up the ability to nest functions deeply.
var myFunction3 = function() {
this.secret1 = 0;
this.secret2 = 0;
this.iterate1 = function(){
return this.secret1++;
}
this.iterate2 = function(){
return this.secret2++;
}
this.addSecrets = function(){
return this.secret1 + this.secret2;
}
};
var f3 = new myFunction3();
f3.secret1; // exposes the secret!
See the console logs at the bottom of this JSFiddle for more examples.
How can I have a function with both private and public vars/methods which retain their values and don't need to be called multiple times?
While the other answers are absolutely fine and correct, there is one more issue to consider when emulating OOP behaviour in javascript.
The function execution context issue will bite us hard when we will try to use a public method as a e.g. async. callback.
The magical this will point to a different object then we expect in the OOP world.
Of course there are ways to bind the context but why to worry about this after we define the 'class' in a non OOP js ;)
Here is a simple solution to this: Do not use this. Let the closure refactor this out ;)
var myFunction4 = function() {
// we could inherit here from another 'class' (object)
// by replacing `this` with e.g. `new SuperClass()`
var that = this;
// 'private' variables
var secret1 = 0;
var secret2 = 0;
// 'public' variables
that.somePublicVar = 4;
// 'private' methods
var somePrivateMethod = function(){
secret2 = 77;
that.somePublicVar = 77;
}
// 'public' methods
that.iterate1 = function(){
return secret1++;
}
that.iterate2 = function(){
return secret2++;
}
that.addSecrets = function(){
return secret1 + secret2;
}
return that;
};
var f = new myFunction4();
console.log( f.iterate1() ); // 0
console.log( f.iterate1() ); // 1
console.log( f.secret1 ); //undefined
console.log( f.somePublicVar ); //4
Try that (closures power!):
var myFunction3 = function() {
var secret1 = 0;
var secret2 = 0;
this.iterate1 = function(){
return secret1++;
}
this.iterate2 = function(){
return secret2++;
}
this.addSecrets = function(){
return secret1 + secret2;
}
};
var f3 = new myFunction3();
now only the methods are exposeds
Edited version:
If you don't wanna execute the main function every time you call sub-method, you can change a bit your approach and use the power of IIFE (immediately-invoked function expression)
var myFunction4 = (function() {
var secret1 = 0;
var secret2 = 0;
var iterate1 = function(){
return secret1++;
}
var iterate2 = function(){
return secret2++;
}
var addSecrets = function(){
return secret1 + secret2;
}
return {
iterate1: iterate1,
iterate2: iterate2,
addSecrets: addSecrets
}
}());
Then you can use this:
myFunction4.iterate1();
myFunction4.iterate2();
myFunction4.addSecrets();
Hope this helps you
I generally only use the factory pattern to create objects unless I absolutely need to have the performance benefits of prototypical inheritance.
Using the factory pattern also means you don't have to deal with the ever changing value of this in different contexts.
var factory = function() {
// internal private state
var state = {
secret1: 0,
secret2: 0
}
function iterate1(){
return state.secret1++;
}
function iterate2(){
return state.secret2++;
}
function addSecrets(){
return state.secret1 + state.secret2;
}
function __privateMethod() {
// this is private because it's not on the returned object
}
// this is the public api
return {
iterate1,
iterate2,
addSecrets
}
}
// create a secret module
var secret = factory()
console.log(
secret.iterate1(), // 0
secret.iterate2(), // 0
secret.addSecrets(), // 2
secret.secret1, // undefined
secret.secret2 // undefined
)
// you can even create more with the same factory
var secret2 = factory()
Why don't you try Revealing Module Pattern
var myFunction4 = function() {
var secret1 = 0,
secret2 = 0,
iterate1 = function(){
return secret1++;
},
iterate2 = function(){
return secret2++;
},
addSecrets = function(){
return secret1 + secret2;
};
// public functions and properties
return {
iterate1: iterate1,
iterate2: iterate2,
addSecrets: addSecrets,
}
}();
myFunction4.iterate1(); // is available
myFunction4.secret2; // is private and not available outside of myFunction4
Hope it helps
A basic pattern:
var myFunction = function() {
var that = this;
var secret1 = 0;
var secret2 = 0; // private
this.public1 = 0; // public
this.iterate1 = function(){
return secret1++;
}
this.iterate2 = function(){
return secret2++;
}
this.addSecrets = function() { // public
return privateMethod();
}
var privateMethod = function() { // private
return secret1 + secret2;
}
return this; // return function itself!
};
var myFn = new myFunction();
myFn.public1 // 0
myFn.secret1 // undefined
myFn.addSecrets();
I recommend you to read the excellent Learning JavaScript Design Patterns by Addy Osmani.
What I understand from your explanation as per your second snippet is that you need a sharedPrivate among the instantiated objects. You can not do this with classical object creation patterns like constructor, factory or module. This is possible by taking a private variable under closure in the prototype of the constructor so that it doesn't get reset each time an object is created and at the meantime the instantiated objects are provided with necessary methods to access, modify and share it privately.
function SharedPrivate(){
var secret = 0;
this.constructor.prototype.getSecret = function(){return secret}
this.constructor.prototype.setSecret = function(v){ secret = v;}
this.constructor.prototype.incrementSecret = function(){secret++}
}
var o1 = new SharedPrivate();
var o2 = new SharedPrivate();
console.log(o1.getSecret()); // 0
console.log(o2.getSecret()); // 0
o1.setSecret(7);
console.log(o1.getSecret()); // 7
console.log(o2.getSecret()); // 7
o2.incrementSecret()
console.log(o1.getSecret()); // 8
And another method of getting a similar result would be
function SharedPrivate(){
var secret = 0;
return {getS : function(){return secret},
setS : function(v){secret = v},
incS : function(){secret++}
};
}
sharedProto = SharedPrivate(); // secret is now under closure to be shared
var o1 = Object.create(sharedProto); // sharedProto becomes o1.__proto__
var o2 = Object.create(sharedProto); // sharedProto becomes o2.__proto__
o1.setS(7); // o1 sets secret to 7
console.log(o2.getS()); // when o2 access it secret is still 7
o2.incS(); // o2 increments the secret
console.log(o1.getS()); // o1 can access the incremented value
I have a function PublicGame which I'd like to be using similar to a class. When I create PublicGame I give it a bunch of methods by setting this.methodName = function. The only thing is that I want to call some of these methods when the PublicGame is created. Right now for instance I do this.judge = this.setJudge(), but I know this wont work where I have it because, setJudge isnt defined yet. Should I put this at the bottom of PublicGame? Is my design totally off?
Code:
'use strict';
// var GameSockets = require(‘GameSockets’);
var Games = {};
var id_counter = 0;
var minPlayers = 3;
var maxPlayers = 6;
function PublicGame (players) {
this._id = id_counter++;
this.players = players;
this.gameSocket = new GameSockets.registerPlayers(this.players, this._id, this.playerDisconnects);
this.judge = this.setJudge();
this.killGame = function() {
delete Games[this._id];
};
// When a player presses leave game
this.playerExits = function(playerToRemove) {
// Delete player from players array
this.players.splice(this.players.indexOf(playerToRemove),1);
// If less than min players
if (this.players.length < minPlayers) this.killGame();
// If less than max players
if (this.players.length < maxPlayers) {
this.needsPlayers = true;
}
gameSockets.kickPlayer(playerToRemove);
};
// When a player disconnects without warning, e.g. closes window
this.playerDisconnects = function(playerToRemove) {
// Delete player from players array
this.players.splice(this.players.indexOf(playerToRemove),1);
// If less than min players
if (this.players.length < minPlayers) this.killGame();
// If less than max players
if (this.players.length < maxPlayers) {
this.needsPlayers = true;
}
};
this.selectJudges = function() {
this.judge = this.players.pop();
this.players = this.players.unshift(this.judge);
};
this.setWinner = function(winner) {
this.winner = winner;
};
Games[this._id] = this;
}
If you define your functions on the prototype than you do not need to "wait" for the functions to be defined because the instance will already have them when the constructor's code is called
function PublicGame (players) {
//...
this.judge = this.setJudge();
}
PublicGame.prototype.killGame = function(){
//...
};
PublicGame.prototype.playerExits = function(playerToRemove){
//...
};
PublicGame.prototype.setJudge = function(){
//do whatever
return whatever;
};
So unless your functions need to access some "private" variable (ie defined within the constructor, not a global variable), or other reason requiring it, define it on the prototype instead of defining it in the constructor and it will be ready to use.
You have to use javascript prototype !
Read the comments in the code sample.
/*
* utils functions
*
* dont take care about that
**/
var el = document.getElementById('dbg');
var jj = function(val,sep){return JSON.stringify(val , null , sep || '')}
var log = function(val){el.innerHTML+='<div><pre>'+val+'</pre></div>'};
var counterId = 0;
/************************************************************************/
// You have to use prototype
// here an example of what you can achieve
// we create a Player 'class'
var Player = function( name ){
this.id = counterId ++; //<-- an attribute
this.name = name; //<-- an attribute
this.setLevel(5);//<-- a method called at 'instanciation'
return this;
};
// a method available at instanciation time
Player.prototype.setLevel = function(level){
this.level = level;
return this;
};
// we create a new Player named Toto
var Toto = new Player('Toto');
log('Toto = ' + jj(Toto));//<-- utility function just to log
// we create a new Player named Jane
var Jane = new Player('Jane');
log('Jane = ' + jj(Jane)); //<-- utility function just to log
// we change the Level of Jane
Jane.setLevel(12);
log('Jane.setLevel(12)');//<-- utility function just to log
log('Jane = ' + jj(Jane));//<-- utility function just to log
<div id='dbg'></div>
I have an object that looks like this:
var BigObject = {
'CurrentInt': 0,
'CurrentBool': false,
'CurrentObject': {}
}
And then, I declare SomeObject like this:
var SomeObject = {
'SomeString': "",
'SomeInt': 0
}
These two definitions are for the objects when they're in their initial state, sort of like a type definition I guess. Now I want to assign a new SomeObject to BigObject['CurrentObject']. I tried this:
BigObject['CurrentObject'] = new SomeObject();
But it's not working. At the moment, I just do a straight assignment by reference BigObject['CurrentObject'] = SomeObject; and then when I need to reset the values of SomeObject, I just run a function that redeclares each property of SomeObject in its initial stage.
But how can I use the new keyword to create a reusable object type that's a property of BigObject.
Thanks.
new can only be used with a function, to run it as constructor:
function SomeObject() {
this.SomeString = "";
this.SomeInt = 0;
}
What you have done is equivalent to:
var SomeObject = new Object();
SomeObject.SomeString = "";
SomeObject.SomeInt = 0;
If you're defining a type, you should use a constructor function:
var SomeObject = function() {
this.someString = "";
this.someInt = 0;
}
var BigObject = function() {
this.currentInt = 0;
this.currentBool = false;
this.currentObject = new SomeObject();
}
Once you've defined these constructors, you can new them (create instances):
var myBigObject = new BigObject();
console.log(myBigObject.currentObject);
Use JavaScript classes.
function SomeObject() { }
SomeObject.prototype.someString = "";
SomeObject.prototype.someInt = 0;
function BigObject(){ this.currentObj = new SomeObject; }
BigObject.prototype.currentInt = 0;
BigObject.prototype.currentBool = false;
BigObject.prototype.currentObj = null;
var a = new BigObject;
a.currentObj instanceof SomeObject; // true
In this example, I'm trying to create a Class template, then using that to create a base 'class', and so on and so forth.
It all works until I get to NewStudent. I get a type error 'object is not a function'.
var Class = function(options) {
var newClass = function(options) {
$.extend(this, options);
};
if (options) {
$.extend(newClass, options);
}
newClass.prototype = newClass;
newClass.prototype.constructor = newClass;
return newClass;
};
var Person = new Class();
Person.prototype.speak = function() {alert(this.name + ', ' + this.type);}
var Student = new Person({name: 'Student', type: 'Student'});
Student.speak();
var NewStudent = new Student({name: 'NewStudent'});
NewStudent.speak();
If I change:
var newClass = function(options) {
$.extend(this, options);
};
to:
var newClass = function(options) {
$.extend(this, options);
return newClass;
};
It it executes the speak call, but the name is blank, and the type is unidentified.
I'm using jquery for the $.extend method.
How can I improve this so it works? I'm trying to do something similar to the way Mootools does their Class, except I want to create my own barebone version.
You're confusing objects with functions.
The Person variable is a function, but the Student variable is an ordinary object, so you can't "new" it.
You'll have to create a separate function to create derived classes. I reworked your example a bit, and came up with this:
Class = function(ParentClass, options) {
if (ParentClass && typeof(ParentClass) != 'function') {
options = ParentClass;
ParentClass = undefined;
}
var ctr = function(objOptions) {
$.extend(this,objOptions);
};
if (typeof(ParentClass) == 'function') {
ctr.prototype = new ParentClass();
}
$.extend(ctr.prototype,options);
ctr.Derive = function(options) { return new Class(ctr,options); };
return ctr;
};
Then you can do what you intended:
var Person = new Class({ speak: function() {alert(this.name + ', ' + this.type);} });
var Student = Person.Derive({type: 'Student'});
var NewStudent = Student.Derive({type:"NewStudent"});
var student = new Student({name: 'student'});
student.speak();
var newStudent = new NewStudent({name: 'newStudent'});
newStudent.speak();
The code above can be executed here: http://jsbin.com/unetox/6