Rumah  >  Artikel  >  hujung hadapan web  >  Adakah javascript mempunyai cara untuk menentukan kelas?

Adakah javascript mempunyai cara untuk menentukan kelas?

WBOY
WBOYasal
2022-06-16 17:16:281870semak imbas

Javascript mempunyai kaedah untuk mentakrifkan kelas. Kaedah: 1. Gunakan pembina untuk mentakrifkan kelas, sintaksnya ialah "nama fungsi() {this.name = "...";}" 2. Gunakan kaedah "Object.create()" untuk mentakrifkan kelas , sintaksnya ialah "var name = Object.create(...);";

Adakah javascript mempunyai cara untuk menentukan kelas?

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi JavaScript 1.8.5, komputer Dell G3.

Adakah JavaScript mempunyai cara untuk mentakrifkan kelas?

Javascript mempunyai cara untuk mentakrifkan kelas

Tiga cara untuk mentakrifkan kelas dalam Javascript

Dalam pengaturcaraan berorientasikan objek, kelas ialah templat untuk objek, yang mentakrifkan sifat dan kaedah yang biasa kepada kumpulan objek yang sama (juga dipanggil "kejadian").

Bahasa Javascript tidak menyokong "kelas", tetapi anda boleh menggunakan beberapa penyelesaian untuk mensimulasikan "kelas".

1. Kaedah Pembina

Ini adalah kaedah klasik dan kaedah yang mesti diajar dalam buku teks. Ia menggunakan pembina untuk mensimulasikan "kelas" dan menggunakan kata kunci ini secara dalaman untuk merujuk kepada objek contoh.

  function Cat() {
    this.name = "大毛";
  }

Apabila menjana tika, gunakan kata kunci baharu.

  var cat1 = new Cat();
  alert(cat1.name); // 大毛

Atribut dan kaedah kelas juga boleh ditakrifkan pada objek prototaip pembina.

  Cat.prototype.makeSound = function(){
    alert("喵喵喵");
  }

Kelemahan utamanya ialah ia agak rumit, menggunakan ini dan prototaip, dan sangat susah payah untuk menulis dan membaca.

2. Kaedah Object.create()

Untuk menyelesaikan kekurangan "kaedah pembina" dan menjana objek dengan lebih mudah, Javascript Edisi kelima ECMAScript standard antarabangsa mencadangkan kaedah baharu Object.create().

Menggunakan kaedah ini, "kelas" ialah objek, bukan fungsi.

  var Cat = {
    name: "大毛",
    makeSound: function(){ alert("喵喵喵"); }
  };

Kemudian, gunakan terus Object.create() untuk menjana tika tanpa menggunakan baharu.

  var cat1 = Object.create(Cat);
  alert(cat1.name); // 大毛
  cat1.makeSound(); // 喵喵喵

Pada masa ini, versi terkini semua penyemak imbas utama (termasuk IE9) telah menggunakan kaedah ini. Jika anda menemui penyemak imbas lama, anda boleh menggunakan kod berikut untuk menggunakan kod itu sendiri.

  if (!Object.create) {
    Object.create = function (o) {
       function F() {}
      F.prototype = o;
      return new F();
    };
  }

Kaedah ini lebih mudah daripada "kaedah pembina", tetapi ia tidak boleh melaksanakan sifat persendirian dan kaedah persendirian, ia juga tidak boleh berkongsi data antara objek contoh dan simulasi "kelas" tidak cukup komprehensif .

3. Kaedah Minimalis

Pengaturcara Belanda Gabor de Mooij mencadangkan kaedah baharu yang lebih baik daripada kaedah Object.create(), yang mana beliau dipanggil "pendekatan minimalis". Ini juga kaedah yang saya cadangkan.

3.1 Enkapsulasi

Kaedah ini tidak menggunakan ini dan prototaip, dan kod ini sangat mudah untuk digunakan, itulah sebabnya ia dipanggil "kaedah minimalis" .

Pertama sekali, ia juga menggunakan objek untuk mensimulasikan "kelas". Dalam kelas ini, tentukan fungsi pembina createNew() untuk menjana kejadian.

  var Cat = {
    createNew: function(){
      // some code here
    }
  };

Kemudian, dalam createNew(), takrifkan objek instance dan gunakan objek instance ini sebagai nilai pulangan.

  var Cat = {
    createNew: function(){
      var cat = {};
      cat.name = "大毛";
      cat.makeSound = function(){ alert("喵喵喵"); };
      return cat;
    }
  };

Apabila menggunakannya, panggil kaedah createNew() untuk mendapatkan objek instance.

  var cat1 = Cat.createNew();
  cat1.makeSound(); // 喵喵喵

Kelebihan kaedah ini ialah ia mudah difahami, mempunyai struktur yang jelas dan elegan, dan mematuhi konstruk "pengaturcaraan berorientasikan objek" tradisional, jadi ciri berikut boleh digunakan dengan mudah .

3.2 Warisan

Sangat mudah untuk membenarkan satu kelas mewarisi kelas lain. Cuma panggil kaedah createNew() yang terakhir dalam kaedah createNew() yang pertama.

Tentukan dahulu kelas Haiwan.

  var Animal = {
    createNew: function(){
      var animal = {};
      animal.sleep = function(){ alert("睡懒觉"); };
      return animal;
    }
  };

Kemudian, dalam kaedah createNew() Cat, panggil kaedah createNew() Animal.

  var Cat = {
    createNew: function(){
      var cat = Animal.createNew();
      cat.name = "大毛";
      cat.makeSound = function(){ alert("喵喵喵"); };
      return cat;
    }
  };

Instance Cat yang diperoleh dengan cara ini akan mewarisi kedua-dua kelas Cat dan kelas Haiwan.

  var cat1 = Cat.createNew();
  cat1.sleep(); // 睡懒觉

3.3 Sifat persendirian dan kaedah persendirian

Dalam kaedah createNew(), selagi kaedah dan sifat tidak ditakrifkan pada objek kucing, ia adalah peribadi.

  var Cat = {
    createNew: function(){
      var cat = {};
      var sound = "喵喵喵";
      cat.makeSound = function(){ alert(sound); };
      return cat;
    }
  }

Bunyi pembolehubah dalaman dalam contoh di atas tidak boleh dibaca secara luaran Ia hanya boleh dibaca melalui kaedah awam makeSound() cat.

  var cat1 = Cat.createNew();
  alert(cat1.sound); // undefined

3.4 Perkongsian Data

Kadangkala, kita memerlukan semua objek contoh untuk dapat membaca dan menulis data dalaman yang sama. Pada masa ini, hanya merangkum data dalaman di dalam objek kelas dan di luar kaedah createNew().

  var Cat = {
    sound : "喵喵喵",
    createNew: function(){
      var cat = {};
      cat.makeSound = function(){ alert(Cat.sound); };
      cat.changeSound = function(x){ Cat.sound = x; };
      return cat;
    }
  };

Kemudian, dua objek tika dijana:

  var cat1 = Cat.createNew();
  var cat2 = Cat.createNew();
  cat1.makeSound(); // 喵喵喵

Pada masa ini, jika satu objek tika mengubah suai data yang dikongsi, objek tika yang lain juga akan terjejas.

  cat2.changeSound("啦啦啦");
  cat1.makeSound(); // 啦啦啦

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Adakah javascript mempunyai cara untuk menentukan kelas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn