如何从 object 外部（通过事件）引用 javascript 中的 object 方法？

Question

I am creating a fairly complex object and want to be able to manipulate the object from the outside. I want to reference an privileged method from a click event

function myObject(){
   //How do I reference this function?
   this.doSomething = function (action){
        var doing = action;
   }

}

I understand that I could reference the method if I create the object inside a variable like:

var obj = new myObject();
obj.doSomething('hit keyboard');

But the links I am creating to trigger this event are being created by the object, but placed outside the object, so they will not know the container variable to reference it.

ie

<a href="#" onclick="doSomething()">Do Something</a>

doesn't work because of course the doSomething method is part of the object, not a global function. I could rewrite the code to make it global, but would rather avoid doing that.

If this question doesn't make sense I would be happy to make it clearer. Thanks in advance.

Answer 1

Although it will sit in the global scope, and generally not recommended, you could do this (if you just need to get it working):

function myObject(){
   //How do I reference this function?
   window.doSomething = function (action){ // USE window instead of this !!
        var doing = action;
   }

}

By using window instead of this , it can be called in your handler.

Answer 2

IF the object instance is already created, then you can say:

<a href="#" onclick="obj.doSomething()">Do Something</a>

Otherwise,

<a href="#" onclick="function () { return new myObject().doSomething(); }">Do Something</a>

Answer 3

You need the object to be in the global scope. Try this:

window.myObject = {
    doSomething: function(action) {
        alert("Done!");
    }
};

and then you make a click event like

<a href="#" onclick="myObject.doSomething()">Do Something</a>

Example

Answer 4

The problem is that there's a disconnect between the instance of an object and the element on the page whose event should trigger the object's function. There are various ways to handle that without exposing anything globally. One way, for example, would be to tie the two via an object's property:

Give the element an ID:

<a id="myLink">Do Something</a>

Add element property to object:

function myObject(element){
   this.element = element;

   if (this.element) {
      this.element.onclick = this.doSomething;
   }

   this.doSomething = function () {
         // do stuffs.
   }
}

Instantiate object:

var obj = new myObject(document.getElementById('myLink'));

Or simplify the object definition a bit more:

function myObject(element){
   this.element = element;

   if (this.element) {
      this.element.onclick = function () {
         // do stuffs.
      }
   }
}

Answer 5

To define the problem, you're in a particular object's click handler and you want to call a method on another object in your code that you can't get to directly from the object you're in. You really only have these options and you can just pick the one that seems best or seems the least objectionable:

1. You can make the object that you want to call a method on be in the global scope.
2. You can make the object that you want to call a method on be findable in the global scope (either in a parent hierarchy or with some sort of global find). It can be done this way without necessarily adding any more top level objects to the global scope.
3. You can set the object that you want to call a method as instance data on all objects that will have the click handler so that you can just reference the global object from the click handler object's instance data.
4. You can declare the click handler to have a parameter that contains your object by using function closures and avoid all global data.