“Uncaught TypeError: Permintaan ilegal” di Chrome

Ketika saya menggunakan requestAnimationFrameuntuk melakukan beberapa animasi yang didukung asli dengan kode di bawah ini:

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

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

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

Panggilan langsung support.animationFrameakan memberi ...

TypeError Tidak Tertangkap: Permintaan ilegal

di Chrome. Mengapa?

Dalam kode Anda, Anda menetapkan metode asli ke properti objek khusus. Ketika Anda memanggil support.animationFrame(function () {}), itu dijalankan dalam konteks objek saat ini (yaitu dukungan). Agar fungsi requestAnimationFrame asli berfungsi dengan baik, itu harus dijalankan dalam konteks window.

Jadi penggunaan yang benar di sini adalah support.animationFrame.call(window, function() {});.

Hal yang sama juga terjadi dengan peringatan:

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 

Pilihan lainnya adalah menggunakan Function.prototype.bind () yang merupakan bagian dari standar ES5 dan tersedia di semua browser modern.

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

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

Anda juga bisa menggunakan:

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

Saat Anda menjalankan sebuah metode (yaitu fungsi yang ditugaskan ke sebuah objek), di dalamnya Anda dapat menggunakan thisvariabel untuk merujuk ke objek ini, misalnya:

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

Jika Anda menetapkan metode dari satu objek ke objek lain, thisvariabelnya merujuk ke objek baru, misalnya:

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

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

anotherObj.someMethod(); // logs false

Hal yang sama terjadi ketika Anda menetapkan requestAnimationFramemetode windowke objek lain. Fungsi asli, seperti ini, memiliki perlindungan bawaan agar tidak mengeksekusinya dalam konteks lain.

Ada Function.prototype.call()fungsi, yang memungkinkan Anda memanggil fungsi dalam konteks lain. Anda hanya perlu meneruskannya (objek yang akan digunakan sebagai konteks) sebagai parameter pertama untuk metode ini. Misalnya alert.call({})memberi TypeError: Illegal invocation. Namun, alert.call(window)berfungsi dengan baik, karena sekarang alertdijalankan dalam lingkup aslinya.

Jika Anda menggunakan .call()dengan objek seperti itu:

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

ini berfungsi dengan baik, karena requestAnimationFramedijalankan dalam lingkup windowalih-alih objek Anda.

Namun, menggunakan .call()setiap kali Anda ingin memanggil metode ini, bukanlah solusi yang sangat elegan. Sebagai gantinya, Anda bisa menggunakan Function.prototype.bind(). Ini memiliki efek yang mirip dengan .call(), tetapi alih-alih memanggil fungsi, ini membuat fungsi baru yang akan selalu dipanggil dalam konteks yang ditentukan. Sebagai contoh:

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

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

Satu-satunya downside Function.prototype.bind()adalah bahwa ini adalah bagian dari ECMAScript 5, yang tidak didukung di IE <= 8 . Untungnya, ada polyfill di MDN .

Seperti yang mungkin sudah Anda ketahui, Anda dapat menggunakan .bind()untuk selalu mengeksekusi requestAnimationFramedalam konteks window. Kode Anda akan terlihat seperti ini:

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

Kemudian Anda cukup menggunakan support.animationFrame(function() {});.