Bidang kelas swasta baru JavaScript ', dan cara menggunakannya

ES6 memperkenalkan kelas untuk JavaScript, tetapi untuk aplikasi yang kompleks, mereka boleh menjadi terlalu mudah. Bidang Kelas (juga dikenali sebagai Atribut Kelas

) direka untuk memudahkan pembina dengan ahli swasta dan statik. Cadangan ini kini berada di TC39 Fasa 3: Tahap Calon dan kemungkinan akan ditambah kepada ES2019 (ES10). Node.js 12, Chrome 74, dan Babel kini menyokong medan peribadi. Sebelum kita memahami bagaimana bidang kelas dilaksanakan, adalah berguna untuk mengkaji semula kelas ES6. Artikel ini dikemas kini pada tahun 2020. Untuk pengetahuan JavaScript yang lebih mendalam, baca buku kami "JavaScript: Dari Newbie ke Ninja, Edisi Kedua".

mata utama

ES6 memperkenalkan kelas untuk JavaScript, tetapi untuk aplikasi yang kompleks, mereka boleh menjadi terlalu mudah. Bidang kelas ES2019 direka untuk memudahkan pembina dengan ahli swasta dan statik yang boleh ditambah kepada ES2019 (ES10).
Pelaksanaan medan kelas baru membolehkan permulaan sifat awam di luar mana -mana pembina di bahagian atas kelas. Jika pembina masih diperlukan, inisialisasi dilaksanakan sebelum ia berjalan.
bidang kelas dalam ES2019 membolehkan medan kelas swasta diisytiharkan menggunakan awalan hash#. Ini menjadikan bidang ini hanya dapat diakses dalam kaedah dalaman kelas, bukan dari luar kelas.
Penggunaan # untuk mewakili kepelbagaian dalam bidang kelas telah dikritik, terutamanya kerana ia tidak begitu intuitif sebagai kata kunci swasta. Walau bagaimanapun, simbol # tidak sah di luar definisi kelas, memastikan bidang persendirian tetap peribadi.
Manfaat segera bidang kelas ES2019 adalah kod reaksi bersih. Mereka boleh ditugaskan sebagai fungsi menggunakan ES6 = & GT;

asas -asas kategori ES6

pemaju dari bahasa seperti C, C#, Java, dan PHP mungkin dikelirukan oleh model warisan berorientasikan objek JavaScript. Oleh itu, ES6 memperkenalkan kelas

. Mereka kebanyakannya gula sintaks, tetapi menawarkan konsep pengaturcaraan berorientasikan objek yang lebih biasa. Kelas adalah template objek yang mentakrifkan bagaimana objek jenis itu berkelakuan. Kelas haiwan berikut mentakrifkan haiwan umum (kelas biasanya diwakili dalam huruf modal awal untuk membezakannya dari objek dan jenis lain):

<code class="language-javascript">class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  speak() {
    console.log(`${this.name} says "${this.noise}"`);
  }

  walk() {
    console.log(`${this.name} walks on ${this.legs} legs`);
  }

}</code>

Pengisytiharan kelas sentiasa dilaksanakan dalam mod yang ketat. Tidak perlu menambah 'gunakan ketat'.

Kaedah pembina berjalan apabila membuat objek jenis haiwan. Ia biasanya menetapkan sifat awal dan mengendalikan permulaan yang lain. bercakap () dan berjalan () adalah kaedah contoh yang menambah lebih banyak fungsi. Anda kini boleh menggunakan kata kunci baru untuk membuat objek dari kelas ini:

<code class="language-javascript">let rex = new Animal('Rex', 4, 'woof');
rex.speak();          // Rex says "woof"
rex.noise = 'growl';
rex.speak();          // Rex says "growl"</code>

getter dan setter

setter

adalah kaedah khas yang digunakan hanya untuk menentukan nilai. Begitu juga, getter adalah kaedah khas untuk nilai pulangan sahaja. Contohnya:

subclass atau subclass

<code class="language-javascript">class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  speak() {
    console.log(`${this.name} says "${this.noise}"`);
  }

  walk() {
    console.log(`${this.name} walks on ${this.legs} legs`);
  }

  // setter
  set eats(food) {
    this.food = food;
  }

  // getter
  get dinner() {
    return `${this.name} eats ${this.food || 'nothing'} for dinner.`;
  }

}

let rex = new Animal('Rex', 4, 'woof');
rex.eats = 'anything';
console.log( rex.dinner );  // Rex eats anything for dinner.</code>

