Uncaught TypeError Illegal invocation in Chrome

Question

When I use requestAnimationFrame to do some native supported animation with below code   var support         animationFrame  window requestAnimationFrame            window mozRequestAnimationFrame            window webkitRequestAnimationFrame            window msRequestAnimationFrame            window oRequestAnimationFrame     support animationFrame function          error  support animationFrame call window  function          right   Directly calling the support animationFrame will give        Uncaught TypeError  Illegal invocation   in Chrome  Why

User · Accepted Answer

In your code you are assigning a native method to a property of custom object. When you call support.animationFrame(function () {}) , it is executed in the context of current object (ie support). For the native requestAnimationFrame function to work properly, it must be executed in the context of window.

So the correct usage here is support.animationFrame.call(window, function() {});.

The same happens with alert too:

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

Another option is to use Function.prototype.bind() which is part of ES5 standard and available in all modern browsers.

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

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

User · Answer

When you execute a method  i e  function assigned to an object   inside it you can use this variable to refer to this object  for example    x000D   x000D  var obj     x000D    someProperty  true  x000D    someMethod  function     x000D      console log this someProperty   x000D      x000D     x000D  obj someMethod       logs true x000D   x000D   x000D    If you assign a method from one object to another  its this variable refers to the new object  for example    x000D   x000D  var obj     x000D    someProperty  true  x000D    someMethod  function     x000D      console log this someProperty   x000D      x000D     x000D   x000D  var anotherObj     x000D    someProperty  false  x000D    someMethod  obj someMethod x000D     x000D   x000D  anotherObj someMethod       logs false x000D   x000D   x000D    The same thing happens when you assign requestAnimationFrame method of window to another object  Native functions  such as this  has build-in protection from executing it in other context   There is a Function prototype call   function  which allows you to call a function in another context  You just have to pass it  the object which will be used as context  as a first parameter to this method  For example alert call     gives TypeError  Illegal invocation  However  alert call window  works fine  because now alert is executed in its original scope   If you use  call   with your object like that   support animationFrame call window  function          it works fine  because requestAnimationFrame is executed in scope of window instead of your object   However  using  call   every time you want to call this method  isn t very elegant solution  Instead  you can use Function prototype bind    It has similar effect to  call    but instead of calling the function  it creates a new function which will always be called in specified context  For example    x000D   x000D  window someProperty   true  x000D  var obj     x000D    someProperty  false  x000D    someMethod  function     x000D      console log this someProperty   x000D      x000D     x000D   x000D  var someMethodInWindowContext   obj someMethod bind window   x000D  someMethodInWindowContext       logs true x000D   x000D   x000D    The only downside of Function prototype bind   is that it s a part of ECMAScript 5  which is not supported in IE  lt   8  Fortunately  there is a polyfill on MDN   As you probably already figured out  you can use  bind   to always execute requestAnimationFrame in context of window  Your code could look like this   var support         animationFrame   window requestAnimationFrame            window mozRequestAnimationFrame            window webkitRequestAnimationFrame            window msRequestAnimationFrame            window oRequestAnimationFrame  bind window       Then you can simply use support animationFrame function

User · Answer

You can also use   var obj         alert  alert bind window     obj alert  I  m an alert

[javascript] "Uncaught TypeError: Illegal invocation" in Chrome

Examples related to javascript

Examples related to html

Examples related to google-chrome

Examples related to typeerror