If I have this basic structurevar Foo = function(str) {    console.log('Object string: ' + this.str);    console.log('Param string : ' + str);}var Bar = function(){    this.str = 'object string';}var obj = new Bar();Foo.call(obj, 'param string');It's fairly obvious what .call() is doing in context. I recently came across some articles that went into depth on abstracting the .call() function. The premise is along these lines (this code is verging on pseudo code as I have stripped it down for ease of reading) : var Extension = {    // Fire a callback in global scope    fireCallback : function(event, args) {        this.callbacks[event].apply(window, args);    },    // Attach a callback    addCallback : function(event, fn) {        this.callbacks[event].push(fn);    },    // Now the bit that I really can't wrap my head around    enable : function() {        var self = this;        if ( ! self.callbacks ) {            self.callbacks = {};        }        self.fireCallback = function(event, args) {            Extension.fireCallback.call(self, event, args);        };        self.addCallback = function(event, fn) {            Extension.addCallback.call(self, event, fn);        };    }}There is some form of JS voodoo going on here that I can't programatically work out, can anyone help me shed light on how JS is interpreting this and why when I call:Extension.enable.call(this);within a class scope, the Extension object seems to extend the calling objects prototypes allowing me to bind a callback within the class scope. And then attach a handler after I have instantiated the class.function Bar() {    Extension.enable.call(this);    // Do stuff    this.fnCallback = function()    {        this.fireEvent('complete');    }}var bar = new Bar();bar.addCallback('complete', function(args){    console.log('complete');});bar.fnCallback(); // logs 'complete' to consoleThe logic is really confusing me, I understand how call() and apply() work in the simple example above but I have no idea how or why the prototypes of the object are extended when I call Extension.enable.call(this);.Could anyone help me shed some light on this?
Extending an object with .call() and .apply()
javascript
Flambino has it mostly right, my explanation may help or hinder. Anyhow, here goes.> var Foo = function(str)I don't know why you are using a function expression, a declaration seems more suitable:function Foo(str) {.var obj = new Bar();Foo.call(obj, 'param string');It's fairly obvious what .call() is doing in contextPerhaps, but unless you say what you think is going on, we can't know if your understanding is correct. And while the mechanics are fairly straight forward, it is more important to know what you are trying to do.Such explanations are important to confirm that you and others are thinking the same thing.... can anyone help me shed light on how JS is interpreting this and why when I call:Extension.enable.call(this);within a class scope,I would say from within the constructor, as javascript doesn't have classes and only function's have scope (and constructors called with new can only create plain objects).Extension object seems to extend the calling objects prototypesNot the prototype but the object itself, see below.... allowing me to bind a callback within the class scope. And then  attach a handler after I have instantiated the class.function Bar() {      Extension.enable.call(this);The enable function is called as a plain function with its this set to the new instance of Bar. So enable is adding properties (extending) the instance itself, not its [[Prototype]] (which is Bar.prorotype).>     this.fnCallback = function() {>         this.fireEvent('complete');>     }> }That also extends the instance (i.e. there is now bar.fnCallback property). And I think fireEvent should be fireCallback.> var bar = new Bar();>> bar.addCallback('complete', function(args)  {>     console.log('complete');> });That is calling the addCallback method of bar, so this within the function is bar. It rather circuitously adds a member to bar.callbacks with a name of complete and value of the provided function, effectively:bar.callbacks['complete'] = function(args){...}; >> bar.fnCallback(); // logs 'complete' to consoleSo that calls fnCallback with bar as this. That function calls bar.fireEvent, passing it the parameter 'complete' and setting its this to bar.I've assumed fireEvent should be fireCallback (since fireEvent isn't defined).Anyhow, it calls Extension.fireCallback.call(self, event, args);where self is bar, which ultimately calls (replacing this with bar):bar.callbacks['complete'].apply(window, args);So the prototype isn't invovled at all (unless I'm wrong about fireEvent). Setting this to window within the callback doesn't do anything in this case since it isn't used. Within the function, console will be resolved on the scope chain, probably being found on the global object (window.console in a browser), then it's log property will be called, writing 'complete' to the console.Does that help?