Melaksanakan pembolehubah swasta di JavaScript

JavaScript, bahasa pengaturcaraan yang memberi kuasa kepada World Wide Web, telah menjadi teknologi yang digunakan secara meluas dan serba boleh sejak penciptaannya oleh Brendan Eich pada bulan Mei 1995. Walaupun kejayaannya, ia juga mendapat kritikan yang besar, terutama beberapa ciri. Sebagai contoh, objek dilemparkan ke rentetan apabila digunakan sebagai indeks, 1 == "1" mengembalikan benar, atau kata kunci this yang membingungkan. Walau bagaimanapun, satu ciri yang sangat menarik ialah kewujudan pelbagai teknik yang melaksanakan privasi berubah -ubah.

Pada masa ini, tidak ada cara untuk membuat pembolehubah peribadi secara langsung dalam JavaScript. Dalam bahasa lain, anda boleh menggunakan kata kunci private atau garis bawah berganda dan segala -galanya berfungsi dengan baik, tetapi dalam JavaScript, kepelbagaian yang berubah -ubah mempunyai ciri -ciri yang menjadikannya lebih mirip dengan ciri -ciri bahasa yang muncul daripada fungsi yang diharapkan. Mari kita mula -mula memperkenalkan latar belakang soalan kami.

Kata kunci var

Sehingga 2015, pada dasarnya hanya satu cara untuk membuat pembolehubah, dan itu adalah kata kunci var . var berfungsi scoped, yang bermaksud bahawa pembolehubah instantiated dengan kata kunci ini hanya boleh diakses oleh kod dalam fungsi. Dalam kes di mana fungsi itu adalah luaran atau pada dasarnya "global", pembolehubah akan dapat diakses oleh apa -apa yang dilaksanakan selepas pembolehubah ditakrifkan. Jika anda cuba mengakses pembolehubah dalam skop yang sama sebelum definisi, anda akan mendapat undefined dan bukannya ralat. Ini disebabkan oleh cara "menaik taraf" kata kunci var .

 // Tentukan "a" dalam skop global
var a = 123;

// Tentukan "B" dalam skop fungsi
(fungsi () {
  Console.log (b); // => Oleh kerana promosi, "undefined" dikembalikan bukannya ralat.
  var b = 456;
}) ();

Console.log (A); // => 123
Console.log (b); // melemparkan pengecualian "ReferenceArror" kerana "B" tidak dapat diakses dari luar skop fungsi.

Kelahiran pembolehubah ES6

Pada tahun 2015, ES6/ES2015 telah dikeluarkan secara rasmi, dan diikuti oleh dua kata kunci pembolehubah baru: let and const . Kedua-duanya adalah blok-scoped, yang bermaksud bahawa pembolehubah yang dibuat dengan kata kunci ini boleh diakses oleh apa-apa dalam pasangan kurungan yang sama. Sama seperti var , tetapi let dan pembolehubah const tidak boleh diakses di luar skop blok seperti gelung, fungsi, jika pernyataan, kurungan, dll.

 const a = 123;

// Skop Blok Contoh #1
jika (benar) {
  Const B = 345;
}

// Contoh Skop Blok #2
{
  const C = 678;
}

Console.log (A); // 123
Console.log (b); // melemparkan "ReferenceError" kerana "B" tidak dapat diakses dari luar skop blok.
Console.log (c); // melemparkan "ReferenceError" kerana "B" tidak dapat diakses dari luar skop blok.

Oleh kerana kod di luar skop tidak dapat mengakses pembolehubah, kami memperoleh kemunculan kesendirian. Kami akan memperkenalkan beberapa teknik untuk melaksanakannya dengan cara yang berbeza.

Menggunakan fungsi

Oleh kerana fungsi dalam JavaScript juga blok, semua kata kunci yang berubah -ubah berfungsi dengan mereka. Selain itu, kita boleh melaksanakan corak reka bentuk yang sangat berguna yang disebut "modul".

Mod reka bentuk modul

Google bergantung pada kamus Oxford untuk menentukan "modul":

Program ini boleh dibina daripadanya atau boleh menganalisis mana -mana beberapa unit aktiviti yang berbeza tetapi saling berkaitan.

- Definisi "Modul" 1.2

