Setting state of javascript function not saving - javascript

I am trying to create a new function, MyNs.MyObj(), call a method on it that modifies a 'private' variable, 'prop1', and the next time I access the public accessor, 'Prop1' that it retrieves the saved variable.
After running the below code, the output is still, '2' (the initial value). Can someone help me understand why calling the Method function does not udpate the Prop1 variable the way I expect?
var MyNs = MyNs || {};
(function( o ){
o.MyObj = function (options) {
var prop1 = options;
var obj = {
Prop1: prop1,
Method: function() {
prop1 = "abc";
}
};
return obj;
};
})(MyNs);
var s = new MyNs.MyObj(2);
s.Method();
console.log(s.Prop1);

When you do this
var prop1 = options;
var obj = {
Prop1: prop1
};
You've set Prop1 to the value of prop1 at that time, changing prop1 later will not update Prop1.
You can easily test this with something like
var a = 'abc'; // set a value on 'a'
var b = a; // set 'b' to equal 'a', as it's a string, it's passed directly
a = 'bca'; // set a new value for 'a'
alert(b); // still outputs 'abc'
FIDDLE
This means you have to update the property, not the variable, and you'd do that like so
var MyNs = MyNs || {};
(function( o ){
o.MyObj = function (options) {
var prop1 = options;
var obj = {
Prop1: prop1,
Method: function() {
this.Prop1 = "abc";
}
};
return obj;
};
})(MyNs);
var s = new MyNs.MyObj(2);
s.Method();
console.log(s.Prop1);
FIDDLE

Related

Default enum value in javascript class constructor

I have a simple class, and I'm trying to figure out how to set a default value in the constructor:
var Foo = function(bar = Foo.someEnum.VAL1) {
this.bar = bar;
someEnum = {VAL1 : 1, VAL2: 2};
}
and to use it like:
var myFoo = new Foo(Foo.someEnum.VAL1);
but this is apparently wrong. What's the correct way to set a default enum value, or do I need to set the default to null, and check for the null in the constructor and set accordingly?
To clarify, bar is an enum for the Foo class. There are other properties in the class that are not shown. Also, updated class code.
You can try this if you want to make bar an optional parameter:
function Foo(bar) {
this.bar = bar || Foo.enum.VAL1; //If bar is null, set to enum value.
}
//Define static enum on Foo.
Foo.enum = { VAL1: 1, VAL2: 2, VAL3: 3 };
console.log(new Foo().bar); //1
console.log(new Foo(Foo.enum.VAL3).bar); //3
Do you just want bar to be defined inside the function?
var Foo = function() {
var bar = {VAL1 : 1, VAL2: 2};
}
or for a blank starting object:
var Foo = function() {
var bar = {};
}
Or are you wanting it to be set from a parameter that's passed into the function?
var Foo = function(barIn) {
var bar = barIn;
}
Another option - create the object (enum) from values passed in:
var Foo = function(val1, val2) {
var bar = {VAL1 : val1, VAL2: val2};
}
The possibilities go on, but it's not entirely clear what you're trying to achieve.
I'm not entirely sure what you are trying to do but maybe it is this...
var Foo = function (bar = 1) {
this.bar = bar;
}
Foo.VAL1 = 1;
Foo.VAL2 = 2;
Now you can do:
foo1 = new Foo();
alert(foo1.bar); //alerts 1;
foo2 = new Foo(Foo.VAL2);
alert(foo1.bar); //alerts 2;

Returning private object property by name (string) in Javascript

I have worked out a method to access an objects private properties by creating a method that returns those properties. However I would like to create a single function that can return any object property based on the string argument passed.
Here is an example of what I am trying to do:
function MyObj() {
var myProp = 10;
this.getProp = function( propName ) {
return( propName ); // THIS IS WHERE I AM STUCK
};
}
MyObj.prototype.getMyProp = function() {
return this.getProp( 'myProp' );
};
var myObj = new MyObj();
console.log( myObj.getMyProp() );
As you can see from this example the string "myProp" is returned not the variable. I can't use this[propName] as I'm not in the right scope and I can't use the that/self technique to access the scope.
How do return an object property using a string?
One simple solution would be to wrap your private variables in an object like this:
function MyObj() {
var privateVars = {
myProp: 10
};
this.getProp = function( propName ) {
return privateVars[propName];
};
}
MyObj.prototype.getMyProp = function() {
return this.getProp( 'myProp' );
};
var myObj = new MyObj();
console.log( myObj.getMyProp() ); // 10
Update: it appears that eval will work in this case, too, but I wouldn't recommend it:
function MyObj() {
var myProp = 10;
this.getProp = function( propName ) {
return eval(propName);
};
}
MyObj.prototype.getMyProp = function() {
return this.getProp( 'myProp' );
};
var myObj = new MyObj();
console.log( myObj.getMyProp() ); // 10

