Cách gọi một phương thức từ một lớp khác trong JavaScript

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

Một cách để định nghĩa 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 {}

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

cẩu

Một sự khác biệt quan trọng giữa khai báo hàm 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 định nghĩa, 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 một

const p = new Rectangle(); // ReferenceError

class Rectangle {}

const p = new Rectangle(); // ReferenceError

class Rectangle {}

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

Một biểu thức lớp là một cách khác để định nghĩa một lớp. Biểu thức lớp có thể được đặt tên hoặc đặt tên. Tên được đặt cho một biểu thức lớp được đặt tên là cục bộ cho phần thân 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"

Ghi chú. 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ế nâng giống như được mô tả trong phần)

Phần thân của một lớp là phần nằm trong dấu ngoặc nhọ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"

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

Phương thức khởi tạo 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 một

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"

Các khối khởi tạo tĩnh cho phép khởi tạo linh hoạt bao gồm đá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 tư

Nhiều khối tĩnh có thể được khai báo và chúng có thể được xen kẽ với việc 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)

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

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

Xem thêm Iterators và generators

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

Từ khóa tĩnh định nghĩa 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 khởi tạo lớp của chúng và không thể được gọi thông qua một thể hiện của 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 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 sao chép qua các phiên bản

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

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

// 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"

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

const p = new Rectangle(); // ReferenceError

class Rectangle {}

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

Nếu chúng ta viết lại phần trên bằng cách sử dụng cú pháp dựa trên hàm truyền thống ở chế độ không nghiêm ngặt, thì các lệnh gọi phương thức

// 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 {}

Các thuộc tính của thể hiện phải được định nghĩa bên trong các phương thức của lớp

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

Khai báo trường công khai

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

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Các trường lớp tương tự như các thuộc tính đối tượng, không phải biến, vì vậy chúng tôi không sử dụng các từ khóa như

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

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

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

Bằng cách khai báo các trường từ trước, các định nghĩa lớp trở nên dễ tự ghi lại hơn và các trường luôn hiện diện

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 khai để biết thêm thông tin

Khai báo trường riêng

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

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Lỗi khi tham chiếu các trường riêng từ bên ngoài 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 trong lớp của bạn không thể phụ thuộc vào nội bộ, điều này có thể thay đổi từ phiên bản này sang phiên bản khác

Ghi chú. Các trường riêng tư chỉ có thể được khai báo trước trong khai báo trường

Các trường riêng không thể được tạo sau này thông qua việc gán cho chúng, theo cách mà các thuộc tính thông 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

Từ khóa

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

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Nếu có một hàm tạo 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 thường (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 Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

const p = new Rectangle(); // ReferenceError

class Rectangle {}

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

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

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

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

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

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

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

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

const p = new Rectangle(); // ReferenceError

class Rectangle {}

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 {}

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

Có thể sử dụng một hàm có siêu lớp làm đầu vào và một lớp con mở rộng siêu lớp đó làm đầu ra để triển khai các phần trộn trong ECMAScript

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Sau đó, một lớp sử dụng các kết hợp này có thể được viết như thế này

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Một lớp không thể được định nghĩa lại. Cố gắng làm như vậy sẽ 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 của một lớp có cùng tên hai lần, thì bạn sẽ nhận được

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

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

Làm cách nào để gọi phương thức từ một lớp khác trong JS?

Bạn có thể gọi một hàm từ một lớp khác không?

Làm cách nào để hiển thị các phương thức hoặc thuộc tính từ lớp này sang lớp khác?

Làm cách nào để gọi phương thức của lớp cha trong JavaScript?