Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to handle lack of JavaScript Object.bind() method in IE 8

Tags:

I am writing a bit of JavaScript that uses the Object.bind method.

funcabc = function(x, y, z){      this.myx = x;     this.playUB = function(w) {         if ( this.myx === null ) {             // do blah blah             return;         }          // do other stuff     };     this.play = this.playUB.bind(this); }; 

Since I develop in WinXP with Firefox and sometimes test in Win7 with IE 9 or 10, I did not notice or pay attention to the fact that IE8 and below do not support bind.

This particular script does not use the canvas, so I'm a little hesitant to write off all IE 8 users.

Is there a standard work-around?

I'm getting around sort of okay in JavaScript, but I'm still a bit of a noob. So forgive me if the solution is totally obvious.

like image 258
Claude Avatar asked Jun 15 '12 16:06

Claude


People also ask

How do you bind an object in JavaScript?

We use the Bind() method to call a function with the this value, this keyword refers to the same object which is currently selected . In other words, bind() method allows us to easily set which object will be bound by the this keyword when a function or method is invoked.

Should you use BIND in JavaScript?

. bind() is used when you need to pass a callback (e.g. some sort of function reference), but you want the caller to call your function with a specific this value.

What does bind do in JavaScript?

bind is a method on the prototype of all functions in JavaScript. It allows you to create a new function from an existing function, change the new function's this context, and provide any arguments you want the new function to be called with.

What is polyfill bind in JavaScript?

Polyfill for bind():The variable args[0] is the first argument passed to our myBind() method (i.e. the myName object) and ctx contains all the other arguments passed to our myBind() method. Parameter …a contains all the arguments that can be passed to the result2() method.


2 Answers

There is a good compatability script on this page: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

Just copy and paste it into your script.

EDIT: placing the script below for clarity.

if (!Function.prototype.bind) {   Function.prototype.bind = function(oThis) {     if (typeof this !== 'function') {       // closest thing possible to the ECMAScript 5       // internal IsCallable function       throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');     }      var aArgs   = Array.prototype.slice.call(arguments, 1),         fToBind = this,         fNOP    = function() {},         fBound  = function() {           return fToBind.apply(this instanceof fNOP && oThis                  ? this                  : oThis,                  aArgs.concat(Array.prototype.slice.call(arguments)));         };      fNOP.prototype = this.prototype;     fBound.prototype = new fNOP();      return fBound;   }; } 
like image 142
alexwells Avatar answered Oct 23 '22 10:10

alexwells


The best solution could be to install Modernizr.

Modernizr tells you whether the current browser has this feature natively implemented or not and it provides a script loader so you can pull in polyfills to backfill functionality in old browsers.

Here is the link to generate your modernizr custom version:
http://modernizr.com/download/#-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes

like image 26
antonjs Avatar answered Oct 23 '22 09:10

antonjs