Memperkenalkan rangka kerja kelas JavaScript yang mudah_Pengetahuan asas

Semasa menulis buku JavaScript yang sedang dalam proses, saya menghabiskan banyak masa pada sistem pewarisan JavaScript dan dalam proses itu mengkaji pelbagai penyelesaian berbeza untuk mensimulasikan warisan kelas klasik. Antara penyelesaian teknikal ini, pelaksanaan base2 dan Prototaip adalah yang paling saya kagumi.

Daripada penyelesaian ini, rangka kerja dengan konotasi ideologinya haruslah ringkas, boleh digunakan semula, mudah difahami dan bebas daripada kebergantungan adalah perkara utama. Berikut ialah contoh penggunaan:

var Person = Class. extend ( {
 init: function (isDancing ) {
  this. dancing = isDancing;
 },
 dance: function ( ) {
  return this. dancing;
 }
} );
var Ninja = Person.extend({
 init: function(){
  this._super( false );
 },
 dance: function(){
  // Call the inherited version of dance()
  return this._super();
 },
 swingSword: function(){
  return true;
 }
});
var p = new Person(true);
p.dance(); // => true
var n = new Ninja();
n.dance(); // => false
n.swingSword(); // => true
// Should all be true
p instanceof Person && p instanceof Class &&
n instanceof Ninja && n instanceof Person && n instanceof Class

Terdapat beberapa perkara yang perlu diambil perhatian:

• Pembina mestilah mudah (dilaksanakan melalui fungsi init),
• Analogi yang baru ditakrifkan mesti diwarisi daripada kelas sedia ada,
• Semua ‘kelas’ mewarisi daripada kelas nenek moyang: Kelas, jadi jika anda ingin mencipta kelas serba baharu, kelas tersebut mestilah subkelas Kelas,
• Perkara yang paling mencabar: kaedah ganti kelas induk mesti boleh diakses (melalui konteks konfigurasi).
• Dalam contoh di atas, anda boleh mendapati bahawa kaedah init() dan dance() bagi kelas induk Orang dipanggil melalui ini._super().

Agak gembira dengan hasilnya: menjadikan definisi kelas berstruktur, mengekalkan warisan tunggal dan dapat memanggil kaedah superclass.

Penciptaan dan pewarisan kelas mudah

Berikut ialah pelaksanaannya (mudah dibaca dan mempunyai ulasan), kira-kira 25 baris. Cadangan dialu-alukan dan dihargai.

/* Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */
// Inspired by base2 and Prototype
( function ( ) {
 var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
 // The base Class implementation (does nothing)
 this.Class = function(){};
  
 // Create a new Class that inherits from this class
 Class.extend = function(prop) {
  var _super = this.prototype;
   
  // Instantiate a base class (but only create the instance,
  // don't run the init constructor)
  initializing = true;
  var prototype = new this();
  initializing = false;
   
  // Copy the properties over onto the new prototype
  for (var name in prop) {
   // Check if we're overwriting an existing function
   prototype[name] = typeof prop[name] == "function" &&
    typeof _super[name] == "function" && fnTest.test(prop[name]) ?
    (function(name, fn){
     return function() {
      var tmp = this._super;
       
      // Add a new ._super() method that is the same method
      // but on the super-class
      this._super = _super[name];
       
      // The method only need to be bound temporarily, so we
      // remove it when we're done executing
      var ret = fn.apply(this, arguments);    
      this._super = tmp;
       
      return ret;
     };
    })(name, prop[name]) :
    prop[name];
  }
   
  // The dummy class constructor
  function Class() {
   // All construction is actually done in the init method
   if ( !initializing && this.init )
    this.init.apply(this, arguments);
  }
   
  // Populate our constructed prototype object
  Class.prototype = prototype;
   
  // Enforce the constructor to be what we expect
  Class.prototype.constructor = Class;
  // And make this class extendable
  Class.extend = arguments.callee;
   
  return Class;
 };
})();

Antaranya, "memulakan/jangan panggil init" dan "mewujudkan kaedah _super" adalah yang paling sukar. Seterusnya, saya akan memberikan pengenalan ringkas tentang perkara ini supaya semua orang lebih memahami mekanisme pelaksanaannya.

Permulaan

Untuk menggambarkan kaedah pewarisan prototaip fungsi, mari kita lihat proses pelaksanaan tradisional, iaitu untuk menunjukkan atribut prototaip subkelas kepada contoh kelas induk. Seperti yang ditunjukkan di bawah:

