"Error de tipo no detectado: invocación ilegal" en Chrome

Cuando solía requestAnimationFramehacer una animación nativa compatible con el siguiente código:

var support = {
    animationFrame: window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame
};

support.animationFrame(function() {}); //error

support.animationFrame.call(window, function() {}); //right

Llamar directamente a la support.animationFramevoluntad dará ...

TypeError no capturado: invocación ilegal

en cromo ¿Por qué?

En su código, está asignando un método nativo a una propiedad de objeto personalizado. Cuando llama support.animationFrame(function () {}), se ejecuta en el contexto del objeto actual (es decir, soporte). Para que la función requestAnimationFrame nativa funcione correctamente, debe ejecutarse en el contexto de window.

Entonces el uso correcto aquí es support.animationFrame.call(window, function() {});.

Lo mismo sucede con la alerta también:

var myObj = {
  myAlert : alert //copying native alert to an object
};

myObj.myAlert('this is an alert'); //is illegal
myObj.myAlert.call(window, 'this is an alert'); // executing in context of window 

Otra opción es utilizar Function.prototype.bind (), que forma parte del estándar ES5 y está disponible en todos los navegadores modernos.

var _raf = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame;

var support = {
   animationFrame: _raf ? _raf.bind(window) : null
};

También puedes usar:

var obj = {
    alert: alert.bind(window)
};
obj.alert('I´m an alert!!');

Cuando ejecuta un método (es decir, una función asignada a un objeto), dentro de él puede usar la thisvariable para referirse a este objeto, por ejemplo:

var obj = {
  someProperty: true,
  someMethod: function() {
    console.log(this.someProperty);
  }
};
obj.someMethod(); // logs true

Si asigna un método de un objeto a otro, su thisvariable se refiere al nuevo objeto, por ejemplo:

var obj = {
  someProperty: true,
  someMethod: function() {
    console.log(this.someProperty);
  }
};

var anotherObj = {
  someProperty: false,
  someMethod: obj.someMethod
};

anotherObj.someMethod(); // logs false

Lo mismo sucede cuando asigna un requestAnimationFramemétodo windowa otro objeto. Las funciones nativas, como esta, tienen protección incorporada contra su ejecución en otro contexto.

Hay una Function.prototype.call()función que le permite llamar a una función en otro contexto. Solo tiene que pasarlo (el objeto que se usará como contexto) como primer parámetro de este método. Por ejemplo alert.call({})da TypeError: Illegal invocation. Sin embargo, alert.call(window)funciona bien, porque ahora alertse ejecuta en su alcance original.

Si usa .call()con su objeto así:

support.animationFrame.call(window, function() {});

funciona bien, porque requestAnimationFramese ejecuta en el alcance de en windowlugar de su objeto.

Sin embargo, usar .call()cada vez que quiera llamar a este método, no es una solución muy elegante. En cambio, puedes usar Function.prototype.bind(). Tiene un efecto similar .call(), pero en lugar de llamar a la función, crea una nueva función que siempre se llamará en el contexto especificado. Por ejemplo:

window.someProperty = true;
var obj = {
  someProperty: false,
  someMethod: function() {
    console.log(this.someProperty);
  }
};

var someMethodInWindowContext = obj.someMethod.bind(window);
someMethodInWindowContext(); // logs true

El único inconveniente Function.prototype.bind()es que es parte de ECMAScript 5, que no es compatible con IE <= 8 . Afortunadamente, hay un polyfill en MDN .

Como probablemente ya haya descubierto, puede usar .bind()para ejecutar siempre requestAnimationFrameen contexto de window. Su código podría verse así:

var support = {
    animationFrame: (window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame).bind(window)
};

Entonces puedes simplemente usar support.animationFrame(function() {});.