"Uncaught TypeError: Незаконне виклик" у Chrome

Коли я використовую 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 

Іншим варіантом є використання Function.prototype.bind (), яка є частиною стандарту ES5 і доступна у всіх сучасних браузерах.

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() {});.