biasanya mungkin menggunakan satu kelas sebagai kelas asas untuk yang lain. Kelas manusia boleh mewarisi semua sifat dan kaedah dalam kelas haiwan menggunakan kata kunci Extends. Sifat dan kaedah boleh ditambah, dikeluarkan, atau diubah seperti yang diperlukan untuk membuat objek manusia lebih mudah dan lebih jelas:

<code class="language-javascript">class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  speak() {
    console.log(`${this.name} says "${this.noise}"`);
  }

  walk() {
    console.log(`${this.name} walks on ${this.legs} legs`);
  }

}</code>

Super merujuk kepada kelas induk, jadi biasanya panggilan pertama yang dipanggil dalam pembina. Dalam contoh ini, kaedah speak manusia () mengatasi kaedah yang ditakrifkan dalam haiwan. Sekarang anda boleh membuat contoh objek manusia:

<code class="language-javascript">let rex = new Animal('Rex', 4, 'woof');
rex.speak();          // Rex says "woof"
rex.noise = 'growl';
rex.speak();          // Rex says "growl"</code>

Kaedah dan sifat statik

kaedah menentukan menggunakan kata kunci statik membolehkan ia dipanggil pada kelas tanpa membuat contoh objek. Pertimbangkan pemalar math.pi: Tidak perlu membuat objek matematik sebelum mengakses sifat PI. ES6 tidak menyokong sifat statik yang sama seperti bahasa lain, tetapi sifat boleh ditambah kepada definisi kelas itu sendiri. Sebagai contoh, kelas manusia boleh disesuaikan untuk menyimpan tuduhan berapa banyak objek manusia yang telah dibuat:

<code class="language-javascript">class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  speak() {
    console.log(`${this.name} says "${this.noise}"`);
  }

  walk() {
    console.log(`${this.name} walks on ${this.legs} legs`);
  }

  // setter
  set eats(food) {
    this.food = food;
  }

  // getter
  get dinner() {
    return `${this.name} eats ${this.food || 'nothing'} for dinner.`;
  }

}

let rex = new Animal('Rex', 4, 'woof');
rex.eats = 'anything';
console.log( rex.dinner );  // Rex eats anything for dinner.</code>

Kelas statik kelas

akan mengembalikan bilangan manusia dengan sewajarnya:

<code class="language-javascript">class Human extends Animal {

  constructor(name) {

    // 调用Animal构造函数
    super(name, 2, 'nothing of interest');
    this.type = 'human';

  }

  // 重写Animal.speak
  speak(to) {

    super.speak();
    if (to) console.log(`to ${to}`);

  }

}</code>

medan kelas es2019 ( baru )

Pelaksanaan medan kelas baru membolehkan permulaan sifat awam di luar mana -mana pembina di bahagian atas kelas:

<code class="language-javascript">let don = new Human('Don');
don.speak('anyone');        // Don says "nothing of interest" to anyone

don.eats = 'burgers';
console.log( don.dinner );  // Don eats burgers for dinner.</code>

ini bersamaan dengan:

<code class="language-javascript">class Human extends Animal {

  constructor(name) {

    // 调用Animal构造函数
    super(name, 2, 'nothing of interest');
    this.type = 'human';

    // 更新Human对象的计数
    Human.count++;

  }

  // 重写Animal.speak
  speak(to) {

    super.speak();
    if (to) console.log(`to ${to}`);

  }

  // 返回人类对象的个数
  static get COUNT() {
    return Human.count;
  }

}

// 类的静态属性本身 - 不是其对象
Human.count = 0;</code>

Jika anda masih memerlukan pembina, permulaan akan dilaksanakan sebelum ia berjalan.

medan kelas statik

Dalam contoh di atas, sifat statik ditambah kepada objek definisi kelas dengan cara yang tidak jelas selepas menentukan objek kelas. Anda tidak perlu menggunakan medan kelas:

<code class="language-javascript">console.log(`Humans defined: ${Human.COUNT}`); // Humans defined: 0

let don = new Human('Don');

console.log(`Humans defined: ${Human.COUNT}`); // Humans defined: 1

let kim = new Human('Kim');

console.log(`Humans defined: ${Human.COUNT}`); // Humans defined: 2</code>

ini bersamaan dengan:

<code class="language-javascript">class MyClass {

  a = 1;
  b = 2;
  c = 3;

}</code>

medan kelas peribadi

Semua atribut dalam kelas

ES6 adalah awam secara lalai dan boleh diperiksa atau diubahsuai di luar kelas . Dalam contoh haiwan di atas, tiada apa yang dapat menghalang menukar harta makanan tanpa memanggil setter makan:

<code class="language-javascript">class MyClass {

  constructor() {
    this.a = 1;
    this.b = 2;
    this.c = 3;
  }

}</code>

