24

I don't really get the function of ember.js' reopenClass. I thought it added extra code to the Object's prototype, so all instances of that Object would get the functionality that was added in a non static way. It does not do this however. It looks like it only adds code that can be statically executed. For instance. I have this code:

Logger = Ember.Object.extend({ 
  log: function(thing) { 
     console.log(thing + ' wassup'); 
    }
});

var logger = Logger.create();
logger.log("1, yo")

logger.reopen({ 
  log: function(name) { 
      console.log(name + 'ghurt')
    }
});
logger.log("2, yo")

Logger.reopenClass({ 
  log: function(name) { 
      console.log(name + 'fresh')
    }
});
logger.log("3, yo")
Logger.log("4, yo")

It outputs this:

1, yo wassup
2, yoghurt
3, yoghurt
4, yofresh

What I expected was this:

1, yo wassup
2, yoghurt
3, yofresh
4, undefined (I think)

So my question is: What does reopenClass do and when do I use it?

2 Answers 2

45

In general, reopen adds methods and properties to instances whereas reopenClass adds methods and properties to classes.

The corresponding tests are ember-runtime/tests/system/object/reopen_test.js and packages/ember-runtime/tests/system/object/reopenClass_test.js.

I've updated your code and added some comments, see http://jsfiddle.net/pangratz666/yWKBF/:

Logger = Ember.Object.extend({
    log: function(thing) {
        console.log(thing + ' wassup');
    }
});

var logger1 = Logger.create();
var logger2 = Logger.create();

// instances of Logger have a 'wassup' method
try { Logger.log("1, yo"); } catch (e) {} // Object (subclass of Ember.Object) has no method 'log'
logger1.log("1, yo"); // 1, yo wassup
logger2.log("1, yo"); // 1, yo wassup

console.log('----');

// overwrite log of concrete logger instance logger1
logger1.reopen({
    log: function(name) {
        console.log(name + ' ghurt');
    }
});

try { Logger.log("1, yo"); } catch (e) {} // Object (subclass of Ember.Object) has no method 'log'
logger1.log("2, yo"); // 2, yo ghurt
logger2.log("2, yo"); // 2, yo wassup

console.log('----');

// classes of Logger have a 'fresh' method
Logger.reopenClass({
    log: function(name) {
        console.log(name + ' fresh');
    }
});

Logger.log("3, yo"); // 3, yo fresh
logger1.log("3, yo"); // 3, yo ghurt
logger2.log("3, yo"); // 3, yo wassup

console.log('----');

// new* instances of Logger have from now on a 'dawg' method
// * this will likely change in the future so already existing instances will reopened too
Logger.reopen({
    log: function(name) {
        console.log(name + ' dawg');
    }
});

Logger.log("4, yo"); // 4, yo fresh
logger1.log("4, yo"); // 4, yo ghurt
logger2.log("4, yo"); // 4, yo wassup
Logger.create().log("4, yo"); // 4, yo dawg

console.log('----');

6
  • 9
    Ok, so If I get this right logger.reopen() only adds the code to the logger instance, Logger.reopen() adds code for every new instance that will be created (existing instances will not be changed) and Logger.reopenClass() adds code that is static to the Logger Class (it cannot be called from instances, only statically). Correct? Apr 22, 2012 at 19:09
  • 2
    Ok. Thanks for shedding light. I had a hard time understanding this (as in: I didn't get it) from the documentation at emberjs.com/documentation. Apr 22, 2012 at 19:23
  • 1
    Glad I could help. Yeah, the documentation needs to be updated!
    – pangratz
    Apr 22, 2012 at 19:48
  • 5
    @koenp - fyi, I blogged about Ember.Object, including classes vs. instances, mixins, etc. here - cerebris.com/blog/2012/03/06/understanding-ember-object Apr 23, 2012 at 13:34
  • So you cannot give all existing instances of Logger a new method by doing anything to the class?
    – event_jr
    Oct 5, 2012 at 3:14
0

reopen changes prototype and thus changes instances of a class

reopenClass changes the constructor itself and thus changes the class by creating static properties and functions that are only available on the class but not on any instances of the class.

Note that the changes introduced by reopen only take effect after calling .create()

Code examples based on the doc:

http://emberjs.com/api/classes/Ember.Application.html#method_reopen

MyObject = Ember.Object.extend({
  name: 'an object'
});

o = MyObject.create();
o.get('name'); // 'an object'

MyObject.reopen({
  say: function(msg){
    console.log(msg);
  }
})

try{
    o.say("hey");
} catch(e) {
    console.log(e); // o.say is not a function (...yet)
}
o2 = MyObject.create();
o2.say("hello"); // logs "hello"

o.say("goodbye"); // logs "goodbye"

http://emberjs.com/api/classes/Ember.Application.html#method_reopenClass

MyObject = Ember.Object.extend({
  name: 'an object'
});

MyObject.reopenClass({
  canBuild: false
});

MyObject.canBuild; // false
o = MyObject.create();
o.canBuild; // undefined

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.