Hướng dẫn can you create class in javascript? - bạn có thể tạo lớp học trong javascript không?

Xác định các lớp học

Trên thực tế, các lớp là "các hàm đặc biệt" và giống như bạn có thể xác định các biểu thức chức năng và khai báo chức năng, cú pháp lớp có hai thành phần: biểu thức lớp và khai báo lớp.

Tuyên bố lớp học

Một cách để xác định một lớp là sử dụng khai báo lớp. Để khai báo một lớp, bạn sử dụng từ khóa

const p = new Rectangle(); // ReferenceError

class Rectangle {}

const p = new Rectangle(); // ReferenceError

class Rectangle {}

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Kéo

Một sự khác biệt quan trọng giữa khai báo chức năng và khai báo lớp là trong khi các hàm có thể được gọi trong mã xuất hiện trước khi chúng được xác định, các lớp phải được xác định trước khi chúng có thể được xây dựng. Mã như sau sẽ ném

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle"

// named
Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle2"

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle"

// named
Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle2"

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Điều này xảy ra bởi vì trong khi lớp được nâng các giá trị của nó không được khởi tạo.

Biểu thức lớp học

Một biểu thức lớp là một cách khác để xác định một lớp. Biểu thức lớp có thể được đặt tên hoặc không tên. Tên được đặt cho một biểu thức lớp được đặt tên là cục bộ với cơ thể của lớp. Tuy nhiên, nó có thể được truy cập thông qua thuộc tính

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle"

// named
Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle2"

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle"

// named
Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle2"

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle"

// named
Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle2"

LƯU Ý: Các biểu thức lớp phải được khai báo trước khi chúng có thể được sử dụng (chúng phải tuân theo các hạn chế kéo tương tự như được mô tả trong phần khai báo lớp). Class expressions must be declared before they can be used (they are subject to the same hoisting restrictions as described in the class declarations section).

Định nghĩa cơ thể và phương pháp

Cơ thể của một lớp là phần trong ngoặc xoăn

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle"

// named
Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle2"

Chế độ nghiêm ngặt

Cơ thể của một lớp được thực thi ở chế độ nghiêm ngặt, tức là, mã được viết ở đây phải chịu cú pháp nghiêm ngặt hơn để tăng hiệu suất, một số lỗi im lặng sẽ được ném và một số từ khóa được dành cho các phiên bản trong tương lai của Ecmascript.

Người xây dựng

Phương thức Constructor là một phương thức đặc biệt để tạo và khởi tạo một đối tượng được tạo bằng

const p = new Rectangle(); // ReferenceError

class Rectangle {}

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle"

// named
Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle2"

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle"

// named
Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle2"

Một hàm tạo có thể sử dụng từ khóa

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle"

// named
Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle2"

Khối khởi tạo tĩnh

Các khối khởi tạo tĩnh cho phép khởi tạo linh hoạt các thuộc tính tĩnh bao gồm cả việc đánh giá các câu lệnh trong quá trình khởi tạo và cấp quyền truy cập vào phạm vi riêng.

Nhiều khối tĩnh có thể được khai báo và chúng có thể được xen kẽ với khai báo các thuộc tính và phương thức tĩnh (tất cả các mục tĩnh được đánh giá theo thứ tự khai báo).

Phương pháp nguyên mẫu

Xem thêm Định nghĩa phương pháp.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

Phương pháp máy phát điện

Xem thêm Trình lặp và máy phát điện.

class Polygon {
  constructor(...sides) {
    this.sides = sides;
  }
  // Method
  *getSides() {
    for (const side of this.sides) {
      yield side;
    }
  }
}

const pentagon = new Polygon(1,2,3,4,5);

console.log([...pentagon.getSides()]); // [1,2,3,4,5]

Phương pháp và tính chất tĩnh

Từ khóa tĩnh xác định một phương thức hoặc thuộc tính tĩnh cho một lớp. Các thành viên tĩnh (thuộc tính và phương thức) được gọi mà không cần khởi tạo lớp của họ và không thể được gọi thông qua một thể hiện lớp. Các phương thức tĩnh thường được sử dụng để tạo các chức năng tiện ích cho một ứng dụng, trong khi các thuộc tính tĩnh rất hữu ích cho bộ đệm, cấu hình cố định hoặc bất kỳ dữ liệu nào khác mà bạn không cần phải được sao chép trên các trường hợp.cannot be called through a class instance. Static methods are often used to create utility functions for an application, whereas static properties are useful for caches, fixed-configuration, or any other data you don't need to be replicated across instances.

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static displayName = "Point";
  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
p1.displayName; // undefined
p1.distance;    // undefined
p2.displayName; // undefined
p2.distance;    // undefined

