Chromeで「キャッチされていないTypeError：不正な呼び出し」

requestAnimationFrame以下のコードを使用してネイティブでサポートされているアニメーションを実行する場合：

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

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

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

support.animationFrame意志を直接呼び出すと...

Uncaught TypeError：不正な呼び出し

Chromeで。どうして？

コードでは、カスタムメソッドのプロパティにネイティブメソッドを割り当てています。を呼び出すとsupport.animationFrame(function () {})、現在のオブジェクト（つまり、サポート）のコンテキストで実行されます。ネイティブのrequestAnimationFrame関数が正しく機能するには、次のコンテキストで実行する必要がありますwindow。

したがって、ここでの正しい使い方は support.animationFrame.call(window, function() {});です。

同じことがアラートでも起こります：

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 

別のオプションは、ES5標準の一部であり、すべての最新のブラウザーで使用できるFunction.prototype.bind（）を使用することです。

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

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

次のものも使用できます。

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

メソッド（つまり、オブジェクトに割り当てられた関数）を実行すると、その内部でthis変数を使用してこのオブジェクトを参照できます。次に例を示します。

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

あるオブジェクトから別のオブジェクトにメソッドを割り当てると、そのthis変数は新しいオブジェクトを参照します。次に例を示します。

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

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

anotherObj.someMethod(); // logs false

requestAnimationFrameメソッドwindowを別のオブジェクトに割り当てると、同じことが起こります。このようなネイティブ関数には、他のコンテキストで実行されないように組み込みの保護機能があります。

Function.prototype.call()別のコンテキストで関数を呼び出すことができる関数があります。これ（コンテキストとして使用されるオブジェクト）を最初のパラメーターとしてこのメ​​ソッドに渡すだけです。例えばalert.call({})与えますTypeError: Illegal invocation。ただし、元のスコープで実行されるalert.call(window)ため、正常に機能しalertます。

その.call()ようなオブジェクトで使用する場合：

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

オブジェクトrequestAnimationFrameのwindow代わりにのスコープで実行されるため、正常に動作します。

ただし、.call()このメソッドを呼び出すたびにを使用するのは、あまり洗練された方法ではありません。代わりに、を使用できますFunction.prototype.bind()。これはと同様の効果が.call()ありますが、関数を呼び出す代わりに、指定されたコンテキストで常に呼び出される新しい関数を作成します。例えば：

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

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

唯一の欠点はFunction.prototype.bind()、ECMAScript 5の一部であることです。これは、IE <= 8ではサポートされていません。幸い、MDNにはポリフィルがあります。

おそらくすでに理解しているように、を使用.bind()して常にのrequestAnimationFrameコンテキストで実行できますwindow。コードは次のようになります。

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

その後、単純にを使用できますsupport.animationFrame(function() {});。