Question

I’m learning how to make OOP with JavaScript. Does it have the interface concept (such as Java’s interface)?

So I would be able to create a listener…

Answer 1

There’s no notion of “this class must have these functions” (that is, no interfaces per se), because:

1. JavaScript inheritance is based on objects, not classes. That’s not a big deal until you realize:
2. JavaScript is an extremely dynamically typed language — you can create an object with the proper methods, which would make it conform to the interface, and then undefine all the stuff that made it conform. It’d be so easy to subvert the type system — even accidentally! — that it wouldn’t be worth it to try and make a type system in the first place.

Instead, JavaScript uses what’s called duck typing. (If it walks like a duck, and quacks like a duck, as far as JS cares, it’s a duck.) If your object has quack(), walk(), and fly() methods, code can use it wherever it expects an object that can walk, quack, and fly, without requiring the implementation of some “Duckable” interface. The interface is exactly the set of functions that the code uses (and the return values from those functions), and with duck typing, you get that for free.

Now, that’s not to say your code won’t fail halfway through, if you try to call some_dog.quack(); you’ll get a TypeError. Frankly, if you’re telling dogs to quack, you have slightly bigger problems; duck typing works best when you keep all your ducks in a row, so to speak, and aren’t letting dogs and ducks mingle together unless you’re treating them as generic animals. In other words, even though the interface is fluid, it’s still there; it’s often an error to pass a dog to code that expects it to quack and fly in the first place.

But if you’re sure you’re doing the right thing, you can work around the quacking-dog problem by testing for the existence of a particular method before trying to use it. Something like

if (typeof(someObject.quack) == "function")
{
    // This thing can quack
}

So you can check for all the methods you can use before you use them. The syntax is kind of ugly, though. There’s a slightly prettier way:

Object.prototype.can = function(methodName)
{
     return ((typeof this[methodName]) == "function");
};

if (someObject.can("quack"))
{
    someObject.quack();
}

This is standard JavaScript, so it should work in any JS interpreter worth using. It has the added benefit of reading like English.

For modern browsers (that is, pretty much any browser other than IE 6-8), there’s even a way to keep the property from showing up in for...in:

Object.defineProperty(Object.prototype, 'can', {
    enumerable: false,
    value: function(method) {
        return (typeof this[method] === 'function');
    }
}

The problem is that IE7 objects don’t have .defineProperty at all, and in IE8, it allegedly only works on host objects (that is, DOM elements and such). If compatibility is an issue, you can’t use .defineProperty. (I won’t even mention IE6, because it’s rather irrelevant anymore outside of China.)

Another issue is that some coding styles like to assume that everyone writes bad code, and prohibit modifying Object.prototype in case someone wants to blindly use for...in. If you care about that, or are using (IMO broken) code that does, try a slightly different version:

function can(obj, methodName)
{
     return ((typeof obj[methodName]) == "function");
}

if (can(someObject, "quack"))
{
    someObject.quack();
}