Concatenate object field with variable in javascript

I'm building an object in javascript to store data dynamically.
Here is my code :
var id=0;
function(pName, pPrice) {
var name = pName;
var price = pPrice;
var myObj = {
id:{
'name':name,
'price':price
},
};
(id++); //
console.log(myObj.id.name); // Acessing specific data
}
I want my id field to be defined by the id variable value so it would create a new field each time my function is called. But I don't find any solution to concatenate both.
Thanks
You can create and access dynamicly named fields using the square bracket syntax:
var myObj = {};
myObj['id_'+id] = {
'name':name,
'price':price
}
Is this what you want ?
var myObj = {};
myObj[id] = {
'name':name,
'price':price
};
console.log(myObj[id]name); // Acessing specific data
You can use [] to define the dynamic property for particular object(myObj), something like
var myObj = {};
myObj[id] = {'nom':nom, 'prix':prix};
Example
function userDetail(id, nom, prix) {
var myObj = {};
myObj[id] = {'nom':nom, 'prix':prix};
return myObj;
}
var objA = userDetail('id1', 'sam', 2000);
var objB = userDetail('id2', 'ram', 12000);
var objC = userDetail('id3', 'honk', 22000);
console.log(objA.id1.nom); // prints sam
console.log(objB.id2.nom); // prints ram
console.log(objC.id3.prix);// prints 22000
[DEMO]

Javascript: Instance name in a class method

