How to get around the jslint error 'Don't make functions within a loop.'

Question

I am working on making all of our JS code pass through jslint, sometimes with a lot of tweaking with the options to get legacy code pass for now on with the intention to fix it properly later.

There is one thing that jslint complains about that I do not have a workround for. That is when using constructs like this, we get the error 'Don't make functions within a loop.'

        for (prop in newObject) {
        // Check if we're overwriting an existing function
        if (typeof newObject[prop] === "function" && typeof _super[prop] === "function" &&
        fnTest.test(newObject[prop])) {
            prototype[prop] = (function (name, func) {
                return function () {
                    var result, old_super;

                    old_super = this._super;
                    this._super = _super[name];
                    result = func.apply(this, arguments);
                    this._super = old_super;

                    return result;
                };
            })(prop, newObject[prop]);
        }

This loop is part of a JS implementation of classical inheritance where classes that extend existing classes retain the super property of the extended class when invoking a member of the extended class. Just to clarify, the implementation above is inspired by this blog post by John Resig.

But we also have other instances of functions created within a loop.

The only workaround so far is to exclude these JS files from jslint, but we would like to use jslint for code validation and syntax checking as part of our continuous integration and build workflow.

Is there a better way to implement functionality like this or is there a way to tweak code like this through jslint?

Answer 1

JSLint is only a guide, you don't always have to adhere to the rules. The thing is, you're not creating functions in a loop in the sense that it's referring to. You only create your classes once in your application, not over and over again.

Answer 2

Just move your (function (name, func) {...})() block out of the loop and assign it to a variable, like:

var makeFn = function(name, func){...};

Then in the loop have:

prototype[prop] = makeFn(...)

Answer 3

Douglas Crockford has a new idiomatic way of achieving the above - his old technique was to use an inner function to bind the variables, but the new technique uses a function maker. See slide 74 in the slides to his "Function the Ultimate" talk.

For the lazy, here is the code:

function make_handler(div_id) {
    return function () {
        alert(div_id);
    }
}
for (i ...) {
    div_id = divs[i].id;
    divs[i].onclick = make_handler(div_id);
}