最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

class - How to get the instance name in JavaScript? - Stack Overflow

programmeradmin1浏览0评论

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
Add a ment  | 

4 Answers 4

Reset to default 5

Simple 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.

发布评论

评论列表(0)

  1. 暂无评论