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 the parentheses 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 JavaScript-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 set up
  // 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 valueOf method. It works like an overload of all operators, taking over the original purpose and doing something completely different.