<html>
<body>
<div id="output"></div>
<script>
function jExgTrend(){
}
jExgTrend.prototype.Start = function(text)
{
//this must return Instance name : "TestObj"
var InstanceName = "TestObj";
document.getElementById("output").innerHTML = ""+text+"";
}
jExgTrend.prototype.Notify = function(msg)
{
alert(msg);
}
var TestObj = new jExgTrend();
TestObj.Start("Text of the link");
</script>
</body>
</html>
How can I do something like this ? the method "Start" should return the name of the Instance of the class.
The problem is stupid I know :-(
Maybe what you really need is an id, not a name.
Providing an id is something you can easily add with a method that you can add to Object's prototype or just to the class(es) that interest you :
var idGetter = (function() {
var currentId = 0;
return function() {
// 1. replace 'id' with a readonly property
// that will return id for this object
var thisId = currentId ;
Object.defineProperty( this, 'id',
{ get : function () { return thisId; } } ) ;
// 2. for the first run of id, return object id
return currentId++;
}
}());
Object.defineProperty( Object.prototype, 'id', { get : idGetter } );
small example of use :
var someObject = {};
console.log(someObject.id); // outputs 0
var someObject2 = {};
console.log(someObject2.id); // outputs 1
Notice that Object.defineProperty defaults to a non-enumerable property, so your objects won't get 'polluted' by this property (when using for..in for instance).
You can't. You can specify a name at instantiation though:
function JExgTrend(name){ this.name = name || 'no name specified'; }
JExgTrend.prototype.Start = function () {
alert(this.name);
}
var testObj = new JExgTrend('testObj');
var otherTestObj = new JExgTrend('otherTestObj');
var anon = new JExgTrend;
testObj.Start(); //=> testObj
otherTestObj.Start(); //=> otherTestObj
anon.Start(); //=> no name specified
A somewhat exotic alternative: you could program the constructor like this:
function JExgTrend(name,scope) {
name = name || ( Math.floor( 10000+Math.random()*100000000000) ).toString(16);
if (!(this instanceof JExgTrend)) {
return new JExgTrend(name,scope);
}
this.name = name;
if (!JExgTrend.prototype.myname) {
JExgTrend.prototype.myname = function(){ console.log(this.name); };
}
return (scope || window)[this.name] = this;
}
And then assign objects like this:
jExgTrend.call(null, 'testObj');
testObj.myname(); //=> testObj
Try fiddling around # this jsFiddle

javascript private inner functions in module with access to "this" scope [duplicate]

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Javascript outer scope variable access
I have a javascript module that looks something like below. The main issue I'm having is how to access variables in the "this" scope from the private someOtherFunc. Is there a way to access this.myvar in the private someOtherFunc
var mymodule = (function(){
return {
MyObj : function() {
this.myvar = 123;
this.publicfunc = function() {
someOtherFunc();
};
var someOtherFunc = function() {
//this doesn't seem to work
this.myvar = 456;
};
}
}
}
The idea is that I want to be able to do something like
new mymodule.MyObj().publicfunc, but make the someOtherFunc private
Forget my previous answer. You can do this just by adding a private version of this.
var mymodule = (function() {
return {
MyObj : function() {
this.myvar = 123;
var that = this;
this.publicfunc = function() {
someOtherFunc();
};
var someOtherFunc = function() {
that.myvar = 456;
};
return this;
}
};
});
Bear in mind that, with your code, every time you call MyObj you get a new object.
So this would do what you want:
>var o = new mymodule().MyObj()
>o.myvar
123
>o.publicfunc()
>o.myvar
456
but not this
>var m = new mymodule()
>m.MyObj().myvar
123
>m.MyObj().publicfunc()
>m.MyObj().myvar
123
If that's not what you want, consider doing something like this
var mymodule = (function() {
var myObj = null;
this.MyObj = function() {
if(myObj != null)
return myObj;
myObj = {};
myObj.myvar = 123;
myObj.publicfunc = function() {
someOtherFunc();
};
var someOtherFunc = function() {
myObj.myvar = 456;
};
return myObj;
};
});
Declare myvar using the var keyword, making it private, then access it without the this.:
function MyObj(){
var myvar = 123;
this.publicfunc = function() {
someOtherFunc();
};
var someOtherFunc = function(){
alert(myvar);
};
}
var o = new MyObj();
o.publicfunc();
If you need public access to myvar then create a public getter/setter.
jsFiddle Demo
​
I think what you're looking for is a way to encapsulate myvar for changes. When some of the other answers run, myvar usually will stay as 123 because the initially returned object from mymodule holds on to that initial value.
Return a function that gets the value of myvar even after it's been modified, and I think that helps your problem.
Here's the code that works for me:
var mymodule = (function(){
var myvar = 123,
publicfunc = function() { myvar = 456 },
getMyVar = function() { return myvar; };
return {
someOtherFunc : publicfunc,
myPublicVar : getMyVar
};
}());
mymodule.someOtherFunc();
alert(mymodule.myPublicVar());​ //gives you 456
JSFiddle here.
I hope this helps.
Why not build it a little more deliberately?
// this one returns an object used like:
// myModule.myInt; /* 456 */
// myModule.myFunc(); /* 124 */
var myModule = (function () {
var secretData = 123,
publicData = 456,
publicFunc = function () { return privateFunc(secretData); },
privateFunc = function (num) { return num + 1; },
public_interface = {
myInt : publicData,
myFunc : publicFunc
};
return public_interface;
}());
I went through the trouble of explicitly naming the returned, public object, but it's now very clear what is and isn't public, and yet, each one of those things will have access to the variable versions of one another, with the one exception being that if you change myModule.myInt or publicData, they will no longer be equal.
To demonstrate what I mean in the comments below, creating multiple instances with their own private data/methods, I just add in one more layer of function-scope:
var myModule = (function () {
var static_int = 789,
makeInstance = function (/* any constructor values */) {
var secretData = 123,
publicData = 456,
publicFunc = function () { return privateFunc(secretData); },
privateFunc = function (num) {
console.log(static_int);
return num + 1;
},
public_interface = {
myInt : publicData,
myFunc : publicFunc
};
return public_interface;
};
return makeInstance;
}());
You now use it like:
var newModule = myModule(/* instance parameters */);
newModule.myFunc();
...or
var num = myModule(/* instance parameters */).myFunc();
If you wanted to save memory, you could have static helper functions inside of the static-layer:
var myModule = (function () {
var static_int = 789,
static_addOne = function (num) { return num + 1; },
static_divideBy = function (dividend, divisor) { return dividend/divisor; },
makeInstance = function (/* any constructor values */) {
var secretData = 123,
publicData = 456,
publicFunc = function () { return privateFunc(secretData); },
privateFunc = function (num) {
console.log(static_int);
return num + 1;
},
public_interface = {
myInt : publicData,
myFunc : publicFunc
};
return public_interface;
};
return makeInstance;
}());
And now you have "private" functions which are only written one time (ie: you save memory), but any instance can use those functions.
Here's the catch:
Because of how scope and closure work, the static functions have NO access to values inside of the instance (functions inside have access to the static functions, not the other way around).
So, any static helper functions MUST have the values passed to them as arguments, and if you're modifying a number or a string, you MUST return the value out of that function.
// inside of a private method, in any instance
var privateString = "Bob",
privateFunc = function () {
var string = static_helper(privateString);
privateString = string;
//...
};
You don't return anything from MyObj.
return this;
should fix it.
Use the bind method:
var someOtherFunc = function() {
this.myvar = 456;
}.bind(this);

Categories

Resources