Question

How to edit a function after it’s created?

function foo(a, b) {
  this.c = a+b;
}

var bar = new foo(2,3); //result: {'c':5}

//now I would like to create a new function, which is a bit different from the first
foo2 = foo;
foo2.d = a*b;  //here I get an error: a is not defined

bar2 = new foo2(3,4);

---

No, I mean the result should be this:

function foo2(a, b) {
  this.c = a+b;
  this.d = a*b;
}

Answer 1

You can’t do exactly what you want, but there are other ways to do what you want.

function builder(fn, propertyName) {
  return function () {
    var args = arguments;
    this[propertyName] = fn.apply(this, arguments);
    this.change = function (otherFn, otherPropertyName) { 
       return builder(otherFn, otherPropertyName || propertyName);
    }
  }
}

var Foo = builder(function (a, b) { return a + b; }, "c");

var foo = new Foo(3, 4)

var Foo2 = foo.change(function (a, b) { return a * b; }, "d");

var foo2 = new Foo2(3, 4)

console.log(foo.c, foo2.d)   // => 7 12

A better way of doing this is like this…

function Foo(a, b) {
  var self = this;
  this.add = function (name, fn) {
    self[name] = fn.call(self, a, b);
  }
}

var foo = new Foo(3, 4);
foo.add("c", function (a, b) { return a + b; });
foo.add("d", function (a, b) { return a * b; });

console.log(foo.c, foo2.d)   // => 7 1