IE8 and named function expressions

[alexindigo]

There is interesting thing happening in IE8:

Example 1:
<script>
var a = {};
</script><script>
var xx = function a() {};
alert(typeof a);
</script>

Example 2:
<script>
var b = {};
var zz = function b() {};
alert(typeof b);
</script>

In Webkit, Gecko and IE9 result will be "object" in both cases, in IE8 you'd see "function" in first example and "object" in second.

And with mangle mode in uglify, it will mangle names of the function expressions which would have no effect, so it could actually remove them and save few extra bytes. Or at least it would be nice when --screw-ie8 is false to respect options like -d "x" and -r "x" and not use x (for example) for mangled names.

Real world use case:

• Global object x.
• Module with standard pattern:

function Bla() {}
Bla.prototype.method = function Bla_uniqueNameForDebuggingPurpose() {}

which looks like that after minifying:

function Bla() {},Bla.prototype.method = function x() {}

and overrides x in IE8 and IE9 (in quirks mode).

[JamesMGreene]

I also need an option to leave named function expressions' names intact, which I believe was the purpose of the -nmf (--no-mangle-functions) flag in UglifyJS (v1)... though perhaps that affected treatment of all function names rather than just named function expressions.

[JamesMGreene]

P.S. My use case:

Input:

var MyClass = function MyClass_() {
  this.MyMethod = function MyClass_MyMethod() {
    // Blah
  };
};

Output:

var MyClass=function(){this.MyMethod=function(){}}

I want the MyClass_ and MyClass_MyMethod named function expressions to retain those names (and not just for IE) as it is useful for the purpose of real-time logging and inspection of the function stack trace... otherwise they just show up as anonymous functions. :(

[arian]

I have the same problem in IE8, using this code:

(function(){

function makeClass(proto) {
    var ctor = proto.constructor;
    ctor.prototype = proto;
    return ctor;
}

var MyClass = makeClass({
    constructor: function MyClass(bar){
        this.foo = bar;
        console.log(MyClass.hi);
    }
});

MyClass.hi = "test";

new MyClass("hi");

})();

Which minifies to: (with uglifyjs test.js --beautify -m -o test.min.js)

(function() {
    function o(o) {
        var t = o.constructor;
        t.prototype = o;
        return t;
    }
    var t = o({
        constructor: function n(o) {
            this.foo = o;
            console.log(n.hi);
        }
    });
    t.hi = "test";
    new t("hi");
})();

In node/chrome, this logs test, but in IE it logs undefined.

[mgol]

@JamesMGreene FWIW, in ES6 the following code:

var f = function () { /* ... */ }

will create a function with the name property equal to "f" which will make your issue irrelevant.

[JamesMGreene]

@mzgol: Respectfully acknowledged but dreadfully far away.

[mgol]

@JamesMGreene That's why I added "FWIW" at the beginning. ;) It's just a note for the future, it doesn't invalidate your request.

There is one thing that is currently handled at least by Chrome DevTools, though. Methods in the stack trace are visible by the property name and that is what you asked for. I'm not sure about other DevTools, though.

EDIT: an example:

var o = {
    f: function () {
        throw new Error('a');
    }
};
try {
    o.f();
} catch(e) {
    console.log(e.stack);
}

This will print:

Error: a
    at Object.o.f (<anonymous>:2:28)
    at <anonymous>:2:8
    ...

So you do see what's the source of the method.

EDIT: a fiddle to test: http://jsfiddle.net/m_gol/za3Fv/show/

[alexlamsl]

We now remove unused function names:

$ echo 'var b={};var zz=function b(){};alert(typeof b);' | uglify-js -mc
var b={},zz=function(){};alert(typeof b);