Kelas JavaScript

ECMAScript 2015, juga dikenali sebagai ES6, memperkenalkan kelas JavaScript.

Kelas JavaScript adalah corak objek JavaScript.

语法 JavaScript

gunakan kata kunci class buatkan kelas.

Jadilah selalu menambahkan nama constructor() method:

Sintaks

class ClassName {
  constructor() { ... }
}

实例

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

Contoh di atas membuat kelas bernama "Car".

Kelas ini mempunyai dua sifat asal: "name" dan "year".

Kelas JavaScriptbukanobjek.

ia adalah objek JavaScripttemplat.

gunakan kelas

Ketika anda mendapat kelas, anda boleh menggunakan kelas itu untuk membuat objek:

实例

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

亲自试一试

Contoh di atas menggunakan Kelas Caruntuk membuat dua Objek Car.

Method constructor akan dipanggil secara automatik semasa membuat objek baru (method constructor method).

Method constructor

Method constructor adalah jenis method khusus:

  • ia mesti mempunyai nama yang pasti "constructor"
  • dijalankan secara automatik semasa membuat objek baru
  • untuk menginisialisasi sifat objek
  • Jika anda tidak mendefinisikan method constructor, JavaScript akan menambah method constructor kosong.

Method kelas

Sintaks method kelas sama seperti method objek.

gunakan kata kunci class untuk membuat kelas.

Jadilah selalu menambah method constructor().

Lalu tambahkan sebarang bilangan method.

Sintaks

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Buatkan method kelas bernama "age" yang mengembalikan tahun kereta:

实例

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"Kereta saya adalah " + myCar.age() + " tahun tua.";

亲自试一试

Anda boleh menghantar parameter kepada method kelas:

实例

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"Kereta saya adalah " + myCar.age(year) + " tahun tua.";

亲自试一试

Pereka penerima

Jadual di bawah menunjukkan versi pereka penuh JavaScript yang disokong pertama kalinya:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
2016 年 3 月 2015 年 7 月 2016 年 3 月 2015 年 10 月 2016 年 3 月

"use strict"

类中的语法必须以“严格模式”编写。

如果您不遵循“严格模式”规则，将收到错误消息。

实例

在“严格模式”下，如果您使用变量而不声明它，会得到错误：

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // This will not work
    let date = new Date(); // This will work
    return date.getFullYear() - this.year;
  }
}

亲自试一试

在 JS 严格模式 在“严格模式”下，如果您使用变量而不声明它，会得到错误：