javascript access "this" in function constructor - javascript

I'm trying to create a function constructor:
var obj = function() {
this.num = 2;
this.func = function() {
// need to access the **instance** num variable here
};
};
var instance = new obj();
I need to access the instance properties from a propery (which is the function func) of the object. But it doesn't work, since this is always the current function..

Store this in a variable which func can access:
var obj = function() {
var _this = this;
_this.num = 2;
_this.func = function() {
console.log(_this.num);
};
};

Please, use well-known approach, store this into separate field:
var obj = function() {
self = this;
self.num = 2;
self.func = function() {
alert(self.num);
// need to access the **instance** num variable here
};
};
var instance = new obj();

This is the pattern I use for the problem:
var obj = function(){
var self = this;
this.num = 2;
this.func = function() {
console.info(self.num);
};
};
var instance = new obj();
The variable self now can be accessed in all function of obj and is always the obj itself.
This is the same then:
var obj = function(){
var self = this;
self.num = 2;
self.func = function() {
console.info(self.num);
};
};
var instance = new obj();

You can do it using the Custom Constructor Functions, used to create a custom constructor and it's accessed without any problem, try it:
var Obj = function () {
this.num = 2;
this.func = function () {
alert("I have " + this.num);
return "I have " + this.num;
};
};
var instance= new Obj();
instance.func();//will return and show I have 2

Related

Calling a JavaScript variable inside a function from outside

var func = function(){
this.innerVar = 'hello';
}
console.log(func.innerVar); // it prints undefined
can I access the variable innerVar from outside?
var func = function(){
this.innerVar = 'hello';
}
Now you have these options:
1) Using func as a constructor:
console.log(new func().innerVar);
2) Using the apply method on the function:
var obj = {};
func.apply(obj);
console.log(obj.innerVar);
3) Using the call method on the function (cheers to #dev-null):
var obj = {};
func.call(obj);
console.log(obj.innerVar);
4) Using the bind method on the function:
var obj = {};
func.bind(obj)();
console.log(obj.innerVar);
5) And the crazy stuff:
console.log(func.apply(func) || func.innerVar);
That's basic
var func = function(){
this.innerVar = 'hello';
}
console.log((new func()).innerVar);
Create a object new func().
Set its property innerVar this.innerVar = 'hello';.
Fetch its property (new func()).innerVar
var Func = function(){
this.innerVar = 'hello';
}
var func = new Func; // Creates an instance of your Func class
console.log(func.innerVar);
var func = function() {
func.innerVar = 'hello';
};
func.innerVar; // undefined
func();
func.innerVar; // ‘hello'

How to change the properties with factory method in javascript

i have one class i am trying to overwrite it with factory design pattern but not able to do that..
how to call it exactly to change the properties of object
function othername() {
var newobj = new Object();
newobj.fname = "sachin",
newobj.lname = "rawal",
newobj.fullname = function () {
alert(this.fname);
}
return newobj
}
var othername1 = othername ("hi","hello");
Using prototype you can do it.
function othername() {
var newobj = new Object();
newobj.fname = "sachin",
newobj.lname = "rawal",
newobj.fullname = function () {
alert(this.fname);
}
return newobj
}
var othername1 = othername ("hi","hello");
prototype:
othername.prototype.middleName = "middleNameString";
var named = othername();
var md = named.middleName // md == "middleNameString"
function Othername(fname,lname) {
this.fname = fname || "sachin";
this.lname = lname || "rawal";
};
Othername.prototype.fullname = function (){
alert(this.fname + " " + this.lname);
};
var othernameDefault = new Othername (); //sachin rawal
var othername1 = new Othername ("hi","hello"); //hi hello

How to reference proprerty from sub objects with "this" keyword

i have to call a property in "object1" from sub object "object3", but this example doesn't work because the "this" keyword is referenced in "object2" and not "object1", do you know how to do this ?
function object1() {
this.a = "hello world";
this.object2 = function() {
this.object3 = function() {
alert(this.a); //prints "undefined"
}
};
}
try this example with:
var obj1 = new object1();
var obj2 = new obj1.object2();
obj2.object3();
thank you in advance :-)
function object1() {
this.a = "hello world";
var self = this;
this.object2 = function () {
this.object3 = function () {
alert(self.a); //prints "undefined"
}
};
}
var obj1 = new object1();
var obj2 = new obj1.object2();
obj2.object3();
You have to store the this object, otherwise you will be accessing the this of the function this.object3's scope
this changes as scope changes. You need to save a reference of this for any new scope:
function object1 () {
var first_scope = this;
this.a = "hello world";
this.object2 = function() {
var second_scope = this;
this.object3 = function() {
var third_scope = this;
alert(first_scope.a);
}
};
}

Storing variables in my name spaced javascript

If I have my name space for my app like so:
var myApp = {};
(function() {
var id = 0;
this.next = function() {
return id++;
};
}).apply(myApp);
Then if I log the following result:
console.log(myApp.next()); //1
How can I store variable within the name space function, for instance something like:
var myApp = {};
(function() {
var id = 0;
this.next = function() {
return id++;
};
// Store variables here ...
this.variableStore = function() {
var var1 = "One";
};
}).apply(myApp);
Trying to access like this:
console.log(myApp.variableStore().var1); // Gives me an error
Is this possible, or even a good idea? Or should I just declare a new name space for what are essentially global variables?
var myApp = {};
(function() {
var id = 0;
this.next = function() {
return id++;
};
// Store variables here ...
this.variableStore = function() {
this.var1 = "One";
return this;
};
}).apply(myApp);
Such declaration will add var1 property to myApp object only after variableStore() is called:
myApp.var1 //undefined
myApp.variableStore() // Object {...}
myApp.var1 //"One"
About your question: you can not actually store variable within a function. If you are trying to make a internal namespace for myApp, consider doing the following:
(function() {
var id = 0;
this.next = function() {
return id++;
};
this.subNameSpace = {
init: function () {
this.var1 = "One"
return this;
}
}
}).apply(myApp);
myApp.subNameSpace.init();
myApp.subNameSpace.var1; //"One"
(function() {
var id = 0, var1; //DECLARE VARIABLE HERE
this.next = function() {
return id++;
};
// Store variables here ...
this.variableStore = function() {
this.var1 = "One"; //NO "VAR" KEYWORD
};
}).apply(myApp);
Using var var1 = "One"; creates var1 in the local scope, so you can't access it from the instance of myApp. Also, remember to use this.var1; otherwise the variable var1 is essentially a private variable and can't be accessed from the outside.
Also, if you want to use
console.log(myApp.variableStore().var1);
Then you'll have to return myApp; in your variableStore method. This is because myApp.variableStore() currently returns nothing, so you can't access var1 of nothing. So, here is the complete code:
var myApp = {};
(function() {
var id = 0, var1;
this.next = function() {
return id++;
};
// Store variables here ...
this.variableStore = function() {
this.var1 = "One";
return myApp;
};
}).apply(myApp);
console.log(myApp.variableStore().var1);
You already got some answers on how you could use your variableStore function. But maybe it would be sufficient for you to just store your variable with the .-operator?
var myApp = {};
(function() {
var id = 0;
this.next = function() {
return id++;
};
}).apply(myApp);
//store:
myApp.var1 = "One";
//request:
console.log(myApp.var1); //One

Managing this scope in javascript

I am trying to get this function to get the correct scope for its "this" operator, but no luck. Inside the AssetName = function(options){ code block, I want the "this" to point to the class AssetName. What is it that I am missing? The scope of this right from the beginning is window.
Assetname: function(options){
var Base = WM.Utility.GenericFilter()
options = options;
if (typeof Object.create !== "function") {
// For older browsers that don't support object.create
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}
var AssetName = {};
AssetName = function(options){
return function(){
var self = this;
debugger;
// Call the super constructor.
Base.call(this, options);
this.$mod.on('change', '#asset-name-quick-search', self,
this.search);
this.$mod.on('click', '.close', self, this.remove);
this.initTypeAhead();
this.$selectionList = this.$mod.find("#asset-name-selection-list");
this.assetListItems = [];
return this;
}(options, AssetName);
}
// The AssetName class extends the base GenericFilter class.
AssetName.prototype = Object.create(Base.prototype);
AssetName.prototype.initTypeAhead = function(){
var options = {};
options.source = _.pluck(this.collection, 'asset_name');
options.items = 8;
this.$mod.find('#asset-name-quick-search').typeahead(options);
};
AssetName(options);
return AssetName;
},
AssetName = function(options){
return function(){
var self = this;
debugger;
// Call the super constructor.
Base.call(this, options);
this.$mod.on('change', '#asset-name-quick-search', self, this.search);
this.$mod.on('click', '.close', self, this.remove);
this.initTypeAhead();
this.$selectionList = this.$mod.find("#asset-name-selection-list");
this.assetListItems = [];
return this;
}(options, AssetName);
}
change to
AssetName = function(options){
var aa = function(){
var self = this;
debugger;
// Call the super constructor.
Base.call(this, options);
this.$mod.on('change', '#asset-name-quick-search', self, this.search);
this.$mod.on('click', '.close', self, this.remove);
this.initTypeAhead();
this.$selectionList = this.$mod.find("#asset-name-selection-list");
this.assetListItems = [];
return this;
};
aa.call(AssetName,options);
}
In your code, the function aa is called as aa(options); so this is window.
[update]
I fix the bug with the following code:
AssetName = function (options) {
AssetName = function (options) {
var aa = function () {
alert(this);
return this;
};
aa.call(this, options);
}
AssetName.prototype.initTypeAhead = function () {
alert(1);
}
return new AssetName(options);;
};
var test = AssetName();
test.initTypeAhead();
But I suggest how about writing the code like bellow:
AssetName = function (options) {
AssetName = function (options) {
alert(this);
}
AssetName.prototype.initTypeAhead = function () {
alert(1);
}
return new AssetName();
};
var test = AssetName();
test.initTypeAhead();
You cam just move your var self = this out side of the anonymous returned function. Then you can use just use self.

Categories

Resources