如何摆脱这种自调用功能？

Question

I found this awesome snippet on the internet:

function f(a,b,c,d){for(d?d=b.toUpperCase():b=4;!d&&b--;d=(d=d.replace(/-(.)/g,f))in(new Image).style&&d)d=[['Moz-','Webkit-','Ms-','O-'][b]]+a;return d}

It takes the name of a css property, and adds the correct vendor prefix automatically.

I golfed it a bit to make it smaller:

function f(a,b,c){for(c?c=b.toUpperCase():b=4;!c&&b--;c=(c=c.replace(/-(.)/,f))in(new Image).style&&c)c=["Moz-","Webkit-","Ms-","O-"][b]+a;return c}

I would like to submit it to 140bytes, but this function calls itself, which means that it pollutes the global namespace with a variable (f)

How can I change it so it doesn't call itself?

Here is a jsfiddle: http://jsfiddle.net/vCkew/

Answer 1

Use some scoping:

var myFunction = function(a, b, c) {
    var f = function(a, b, c) {
        for (c ? c = b.toUpperCase() : b = 4; !c && b--; c = (c = c.replace(/-(.)/, f)) in (new Image).style && c)
        c = ["Moz-", "Webkit-", "Ms-", "O-"][b] + a;
        return c;
    }
    return f(a, b, c);
}

http://jsfiddle.net/maniator/vCkew/3/

Answer 2

You can use the arguments keyword to get the function:

function(a,b,c){for(c?c=b.toUpperCase():b=4;!c&&b--;c=(c=c.replace(/-(.)/,arguments.callee))in(new Image).style&&c)c=["Moz-","Webkit-","Ms-","O-"][b]+a;return c}

To make it work in your jsfiddle:

document.write((function(a,b,c){for(c?c=b.toUpperCase():b=4;!c&&b--;c=(c=c.replace(/-(.)/,arguments.callee))in(new Image).style&&c)c=["Moz-","Webkit-","Ms-","O-"][b]+a;return c})('transition'));​

NOTE: This does actually answer your question to make the function not call itself but it does remove the function from the global namespace.