Take the 2-minute tour ×

Today I saw a javascript syntax (when invoking a function) that is unfamiliar to me. It was like:

def('Person') ({
  init: function(name) {this.name=name;}
  ,speak: function(text) {alert(text || 'Hi, my name is ' + this.name);}

, and

def('Ninja') << Person ({
  kick: function() {this.speak('I kick u!');}

1: What happens with the object within parenthesis in the first example? It is handled by the def function somehow, but I don't understand what is going on here (see the def function below). Where does the object go?

2: About the same thing again, but a use of the << operator that I never seen (I think!). What's that all about?

The code is from http://gist.github.com/474994, where Joe Dalton has made a small js-oo-inheritance thing (it is apparently a fork of someone else's work, but quite thoroughly rewritten, as it seems). Maybe you want to check it out there for the stuff referenced by the def function, which i give you here:

function def(klassName, context) {
  context || (context = global);
  // create class on given context (defaults to global object)
  var Klass =
  context[klassName] = function Klass() {
    // called as a constructor
    if (this != context) {
      // allow the init method to return a different class/object
      return this.init && this.init.apply(this, arguments);
    // called as a method
    // defer setup of superclass and plugins
    deferred._super = Klass;
    deferred._plugins = arguments[0] || { };
  // add static helper method
  Klass.addPlugins = addPlugins;
  // called as function when not
  // inheriting from a superclass
  deferred = function(plugins) {
    return Klass.addPlugins(plugins);
  // valueOf is called to setup
  // inheritance from a superclass
  deferred.valueOf = function() {
  var Superclass = deferred._super;
  if (!Superclass) return Klass;
  Subclass.prototype = Superclass.prototype;
  Klass.prototype = new Subclass;
  Klass.superclass = Superclass;
  Klass.prototype.constructor = Klass;
    return Klass.addPlugins(deferred._plugins);
  return deferred;
share|improve this question
the original seems to be Tobias Schneiders github.com/tobeytailor/def.js –  bjelli Jan 9 '11 at 23:11
add comment

2 Answers

up vote 12 down vote accepted

1: The call def('Person') returns a function, which is called with the object as parameter. It's the same principle as:

function x() {
  return function(y) { alert(y); }

x()('Hello world!');

2: The << operator is the left shift operator. It shifts an integer value a specific number of bits to the left. I haven't found any reference for any other use for it, and there is no operator overloading in Javascript, so I can't make any sense out of using it on a function. So far it looks like a typo to me.


As Tim explained, the shift operator is just used to induce a call to the valueOf method. It works like an overload of all operators, taking over the original purpose and doing something completely different.

share|improve this answer
Ah, of course. Neat. Thanks. But what about the operator thing? –  npup Jul 14 '10 at 11:48
@npup: I haven't been able to make any sense of the operator thing. Se my addition above. –  Guffa Jul 14 '10 at 12:04
The operator (whose basic usage is not alien to me): Yeah it looks really weird. Maybe it turns out as a no-op that is just used here to make the subclassing declarations look a certain way? Huh. Thanks for the answers! –  npup Jul 14 '10 at 12:06
The returned object has defined the function valueOf, which is called when the left-shift is performed on the object. Apparently the << is supposed to resemble Ruby's inheritance syntax (I'm not familiar with Ruby), and by defining valueOf they're able to hijack the left-shift operation to perform the superclassing, while getting a pretty syntax. I imagine you could swap out another operator that would call valueOf on the two objects and get a similar effect. –  Tim Stone Jul 14 '10 at 12:19
@Guffa: That code does seem to be a pretty extreme case of operator abuse...Admittedly, I hope I never see it anywhere else, heh, but I'm sure that's wishful thinking. –  Tim Stone Jul 14 '10 at 13:00
show 5 more comments

Wow, it was convoluted enough for my tiny brain to understand, but I feel a lot better now knowing exactly how it works :) Thanks to @Tim for pointing out the valueOf() trick.

The general case of creating a "class" using:

def ("ClassName") ({
    init: function() { .. },
    foo: function() { .. }

is trivial, as the first call to def returns a function that accepts an object, and copies the properties of the passed in object, to the prototype of ClassName.

The more interesting case of using << to subclass relies on the evaluation order of the expression, as well as the attempted coercing of any object to a value by the implicit call to valueOf(). The underlying trick is basically a shared variable that records the super class and the properties to be applied to it. The expression,

def("ClassName") << ParentClass({ .. })

will be evaluated as follows:

  1. def("ClassName") is called, and creates a global object ClassName and returns its constructor function. Let's call this returned object - initializeMeLater.
  2. ParentClass(..) is called which stores the reference to ParentClass, and the passed in object/properties in a shared variable.
  3. initializeMeLater.valueOf() is called, which gets the reference to the parent class, and the properties from that shared variable, and sets up the prototypes.
  4. valueOf is called on the return value from step 2 which is useless and has no effect, as we have already setup the superclass relationship in step 3.

The code is trying to emulate Ruby syntax for creating subclasses which goes like:

class Child < Parent
    def someMethod
share|improve this answer
add comment

Your Answer


