function.name not supported in IE.

Question

Lately I've become a huge fan of the function.name property.

For example, I've written a function for extending prototypes.

It works in the way of..

Array.give(
    function forEach() { ... }
);

..which would then let you do..

['a', 'b', 'c'].forEach(function () { ... });

This code works great in Chrome, Safari, Firefox, and Opera, but not in IE.

After just a small bit of digging, I realized that to the give function, function.name was just returning undefined, where as in everything else it returned "forEach".

Is there an alternative way to get the name in IE, or should I just fall out of love with this wonderful property?

Answer 1

You can use Object.defineProperty to add support for it on IE9+

// Fix Function#name on browsers that do not support it (IE):
if (!(function f() {}).name) {
    Object.defineProperty(Function.prototype, 'name', {
        get: function() {
            var name = (this.toString().match(/^function\s*([^\s(]+)/) || [])[1];
            // For better performance only parse once, and then cache the
            // result through a new accessor for repeated access.
            Object.defineProperty(this, 'name', { value: name });
            return name;
        }
    });
}

Answer 2

You might be able to parse the function name from calling function.toString ^[docs]. function.name is not a standard property.

var name = func.toString().match(/^function\s*([^\s(]+)/)[1];

---

As the comments also say, this is not necessarily a reliable way. Imo passing an object would be easier to read and you could pass several methods at once:

Array.give({
    forEach: function() { ... },
    somethingElse: function() {...}
});

Answer 3

I think your .give() solution is a little..verbose. What's wrong with:

Array.prototype.forEach = function () { ... };

?

Really, though, you should check for such a method's existence before supplying your own:

Array.prototype.forEach = Array.prototype.forEach || function () { ... };

---

Since others will be led here wondering about function.name, there is a way to grab the name (obviously, it doesn't work on anonymous functions):

function getFnName(fn) {
    return (fn.toString().match(/function (.+?)\(/)||[,''])[1];
}

Answer 4

For those, who are in the same boat, have a look at JamesMGreene's Function.name polyfill. This looks to be a good solution.

Answer 5

Old question, and I don't know if this works on a native IE 7 & 8 browser (I'm using the developer tools emulator), but I've given functions a name property on the constructor for gag inducing IE code before....

function sayMyName(func){
    var name=func.name || func.constructor.name
    alert(name);

}

var ieGivesMeNightTerrors=function(){
    //there there, these ugly workarounds aren't your fault
};
ieGivesMeNightTerrors.constructor.name=ieGivesMeNightTerrors;
sayMyName(myFunc);