If I create a class like this:
function MyClass(input){
// construct something;
var myInstanceName = ???
}
I'll need the name of the instance when creating an instance...
var MyInstance = new MyClass("Make Something");
Need to know myInstanceName (="MyInstance" in this case) because there is a method that creates buttons and the "onclick" must call a method of this instance.
I tried "this.name" but it returns undefined... How do I get this value?
EDIT: Here is a tested working example:
function MyClass(WhereGoesTheButton){
this.myName = "Test"; // <-- here is the issue
this.idButton = WhereGoesTheButton;
//
}
MyClass.prototype.createButton = function(){
document.getElementById(this.idButton).innerHTML = '<button id="myId" onclick="'+this.myName+'.callBack(this);">Press Here</button>';
}
MyClass.prototype.callBack = function(who){
alert("Button "+who.id+" has been pressed!");
}
var Test = new MyClass("testArea");
//
function ini(){
Test.createButton();
}
Just put it in a page with body onload ini() and some div to create the button.
It works, but alternatives with better practices are wele!
EDIT 2: this will do the job, although we still got no name of the instance:
var MyClassId = 0;
function MyClass(WhereGoesTheButton){
this.myButtonId = "MyClass"+String(MyClassId);
MyClassId++;
this.idButton = WhereGoesTheButton;
//
}
MyClass.prototype.createButton = function(){
var me = this;
document.getElementById(this.idButton).innerHTML = '<button id="'+this.myButtonId+'" >Press Here</button>';
document.getElementById(this.myButtonId).addEventListener("click", function(e){ me.callBack(this); }, false);
}
MyClass.prototype.callBack = function(who){
alert("Button "+who.id+" has been pressed!");
}
var Test = new MyClass("testArea");
//
function ini(){
Test.createButton();
}
If I create a class like this:
function MyClass(input){
// construct something;
var myInstanceName = ???
}
I'll need the name of the instance when creating an instance...
var MyInstance = new MyClass("Make Something");
Need to know myInstanceName (="MyInstance" in this case) because there is a method that creates buttons and the "onclick" must call a method of this instance.
I tried "this.name" but it returns undefined... How do I get this value?
EDIT: Here is a tested working example:
function MyClass(WhereGoesTheButton){
this.myName = "Test"; // <-- here is the issue
this.idButton = WhereGoesTheButton;
//
}
MyClass.prototype.createButton = function(){
document.getElementById(this.idButton).innerHTML = '<button id="myId" onclick="'+this.myName+'.callBack(this);">Press Here</button>';
}
MyClass.prototype.callBack = function(who){
alert("Button "+who.id+" has been pressed!");
}
var Test = new MyClass("testArea");
//
function ini(){
Test.createButton();
}
Just put it in a page with body onload ini() and some div to create the button.
It works, but alternatives with better practices are wele!
EDIT 2: this will do the job, although we still got no name of the instance:
var MyClassId = 0;
function MyClass(WhereGoesTheButton){
this.myButtonId = "MyClass"+String(MyClassId);
MyClassId++;
this.idButton = WhereGoesTheButton;
//
}
MyClass.prototype.createButton = function(){
var me = this;
document.getElementById(this.idButton).innerHTML = '<button id="'+this.myButtonId+'" >Press Here</button>';
document.getElementById(this.myButtonId).addEventListener("click", function(e){ me.callBack(this); }, false);
}
MyClass.prototype.callBack = function(who){
alert("Button "+who.id+" has been pressed!");
}
var Test = new MyClass("testArea");
//
function ini(){
Test.createButton();
}
Share
Improve this question
edited Oct 1, 2013 at 1:54
Gustavo
asked Sep 30, 2013 at 20:59
GustavoGustavo
1,6834 gold badges24 silver badges41 bronze badges
3
- 2 If you need to know the name of the variable, you are 99.99% of the time doing something you shouldn't. – adeneo Commented Sep 30, 2013 at 21:02
- What if I'm 0.01% ??? Ok, an alternative way of doing the same thing is wele. In AS3 I get the variable by "target" property of the event, but it seams there isn't such thing in JS... – Gustavo Commented Sep 30, 2013 at 22:50
- Check out my answer to this duplicate question at: stackoverflow./questions/12972262/… – Kmeixner Commented Apr 25, 2014 at 13:39
4 Answers
Reset to default 5Simple code example:
function Parent(){
// custom properties
}
Parent.prototype.getInstanceName = function(){
for (var instance in window){
if (window[instance] === this){
return instance;
}
}
};
var child = new Parent();
console.log(child.getInstanceName()); // outputs: "child"
Need to know myInstanceName (="MyInstance" in this case) because there is a method that creates buttons and the "onclick" must call a method of this instance.
Why do you need the variable name for that? Your method can reference the current instance with this
.
However, inside a click handler this
will be the clicked element. Assuming you're bind the event somewhat like this:
someElement.addEventListener('click', this.someMethod, false);
... you can change it to:
var that = this;
someElement.addEventListener('click', function(e) {
that.someMethod()
}, false);
There are other possible solutions too, like bind
and the EventListener
interface.
this
refers to the instance when inside the constructor. However, note well that in Javascript, this
is determined dynamically when a function is called. So if you are eg. setting up handlers using this
in a constructor without judicious use of bind
, you will likely run into errors.
See here for more info on this
My best suggestion if you really need the name, just pass it as an optional argument in the constructor. Then if provided can set a member property this.instanceName = passedNameArgument
then access it later for error handling or whatever your needs are.