CODEWITHSUNDEEP
javascriptsingleton
bugmagnet
bugmagnet

Reputation: 7769

A prototype-less, new-less, one-instance-only javascript object?

This doesn't work. 

var genericClickHandler = function () {
    this.handlers = [];
    if (console && console.log) {
        console.log("this:", this);
        console.log("event:", event);
    }
};

genericClickHandler.addHandler = function (handlerSpec) {
    this.handlers.push(handlerSpec);
    return this;
};

genericClickHandler.executeHandler = function (handlerName) {
    for (var i = 0; i < this.handlers.length; i++) {
        if (handlerName === this.handlers[i][0]) {
            this.handlers[i][1]();
        }
    }
    return this;
};

It doesn't work because the addHandler can't see the this.handlers in genericClickHandler.

Anyway what I'm after is function that gets defined once, but has methods and properties. I want to be able to use the function with Google Maps like this:

heatmap.addListener("click", genericClickHandler)
circle.addListener("click", genericClickHandler)
polygons.addListener("click", genericClickHandler)

So in the first instance, it only reports the this and event object. However, I then want to write code which extends the genericClickHandler dynamically so that it can implement map-object-specific behaviour.

Upvotes: 0

Views: 132

Answers (2)

Froggiz
Froggiz

Reputation: 683

if you want to create an object, here you can see 2 ways to do the same thing, javascript got multiple way to write the same things. 

var genericClickHandler =  function()
{

this.handlers = [];

this.addHandler = function (handlerSpec)
    {
    this.handlers.push(handlerSpec);
    return this;
    },   

this.executeHandler = function (handlerName)
    {
    this.handlers[handlerName]();
    return this;
    }  

};

//sample:
var tmp = new genericClickHandler();
console.log(tmp.handlers);
console.log(tmp.addHandler("TEST"));

Another way to write the same object, but more optimised : prototype will be stored once for each object

var genericClickHandler = function(){}

genericClickHandler.prototype = 
    {
    handlers:[],

    addHandler : function (handlerSpec)
        {
        this.handlers.push(handlerSpec);
        return this;
        },

    executeHandler : function (handlerName)
        {
        this.handlers[handlerName]();
        return this;
        } 
    }

//sample:
var tmp = new genericClickHandler();
console.log(tmp.handlers);
console.log(tmp.addHandler("TEST"));

Upvotes: 1

Andy
Andy

Reputation: 63560

Here's an example of what I meant using an object rather than a function.

var genericClickHandler = {
    handlers: []
};

genericClickHandler.addHandler = function (name, fn) {
    this.handlers.push([name, fn]);
    return this;
};

genericClickHandler.executeHandler = function (name) {
   for (var i = 0, l = this.handlers.length; i < l; i++) {
    if (this.handlers[i][0] === name) this.handlers[i][1]();
   }
};

genericClickHandler.addHandler('click', function () {
  console.log('hi');
});

genericClickHandler.addHandler('click', function () {
  console.log('hallo again');
});

genericClickHandler.executeHandler('click'); // hi... hallo again

DEMO

Upvotes: 1

Related Questions