react - Cómo manejar la falta de método Object.bind() de JavaScript en IE 8

metodo bind java

Question

Estoy escribiendo un poco de JavaScript que usa el método Object.bind .

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);
};

Como desarrollo en WinXP con Firefox y, a veces, pruebo en Win7 con IE 9 o 10, no me di cuenta ni presté atención al hecho de que IE8 y las versiones posteriores no son compatibles con bind .

Esta secuencia de comandos en particular no utiliza el lienzo, por lo que estoy un poco indeciso para descartar todos los usuarios de IE 8.

¿Hay una solución estándar?

Me estoy poniendo bastante bien en JavaScript, pero todavía soy un poco novato. Entonces, perdónenme si la solución es totalmente obvia.

Answer 1

El constructor de funciones es la forma antigua de hacer esto:

var foo = function(x,y,z){ return Function("x,y,z","return Math.max.call(this, x, y, z)")(x,y,z) }
 
var bar = function(x,y,z){ return Function("x,y,z","return Math.min.call(this, x, y, z)")(x,y,z) }
 
console.log(foo(1,2,3) );
 
console.log(bar(3,2,1) );

Referencias

• JavaScript funcional: Aprovechar el poder del objeto Function
• eval () no es malo, solo incomprendido
• [Alcance] de funciones creadas mediante el constructor de funciones
• John Resig - JavaScript rápido Máx. / Mín.

Answer 2

Function.prototype.bind no es compatible con Internet Explorer 8 y versiones posteriores. Tabla de compatibilidad aquí: http://kangax.github.io/es5-compat-table/

Mozilla Developer Network brinda esta alternativa para navegadores más antiguos que no implementan .bind () de forma nativa:

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;
  };
}

Answer 3

Hay una buena secuencia de comandos de compatibilidad en esta página: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

Simplemente cópielo y péguelo en su script.

EDITAR: colocando el script a continuación para mayor claridad.

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;
  };
}

Answer 4

La mejor solución podría ser instalar Modernizr .

Modernizr le dice si el navegador actual tiene esta característica implementada de forma nativa o no, y proporciona un cargador de scripts para que pueda incorporar los rellenos para rellenar la funcionalidad en navegadores antiguos.

Aquí está el enlace para generar su versión personalizada de modernizr:
http://modernizr.com/download/#-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes