javascript: adding function to function inside .prototype = {

Question

If I add a function in the "constructor", I can extend it with an other function like so:

var MyClass = function() {
    this.time = function() { return 4.5; }
    this.time.formatted = function() { return format(this.time(), "HH:mm"); }
}

I can't figure out a nice way to do this if I create the function in prototype like so:

var MyClass = function() {}
MyClass.prototype = {
    time: function() { return 4.5; },
    time.formatted: function () { ... } // This does not work!
}


MyClass.prototype.time.formatted = function() { ... }
// the line above works but I don't like it since it separates everything.
// e.g. if I have 15 functions inside prototype, the .formatted will be like
// 50 lines apart from the time: function

*Edit: * On second thoughts the line above does not work, adding the .formatted messes the reference to this. Perhaps solvable?

Any tips? Thanks!

The only way to do it is the latter; object literal notation just doesn't support that syntax. — Matt
– Matt, Commented Feb 17, 2013 at 10:08
Why don't you create a second class? An then just do this.time = new TimeFormatter(); — Prinzhorn
– Prinzhorn, Commented Feb 17, 2013 at 10:08

Guffa · Accepted Answer · 2013-02-17 11:10:47Z

Create the function before creating the prototype object, that allows you to add a property to it, and also gives you the ability to use the function without using this:

function MyClass() {}

function time() { return 4.5; }
time.formatted = function() { return format(time(), "HH:mm"); }

MyClass.prototype = {
    time: time;
}

You can put it in a function expression to keep it together, and avoid having the time function in the global scope:

function MyClass() {}
MyClass.prototype = (function(){

  function time() { return 4.5; }
  time.formatted = function() { return format(time(), "HH:mm"); }

  return {
    time: time;
  }

})();

Note: The formatted function will be called as a regular function, not as a method of the object. This means that the function time doesn't have access to this when called from the formatted function.

If you need that, you can't have the time function in the prototype at all. Each instance of the class needs its own version of the time function, where the formatted property has access to that specific instance of the object:

function MyClass() {

  this.theTime = 4.5;

  this.time = function() { return this.theTime; }

  var t = this;

  this.time.formatted = function() { return format(t.time(), "HH:mm"); }

}

Eric · Accepted Answer · 2013-02-17 10:16:25Z

This code does not work:

var MyClass = function() {
    this.time = function() { return 4.5; }
    this.time.formatted = function() { return format(this.time(), "HH:mm"); }
}

var m = new MyClass();
console.log(m.time.formatted())

Because the this inside .formatted points to m.time, not m. You should use:

var MyClass = function() {
    this.time = function() { return 4.5; }
    this.time.formatted = function() { return format(this(), "HH:mm"); }
}

or

var MyClass = function() {
    var self = this;
    this.time = function() { return 4.5; }
    this.time.formatted = function() { return format(self.time(), "HH:mm"); }
}

Answering your actual question, make a helper function:

var callable(f, props) {
    for(p in props) f[p] = props[p];
    return f;
}

MyClass.prototype = {
    time: callable(function() {
        return 4.5;
    }, {
        formatted: function () { return format(this(), "HH:mm"); }
    })
}

Collectives™ on Stack Overflow

javascript: adding function to function inside .prototype = {

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related