Corak reka bentuk modul sangat berguna dalam JavaScript kerana ia menggabungkan komponen awam dan swasta dan membolehkan kami memecah program ke dalam komponen yang lebih kecil, hanya mendedahkan apa yang lain bahagian program dapat mengakses melalui proses yang disebut "enkapsulasi". Dengan cara ini, kita hanya mendedahkan apa yang perlu kita gunakan dan menyembunyikan apa yang kita tidak perlu lihat. Kita boleh melakukan ini dengan memanfaatkan skop fungsi.

 const carmodule = () => {
  biarkan milesdriven = 0;
  biarkan kelajuan = 0;

  const mempercepatkan = (jumlah) => {
    kelajuan = jumlah;
    milesdriven = kelajuan;
  }

  const getMilesDriven = () => milesDriven;

  // Menggunakan kata kunci "kembali", anda boleh mengawal kandungan apa yang terdedah dan kandungan apa yang tersembunyi. Dalam kes ini, kami hanya mendedahkan fungsi mempercepatkan () dan getMilesDriven ().
  kembali {
    mempercepat,
    getmilesdriven
  }
};

const testCarmodule = carmodule ();
testCarmodule.Accelerate (5);
testCarmodule.Accelerate (4);
console.log (testCarmodule.getMilesDriven ());

Dengan cara ini kita boleh mendapatkan perbatuan dan percepatan, tetapi kerana pengguna tidak memerlukan kelajuan akses dalam kes ini, kita boleh menyembunyikannya dengan hanya mendedahkan kaedah accelerate() dan getMilesDriven() . Pada asasnya, speed adalah pemboleh ubah peribadi kerana ia hanya boleh diakses oleh kod dalam skop yang sama. Manfaat pembolehubah swasta mula menjadi jelas dalam kes ini. Apabila anda memadamkan keupayaan untuk mengakses pembolehubah, fungsi, atau komponen dalaman yang lain, anda mengurangkan kawasan permukaan yang salah digunakan oleh orang lain secara tidak sengaja oleh orang lain yang tidak sepatutnya digunakan.

Cara lain

Dalam contoh kedua ini, anda akan melihat penambahan kata kunci this . Terdapat perbezaan antara fungsi anak panah ES6 (=>) dan fungsi tradisional () {}. Dengan kata kunci function anda boleh menggunakan this , yang akan mengikat fungsi itu sendiri, dan fungsi anak panah tidak membenarkan penggunaan mana -mana jenis kata kunci this . Kedua -duanya adalah cara yang sama berkesan untuk membuat modul. Idea teras adalah untuk mendedahkan bahagian -bahagian yang perlu diakses dan mengekalkan bahagian lain yang tidak boleh berinteraksi dengan, jadi terdapat data awam dan swasta.

 fungsi carmodule () {
  biarkan milesdriven = 0;
  biarkan kelajuan = 0;

  // Dalam kes ini, kami menggunakan kata kunci "ini" sebaliknya,
  // ia merujuk kepada karmodul
  this.accelerate = (jumlah) => {
    kelajuan = jumlah;
    milesdriven = kelajuan;
  }

  this.getMilesDriven = () => milesDriven;
}

const testCarmodule = carmodule baru ();
testCarmodule.Accelerate (5);
testCarmodule.Accelerate (4);
console.log (testCarmodule.getMilesDriven ());

Kelas ES6

Kelas adalah satu lagi ciri baru dalam ES6. Kelas -kelas pada dasarnya adalah gula sintaktik -dengan kata lain, masih berfungsi, tetapi boleh "mencantikkan" ia menjadi bentuk yang lebih mudah dinyatakan. Bagi kelas, kesepaduan yang berubah -ubah (setakat ini) hampir mustahil kecuali beberapa perubahan besar dibuat kepada kod.

Mari lihat contoh kelas.

 Kelas Carmodule {
  /*
    MilesDriven = 0;
    kelajuan = 0;
  */
  pembina () {
    this.milesDriven = 0;
    this.speed = 0;
  }
  mempercepatkan (jumlah) {
    this.speed = amaun;
    this.milesDriven = this.speed;
  }
  getMilesDriven () {
    kembali ini.milesdriven;
  }
}

const testCarmodule = carmodule baru ();
testCarmodule.Accelerate (5);
testCarmodule.Accelerate (4);
console.log (testCarmodule.getMilesDriven ());