Bahasa lain biasanya membenarkan pengisytiharan atribut swasta. Ini tidak mungkin dalam ES6, jadi pemaju sering menggunakan konvensyen garis bawah (_propertyname), penutupan, simbol, atau lemah untuk menyelesaikan masalah ini. The underscore memberikan pemaju petunjuk, tetapi tidak ada yang dapat menghalang mereka daripada mengakses harta itu. Di ES2019, bidang kelas swasta ditakrifkan menggunakan hash# awalan:

<code class="language-javascript">class MyClass {

  x = 1;
  y = 2;
  static z = 3;

}

console.log( MyClass.z ); // 3</code>

Sila ambil perhatian bahawa kaedah peribadi, getters, atau setters tidak dapat ditakrifkan. TC39 Fasa 3: Cadangan draf mengesyorkan penggunaan hash# awalan untuk nama, yang dilaksanakan di Babel. Contohnya:

<code class="language-javascript">class MyClass {

  constructor() {
    this.x = 1;
    this.y = 2;
  }

}

MyClass.z = 3;

console.log( MyClass.z ); // 3</code>

Manfaat Segera: Lebih banyak kod reaksi ringkas!

Komponen React biasanya mempunyai kaedah yang terikat pada peristiwa DOM. Untuk memastikan ini menyelesaikan komponen, adalah perlu untuk mengikat setiap kaedah dengan sewajarnya. Contohnya:

Apabila inccount ditakrifkan sebagai medan kelas ES2019, ia boleh diberikan sebagai fungsi menggunakan ES6 = & GT; Tidak perlu menambah pernyataan mengikat:

<code class="language-javascript">class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  set eats(food) {
    this.food = food;
  }

  get dinner() {
    return `${this.name} eats ${this.food || 'nothing'} for dinner.`;
  }

}

let rex = new Animal('Rex', 4, 'woof');
rex.eats = 'anything';      // 标准setter
rex.food = 'tofu';          // 完全绕过eats setter
console.log( rex.dinner );  // Rex eats tofu for dinner.</code>

medan kelas: bertambah baik?

<code class="language-javascript">class MyClass {

  a = 1;          // .a是公共的
  #b = 2;         // .#b是私有的
  static #c = 3;  // .#c是私有的和静态的

  incB() {
    this.#b++;
  }

}

let m = new MyClass();

m.incB(); // 运行正常
m.#b = 0; // 错误 - 私有属性不能在类外部修改</code>

Definisi kelas ES6 terlalu mudah. Bidang kelas ES2019 memerlukan kurang kod, meningkatkan kebolehbacaan, dan melaksanakan beberapa kemungkinan menarik untuk pengaturcaraan berorientasikan objek. Menggunakan # bermaksud ketibanya telah menerima beberapa kritikan, terutamanya kerana ia hodoh dan terasa seperti kemahiran. Kebanyakan bahasa melaksanakan kata kunci persendirian, jadi cuba menggunakan ahli itu di luar kelas akan ditolak oleh pengkompil. JavaScript ditafsirkan. Pertimbangkan kod berikut:

<code class="language-javascript">class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  speak() {
    console.log(`${this.name} says "${this.noise}"`);
  }

  walk() {
    console.log(`${this.name} walks on ${this.legs} legs`);
  }

}</code>

Ini akan membuang kesilapan runtime pada baris terakhir, tetapi ia hanya satu akibat yang serius untuk cuba menetapkan harta itu. JavaScript sengaja bertolak ansur, dan ES5 membolehkan mengubah sifat pada sebarang objek. Walaupun kekok, simbol # tidak sah di luar definisi kelas. Cuba untuk mengakses MyObject.#Rahsia boleh membuang ralat sintaks. Perdebatan ini akan diteruskan, tetapi bidang kelas telah diterima pakai dalam pelbagai enjin JavaScript, seperti itu atau tidak. Mereka akan terus wujud.

FAQs (FAQs) Mengenai bidang kelas peribadi JavaScript

Apakah faedah menggunakan bidang kelas swasta JavaScript?

Bidang Kelas Persendirian di JavaScript menyediakan cara untuk merangkum atau menyembunyikan data dalam kelas, yang merupakan prinsip asas pengaturcaraan berorientasikan objek. Pengekalan ini memastikan bahawa keadaan dalaman sesuatu objek hanya boleh diubah dengan cara yang jelas secara jelas. Ini menjadikan kod itu lebih mantap dan boleh diramal kerana ia menghalang kod luaran daripada secara tidak sengaja mengubah keadaan objek dengan cara yang tidak dijangka. Di samping itu, bidang peribadi dapat membantu memudahkan antara muka kelas kerana mereka mengurangkan bilangan sifat dan kaedah yang terdedah kepada dunia luar.

