How to provide ECMAScript 5 (ES 5)-shim?

Question

ECMAScript Fifth Edition (released December 2009) introduces a bunch of new methods (see this table for details). However, there still are older browsers out there which do not implement those new methods.

Luckily, there exists a convenient script (written in JavaScript) - ES5-shim - which implements those methods manually in environments where they don't exist.

However, I am not sure how to provide ES5-shim... Should I just "give" it to all browsers, like so:

<script src="es5-shim.js"></scipt>

Or should I include a check in order to only "bother" those browsers which really need it, like so:

<script>
    if ( !Function.prototype.hasOwnProperty( 'bind' ) ) {
        (function () {
            var shim = document.createElement( 'script' );
            shim.src = 'es5-shim.js';
            var script = document.getElementsByTagName( 'script' )[0];
            script.parentNode.insertBefore( shim, script );
        }());
    }
</script>

(I'm using Function.prototype.bind to check if a browser implements all new ECMAScript 5 methods. According to the compatibility table which I linked above, bind is the "last bastion" when it comes to implementing ECMAScript 5 methods.)

Of course, for this shim to be effective, it has to be executed before all other scripts, which means that we want to include the above mentioned SCRIPT elements early in the page (in the HEAD, before all other SCRIPT elements).

So, would this second example be a good way to provide ECMAScript 5-shim to browsers? Is there a better way to do it?

Answer 1

ES5-Shim will only shim parts that the browsers don't implement, so just give it to all browsers. It'll handle the detection of what needs to be shimmed and what doesn't.

But pay attention to the caveats listed on what shims don't work correctly in some instances. I've had issues with that in the past and it causes a ton of pain until you realize the answer was super simple...