Perkara pertama yang perlu diperhatikan ialah pembolehubah milesDriven dan speed terletak dalam fungsi constructor() . Perhatikan bahawa anda juga boleh menentukan pembolehubah di luar pembina (seperti yang ditunjukkan dalam komen kod), tetapi ia berfungsi sama. Masalahnya ialah pembolehubah ini akan umum dan boleh diakses oleh unsur -unsur di luar kelas.

Mari kita lihat beberapa penyelesaian untuk masalah ini.

Gunakan garis bawah

Dalam situasi di mana kesepadatan adalah untuk mencegah kolaborator daripada membuat beberapa kesilapan bencana, menggunakan garis bawah (_) sebagai awalan pembolehubah, walaupun masih "kelihatan" ke luar, sudah cukup untuk memberi isyarat kepada pemaju, "jangan sentuh pembolehubah ini". Jadi, sebagai contoh, kita kini mempunyai perkara berikut:

 // Ini adalah pembina kelas baru. Perhatikan bahawa ia juga boleh diwakili sebagai kandungan berikut di luar pembina ().
/*
  _MilesDriven = 0;
  _speed = 0;
*/
pembina () {
  this._milesDriven = 0;
  this._speed = 0;
}

Walaupun ini berfungsi untuk kes -kes penggunaannya yang spesifik, ia masih selamat untuk mengatakan bahawa ia tidak sesuai dalam pelbagai cara. Anda masih boleh mengakses pembolehubah, tetapi anda juga perlu mengubah nama pembolehubah.

Masukkan segalanya di pembina

Secara teknikal, memang ada cara untuk menggunakan pembolehubah swasta dalam kelas, iaitu meletakkan semua pembolehubah dan kaedah dalam fungsi constructor() . Mari lihat.

 Kelas Carmodule {
  pembina () {
    biarkan milesdriven = 0;
    biarkan kelajuan = 0;

    this.accelerate = (jumlah) => {
      kelajuan = jumlah;
      milesdriven = kelajuan;
    }

    this.getMilesDriven = () => milesDriven;
  }
}

const testCarmodule = carmodule baru ();
testCarmodule.Accelerate (5);
testCarmodule.Accelerate (4);
console.log (testCarmodule.getMilesDriven ());
console.log (testCarmodule.speed); // Undefined - Kami kini mempunyai privasi pembolehubah yang sebenar.

Pendekatan ini melaksanakan privasi pembolehubah yang benar kerana tidak ada akses langsung kepada mana -mana pembolehubah yang tidak sengaja didedahkan. Masalahnya ialah kita sekarang, baik, tidak kelihatan kod yang sangat baik berbanding dengan kita, dan ia juga memecahkan manfaat gula sintaks apabila kita menggunakan kelas. Pada masa ini, kita juga boleh menggunakan kaedah function() .

Menggunakan lemah

Terdapat juga cara yang lebih kreatif untuk membuat pembolehubah peribadi, iaitu menggunakan WeakMap() . Walaupun ia mungkin terdengar sama dengan Map , kedua -duanya sangat berbeza. Walaupun pemetaan boleh mengambil apa -apa jenis nilai sebagai kunci, WeakMap hanya menerima objek dan memadam nilai -nilai dalam WeakMap apabila sampah mengumpul kekunci objek. Di samping itu, WeakMap tidak boleh berulang, bermakna anda perlu mengakses rujukan kepada kekunci objek untuk mengakses nilai. Ini menjadikannya sangat berguna untuk membuat pembolehubah peribadi, kerana pembolehubah sebenarnya tidak kelihatan.

 Kelas Carmodule {
  pembina () {
    this.data = baru kelemahan ();
    this.data.set (ini, {
      Milesdriven: 0,
      Kelajuan: 0
    });
    this.getMilesDriven = () => this.data.get (this) .milesDriven;
  }

  mempercepatkan (jumlah) {
    // Dalam versi ini, kita sebaliknya membuat kelemahan dan // menggunakan kata kunci "ini" sebagai kunci, yang tidak mungkin // akan digunakan secara tidak sengaja sebagai kunci untuk kelemahan.
    const data = this.data.get (ini);
    const speed = data.speed amaun;
    const milesDriven = data.milesdriven data.speed;
    this.data.set ({Speed, milesDriven});
  }

}