Bagaimana untuk mengisytiharkan bidang kelas swasta di JavaScript?

Di JavaScript, bidang kelas swasta diisytiharkan dengan menambahkan simbol hash (#) sebelum nama medan. Sebagai contoh, untuk mengisytiharkan medan peribadi bernama "Nilai" dalam kelas, anda boleh menulis #Value. Bidang ini kemudiannya boleh diakses hanya dalam kaedah dalaman kelas, bukan dari luar kelas.

Bolehkah saya mengakses medan kelas swasta dari luar kelas?

Tidak, bidang kelas swasta di JavaScript tidak boleh diakses dari luar kelas. Ini adalah dengan reka bentuk, kerana salah satu penggunaan utama bidang persendirian adalah untuk menyembunyikan data dalaman dari dunia luar. Jika anda cuba mengakses medan peribadi dari luar kelas, JavaScript akan membuang ralat sintaks.

Bolehkah saya menggunakan medan kelas swasta dengan bidang awam?

Ya, kelas JavaScript boleh mempunyai bidang swasta dan awam. Bidang awam diisytiharkan dengan cara yang sama seperti bidang swasta, tetapi tidak mempunyai awalan hash (#). Tidak seperti medan peribadi yang hanya boleh diakses dari dalam kelas, bidang awam boleh diakses dan diubahsuai dari dalam dan di luar kelas.

Bagaimana bidang kelas swasta berbeza dari kaedah peribadi dalam JavaScript?

bidang kelas swasta dan kaedah peribadi dalam JavaScript mempunyai kegunaan yang sama, yang kedua -duanya menyediakan cara untuk menyembunyikan butiran dalaman kelas dari dunia luar. Walau bagaimanapun, ia digunakan secara berbeza. Bidang peribadi digunakan untuk menyimpan data yang hanya boleh diakses di dalam kelas, sementara kaedah peribadi adalah fungsi yang hanya boleh dipanggil di dalam kelas.

Bolehkah saya menggunakan medan kelas swasta di semua persekitaran JavaScript?

bidang kelas swasta adalah ciri -ciri yang agak baru dalam JavaScript, jadi tidak semua persekitaran menyokongnya. Pada masa penulisan, versi terkini kebanyakan pelayar utama, termasuk Chrome, Firefox, dan Safari, menyokong bidang persendirian. Walau bagaimanapun, Internet Explorer tidak menyokong mereka. Jika anda perlu menulis kod yang berjalan di semua pelayar, anda mungkin perlu menggunakan penukar seperti Babel untuk menukar kod ke dalam bentuk yang dapat difahami oleh pelayar yang lebih tua.

Bagaimana menggunakan medan kelas swasta dalam kaedah dalaman kelas?

Untuk menggunakan medan kelas swasta dalam kaedah dalaman kelas, hanya merujuk kepada medan dengan namanya (prefixed dengan simbol hash (#)). Sebagai contoh, jika anda mempunyai medan peribadi yang dipanggil "nilai", anda boleh mengaksesnya dalam kaedah anda seperti ini: ini.#Nilai.

Bolehkah saya menggunakan medan kelas swasta dalam subkelas?

Ya, medan kelas swasta boleh digunakan dalam subclass JavaScript. Walau bagaimanapun, setiap subclass mempunyai set medan peribadi sendiri yang tidak dikongsi dengan superclass atau subkelas lain. Ini bermakna jika medan persendirian yang diisytiharkan oleh subkelas adalah nama yang sama dengan medan persendirian dalam superclass, kedua -dua bidang itu benar -benar bebas dan tidak mengganggu satu sama lain.

Bolehkah saya menggunakan medan kelas swasta dalam kaedah statik?

Tidak, bidang kelas swasta dalam JavaScript tidak boleh digunakan dalam kaedah statik. Ini kerana kaedah statik dikaitkan dengan kelas itu sendiri, bukan dengan contoh kelas, dan bidang swasta hanya boleh diakses dalam keadaan kelas.

Bolehkah saya melangkah ke atas bidang kelas swasta di JavaScript?

Tidak, bidang kelas swasta dalam JavaScript tidak termasuk dalam lelaran harta benda objek. Ini adalah dengan reka bentuk, kerana salah satu penggunaan utama bidang persendirian adalah untuk menyembunyikan data dalaman dari dunia luar. Sekiranya anda perlu melangkah ke atas sifat objek, anda harus menggunakan medan atau kaedah awam.

Respons ini mengekalkan format dan penempatan imej asal, dan mengaplikasikan teks semasa memelihara makna asal.

Atas ialah kandungan terperinci Bidang kelas swasta baru JavaScript ', dan cara menggunakannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!