console.log(Point.displayName);      // "Point"
console.log(Point.distance(p1, p2)); // 7.0710678118654755

Liên kết class Rectangle { constructor(height, width) { this.height = height; this.width = width; } // Getter get area() { return this.calcArea(); } // Method calcArea() { return this.height * this.width; } } const square = new Rectangle(10, 10); console.log(square.area); // 100 0 với phương pháp nguyên mẫu và tĩnh

Khi phương thức tĩnh hoặc nguyên mẫu được gọi mà không có giá trị cho

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

const p = new Rectangle(); // ReferenceError

class Rectangle {}

class Animal {
  speak() {
    return this;
  }
  static eat() {
    return this;
  }
}

const obj = new Animal();
obj.speak(); // the Animal object
const speak = obj.speak;
speak(); // undefined

Animal.eat() // class Animal
const eat = Animal.eat;
eat(); // undefined

Nếu chúng ta viết lại ở trên bằng cách sử dụng cú pháp dựa trên chức năng truyền thống ở chế độ không đóng cửa, thì các cuộc gọi phương thức

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

function Animal() { }

Animal.prototype.speak = function () {
  return this;
}

Animal.eat = function () {
  return this;
}

const obj = new Animal();
const speak = obj.speak;
speak(); // global object (in non–strict mode)

const eat = Animal.eat;
eat(); // global object (in non-strict mode)

Thuộc tính thể hiện

Thuộc tính thể hiện phải được xác định bên trong các phương thức lớp:

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Tuyên bố thực địa

Tuyên bố lĩnh vực công cộng

Với cú pháp khai báo trường JavaScript, ví dụ trên có thể được viết là:

class Rectangle {
  height = 0;
  width;
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Chúng tôi không cần các từ khóa như

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

class Polygon {
  constructor(...sides) {
    this.sides = sides;
  }
  // Method
  *getSides() {
    for (const side of this.sides) {
      yield side;
    }
  }
}

const pentagon = new Polygon(1,2,3,4,5);

console.log([...pentagon.getSides()]); // [1,2,3,4,5]

class Polygon {
  constructor(...sides) {
    this.sides = sides;
  }
  // Method
  *getSides() {
    for (const side of this.sides) {
      yield side;
    }
  }
}

const pentagon = new Polygon(1,2,3,4,5);

console.log([...pentagon.getSides()]); // [1,2,3,4,5]

Bằng cách tuyên bố các trường trước, các định nghĩa lớp trở nên tự ghi chép hơn và các trường luôn luôn có mặt.

Như đã thấy ở trên, các trường có thể được khai báo có hoặc không có giá trị mặc định.

Xem các trường lớp công cộng để biết thêm thông tin.

Tuyên bố lĩnh vực tư nhân

Sử dụng các trường riêng, định nghĩa có thể được tinh chỉnh như dưới đây.

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Đó là một lỗi để tham khảo các trường riêng từ bên ngoài lớp; Chúng chỉ có thể được đọc hoặc viết trong cơ thể lớp. Bằng cách xác định những thứ không hiển thị bên ngoài lớp, bạn đảm bảo rằng người dùng của lớp bạn không thể phụ thuộc vào nội bộ, có thể thay đổi từ phiên bản này sang phiên bản khác.

LƯU Ý: Các trường riêng chỉ có thể được khai báo về phía trước trong khai báo trường. Private fields can only be declared up-front in a field declaration.

Các trường riêng không thể được tạo sau đó thông qua việc gán cho chúng, cách mà các thuộc tính bình thường có thể.

Để biết thêm thông tin, hãy xem các tính năng của lớp riêng.

Phân loại phụ với class Polygon { constructor(...sides) { this.sides = sides; } // Method *getSides() { for (const side of this.sides) { yield side; } } } const pentagon = new Polygon(1,2,3,4,5); console.log([...pentagon.getSides()]); // [1,2,3,4,5] 2

Từ khóa

class Polygon {
  constructor(...sides) {
    this.sides = sides;
  }
  // Method
  *getSides() {
    for (const side of this.sides) {
      yield side;
    }
  }
}

const pentagon = new Polygon(1,2,3,4,5);

console.log([...pentagon.getSides()]); // [1,2,3,4,5]

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Nếu có một hàm tạo có trong lớp con, trước tiên nó cần gọi Super () trước khi sử dụng "This".

Người ta cũng có thể mở rộng các "lớp" dựa trên chức năng truyền thống:

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Lưu ý rằng các lớp không thể mở rộng các đối tượng thường xuyên (không thể xây dựng). Nếu bạn muốn kế thừa từ một đối tượng thông thường, thay vào đó bạn có thể sử dụng

class Polygon {
  constructor(...sides) {
    this.sides = sides;
  }
  // Method
  *getSides() {
    for (const side of this.sides) {
      yield side;
    }
  }
}

const pentagon = new Polygon(1,2,3,4,5);

console.log([...pentagon.getSides()]); // [1,2,3,4,5]

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Loài

Bạn có thể muốn trả về các đối tượng

class Polygon {
  constructor(...sides) {
    this.sides = sides;
  }
  // Method
  *getSides() {
    for (const side of this.sides) {
      yield side;
    }
  }
}

const pentagon = new Polygon(1,2,3,4,5);

console.log([...pentagon.getSides()]); // [1,2,3,4,5]

class Polygon {
  constructor(...sides) {
    this.sides = sides;
  }
  // Method
  *getSides() {
    for (const side of this.sides) {
      yield side;
    }
  }
}

const pentagon = new Polygon(1,2,3,4,5);

console.log([...pentagon.getSides()]); // [1,2,3,4,5]

Ví dụ: khi sử dụng các phương thức như

class Polygon {
  constructor(...sides) {
    this.sides = sides;
  }
  // Method
  *getSides() {
    for (const side of this.sides) {
      yield side;
    }
  }
}

const pentagon = new Polygon(1,2,3,4,5);

console.log([...pentagon.getSides()]); // [1,2,3,4,5]

class Polygon {
  constructor(...sides) {
    this.sides = sides;
  }
  // Method
  *getSides() {
    for (const side of this.sides) {
      yield side;
    }
  }
}

const pentagon = new Polygon(1,2,3,4,5);

console.log([...pentagon.getSides()]); // [1,2,3,4,5]

class Polygon {
  constructor(...sides) {
    this.sides = sides;
  }
  // Method
  *getSides() {
    for (const side of this.sides) {
      yield side;
    }
  }
}

const pentagon = new Polygon(1,2,3,4,5);

console.log([...pentagon.getSides()]); // [1,2,3,4,5]

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static displayName = "Point";
  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
p1.displayName; // undefined
p1.distance;    // undefined
p2.displayName; // undefined
p2.distance;    // undefined

console.log(Point.displayName);      // "Point"
console.log(Point.distance(p1, p2)); // 7.0710678118654755

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Các cuộc gọi siêu lớp với // unnamed let Rectangle = class { constructor(height, width) { this.height = height; this.width = width; } }; console.log(Rectangle.name); // "Rectangle" // named Rectangle = class Rectangle2 { constructor(height, width) { this.height = height; this.width = width; } }; console.log(Rectangle.name); // "Rectangle2" 9

Từ khóa

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle"

// named
Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle2"

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Mix-ins

Tóm tắt các lớp con hoặc hỗn hợp là các mẫu cho các lớp. Một lớp Ecmascript chỉ có thể có một siêu lớp duy nhất, do đó, nhiều kế thừa từ các lớp công cụ, chẳng hạn, là không thể. Các chức năng phải được cung cấp bởi siêu lớp.

Một chức năng có siêu lớp dưới dạng đầu vào và lớp con mở rộng siêu lớp đó làm đầu ra có thể được sử dụng để thực hiện các bản phối trong ecmascript:

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Một lớp sử dụng các bản phối này sau đó có thể được viết như thế này:

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Chạy lại một định nghĩa lớp học

Một lớp học không thể được xác định lại. Cố gắng làm như vậy tạo ra một

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle"

// named
Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name); // "Rectangle2"

Nếu bạn đang thử nghiệm mã trong trình duyệt web, chẳng hạn như bảng điều khiển web Firefox (Công cụ> Nhà phát triển web> Bảng điều khiển web) và bạn 'chạy' định nghĩa về một lớp có cùng tên hai lần, bạn sẽ nhận được

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static displayName = "Point";
  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
p1.displayName; // undefined
p1.distance;    // undefined
p2.displayName; // undefined
p2.distance;    // undefined

console.log(Point.displayName);      // "Point"
console.log(Point.distance(p1, p2)); // 7.0710678118654755

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static displayName = "Point";
  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
p1.displayName; // undefined
p1.distance;    // undefined
p2.displayName; // undefined
p2.distance;    // undefined

console.log(Point.displayName);      // "Point"
console.log(Point.distance(p1, p2)); // 7.0710678118654755

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static displayName = "Point";
  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;

    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
p1.displayName; // undefined
p1.distance;    // undefined
p2.displayName; // undefined
p2.distance;    // undefined

console.log(Point.displayName);      // "Point"
console.log(Point.distance(p1, p2)); // 7.0710678118654755

Xem thêm