Javascript syntax I haven't seen till now, what does it do really?

Question

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;
}

Answer 1

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.

Edit:

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

Answer 2

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
        ...
    end
end