const testCarmodule = carmodule baru ();
testCarmodule.Accelerate (5);
testCarmodule.Accelerate (4);
console.log (testCarmodule.getMilesDriven ());
console.log (testCarmodule.data); // => lemah {[item tidak diketahui]} - Data ini tidak dapat diakses dengan mudah dari luar!

Penyelesaian ini adalah baik untuk menghalang penggunaan data yang tidak disengajakan, tetapi ia tidak benar -benar peribadi, kerana ia masih boleh diakses dari luar dengan this dengan CarModule . Tambahan pula, ia menambah sedikit kerumitan dan oleh itu bukan penyelesaian yang paling elegan.

Gunakan simbol untuk mengelakkan konflik

Jika tujuannya adalah untuk mengelakkan konflik nama, anda boleh menggunakan Symbol untuk menyediakan penyelesaian yang berguna. Ini adalah contoh yang boleh bertindak sebagai nilai yang unik, dan mereka tidak akan sama dengan nilai lain kecuali contohnya yang unik. Berikut adalah contohnya dalam aplikasi kehidupan sebenar:

 Kelas Carmodule {
  pembina () {
    this.speedKey = simbol ("SpeedKey");
    this.milesDrivenKey = simbol ("MilesDrivenKey");
    ini [this.speedkey] = 0;
    ini [this.milesdrivenkey] = 0;
  }

  mempercepatkan (jumlah) {
    // Data ini hampir mustahil untuk mengakses tanpa diduga. Ia tidak semestinya peribadi.
    // tetapi ia menjauhkan diri dari sesiapa sahaja yang akan melaksanakan modul ini.
    Ini [this.speedkey] = jumlah;
    ini [this.milesDrivenKey] = this [this.speedkey];
  }

  getMilesDriven () {
    kembali ini [this.milesdrivenkey];
  }
}

const testCarmodule = carmodule baru ();
testCarmodule.Accelerate (5);
testCarmodule.Accelerate (4);
console.log (testCarmodule.getMilesDriven ());
console.log (testCarmodule.speed); // => undefined - kita perlu mengakses kunci dalaman untuk mengakses pembolehubah.

Seperti penyelesaian garis bawah, pendekatan ini bergantung lebih kurang pada konvensyen penamaan untuk mengelakkan kekeliruan.

Cadangan medan kelas swasta TC39

Baru -baru ini, satu cadangan baru dicadangkan yang akan memperkenalkan pembolehubah swasta ke kelas. Ia mudah: prepend nama pembolehubah dan ia menjadi peribadi. Tiada perubahan struktur tambahan diperlukan.

 Kelas Carmodule {
  #speed = 0
  #MilesDriven = 0

  mempercepatkan (jumlah) {
    // Data ini hampir mustahil untuk mengakses tanpa diduga.
    Ini.#kelajuan = jumlah;
    Ini.#milesDriven = Speed;
  }

  getMilesDriven () {
    kembali ini.#milesdriven;
  }
}

const testCarmodule = carmodule baru ();
testCarmodule.Accelerate (5);
testCarmodule.Accelerate (4);
console.log (testCarmodule.getMilesDriven ());
console.log (testCarmodule.speed); // => undefined - kita perlu mengakses kunci dalaman untuk mengakses pembolehubah.

Ciri -ciri kelas swasta telah menjadi realiti dan mempunyai sokongan penyemak imbas yang cukup baik.

kesimpulannya

Ini adalah ringkasan pelbagai cara untuk melaksanakan pembolehubah swasta dalam JavaScript. Tidak ada pendekatan "betul". Kaedah ini sesuai untuk keperluan yang berbeza, pangkalan kod sedia ada, dan kekangan lain. Walaupun setiap pendekatan mempunyai kelebihan dan kekurangannya, pada akhirnya, semua pendekatan sama -sama berkesan selagi mereka dapat menyelesaikan masalah anda dengan berkesan.

Terima kasih kerana membaca! Saya harap ini memberi anda gambaran tentang cara menggunakan skop dan privasi berubah -ubah untuk meningkatkan kod JavaScript anda. Ini adalah teknologi yang kuat yang menyokong banyak kaedah yang berbeza dan menjadikan kod anda lebih mudah digunakan dan bebas ralat. Cuba beberapa contoh baru untuk mendapatkan perasaan yang lebih baik.

Atas ialah kandungan terperinci Melaksanakan pembolehubah swasta di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!