function Person ( ) { }
function Ninja ( ) { }
Ninja. prototype = new Person ( );
// Allows for instanceof to work:
(new Ninja()) instanceof Person

Walau bagaimanapun, perkara yang mencabar di sini ialah kami hanya mahu mendapatkan kesan 'instantnceOf', tanpa akibat daripada menginstant Orang dan memanggil pembinanya. Untuk mengelakkan ini, tetapkan parameter bool yang dimulakan dalam kod, yang nilainya akan menjadi benar hanya apabila kelas induk dijadikan instantiated dan dikonfigurasikan kepada sifat prototaip kelas anak. Tujuan pemprosesan ini adalah untuk membezakan perbezaan antara memanggil pembina semasa instantiasi sebenar dan warisan reka bentuk, dan kemudian memanggil kaedah init semasa instantiation sebenar:

if ( !initializing )
 this.init.apply(this, arguments);

Perlu diberi perhatian khusus kerana dalam fungsi init, kod yang agak intensif sumber mungkin dijalankan (seperti menyambung ke pelayan, mencipta elemen DOM, dsb., tiada siapa yang boleh meramalkan), jadi ia benar-benar diperlukan untuk membuat perbezaan.

Kaedah Super

Apabila menggunakan warisan, keperluan yang paling biasa ialah subkelas boleh mengakses kaedah ganti kelas super. Dalam pelaksanaan ini, penyelesaian terakhir ialah menyediakan kaedah sementara (._super) yang menunjuk kepada kaedah superclass dan hanya boleh diakses dalam kaedah subclass.

var Person = Class. extend ( {
 init: function (isDancing ) {
  this. dancing = isDancing;
 }
} );
var Ninja = Person.extend({
 init: function(){
  this._super( false );
 }
});
var p = new Person(true);
p.dancing; // => true
var n = new Ninja();
n.dancing; // => false

Melaksanakan fungsi ini memerlukan beberapa langkah. Pertama, kami menggunakan extend untuk menggabungkan contoh Orang asas (contoh kelas, yang proses pembinaannya kami nyatakan di atas) dengan objek literal (parameter fungsi Person.extend()). Semasa proses penggabungan, semakan mudah dibuat: mula-mula semak sama ada atribut yang akan digabungkan ialah fungsi, jika ya, kemudian semak sama ada atribut superclass yang akan ditimpa juga merupakan fungsi? Jika kedua-dua semakan adalah benar, anda perlu menyediakan kaedah _super untuk sifat ini.

Perhatikan bahawa penutupan tanpa nama (mengembalikan objek fungsi) dibuat di sini untuk merangkum kaedah super tambahan. Berdasarkan keperluan untuk mengekalkan persekitaran berjalan, kita harus menyimpan lama this._super (sama ada ia wujud atau tidak) untuk ditetapkan semula selepas fungsi dijalankan Ini membantu dalam kes di mana terdapat nama yang sama (tidak mahu kehilangan penunjuk objek secara tidak sengaja) Masalah yang tidak dapat diramalkan.

Kemudian, cipta kaedah _super baharu yang hanya menunjuk kepada kaedah yang diganti dalam kelas super. Alhamdulillah, tidak perlu membuat apa-apa perubahan kepada _super atau menukar skop, kerana persekitaran pelaksanaan fungsi akan berubah secara automatik dengan objek memanggil fungsi (penunjuk ini akan menunjuk ke kelas super).

Akhir sekali, panggil kaedah objek literal This._super() boleh digunakan semasa pelaksanaan kaedah Selepas kaedah dilaksanakan, atribut _super ditetapkan semula kepada keadaan asalnya, dan kemudian kembali keluar dari fungsi.

Terdapat banyak cara untuk mencapai kesan yang sama (saya pernah melihat super mengikat dirinya sebelum ini dan kemudian mengaksesnya dengan arguments.callee), tetapi saya merasakan kaedah ini paling baik menggambarkan ciri kebolehgunaan dan kesederhanaan.

Di antara banyak kerja berdasarkan prototaip JavaScript yang telah saya siapkan, ini adalah satu-satunya pelan pelaksanaan warisan kelas yang telah saya terbitkan untuk dikongsi dengan anda. Saya berpendapat bahawa kod ringkas (mudah dipelajari, mudah diwarisi, kurang memuat turun) perlu dikemukakan untuk dibincangkan oleh semua orang Oleh itu, bagi orang yang mempelajari pembinaan dan pewarisan kelas JavaScript, pelan pelaksanaan ini adalah permulaan yang baik.