Làm cách nào để sử dụng lớp con trong JavaScript?

lớp phụ. Một lớp con là một lớp được dẫn xuất từ ​​các thuộc tính và phương thức của một số lớp khác được gọi là Lớp cha cho lớp con đó. Một lớp con cho phép chúng ta thay đổi hoặc cập nhật các thuộc tính của lớp cha mà không làm phiền nó. Một lớp con có thể chứa các thuộc tính của lớp cha cũng như chúng ta có thể định nghĩa các thuộc tính mới bên trong nó

Ở đây, trong hình trên, lớp GeekforGeeks sẽ đóng vai trò là lớp cha cho cả lớp Officials và Geeks. Lớp Officials và Geeks sẽ là các lớp con và chúng kế thừa một số thuộc tính và phương thức từ lớp cha GeekforGeeks

Để cung cấp các thuộc tính của lớp cha cho lớp con, chúng ta sử dụng tính kế thừa. Kế thừa là cách mở rộng một lớp bằng cách cung cấp cho nó một số thuộc tính và giá trị mới bằng cách sử dụng một lớp khác mà không làm phiền nó. Kế thừa có thể được thực hiện theo hai cách

• Kế thừa nguyên mẫu
• Kế thừa sử dụng từ khóa mở rộng. es6 hoặc ECMAScript-2015 giới thiệu khái niệm kế thừa các thuộc tính của lớp cha bằng cách sử dụng từ khóa mở rộng. Chúng ta sẽ sử dụng phương thức super() bên trong lớp con để gọi hàm khởi tạo của lớp cha.  

  Trong Java và C++, có một khái niệm rõ ràng về phân cấp lớp. tôi. e. Mỗi lớp có thể có một siêu lớp mà từ đó nó kế thừa các thuộc tính và phương thức. Bất kỳ lớp nào cũng có thể được mở rộng hoặc phân lớp để lớp con kết quả có thể kế thừa hành vi của lớp cha của nó. Như chúng ta đã thấy, JavaScript hỗ trợ kế thừa nguyên mẫu thay vì dựa trên lớp. Tuy nhiên, việc thừa kế có thể xảy ra theo những cách khác

  Sau đây là một ví dụ về kế thừa thông qua các chức năng

  Kế thừa dựa trên nguyên mẫu là lựa chọn tốt hơn nhiều cho các ứng dụng JavaScript trong hầu hết các trường hợp

  
  

  Tạo các lớp con với phần mở rộng

  Trong JavaScript, bạn có thể tạo các lớp con (với tư cách là lớp con của một lớp khác) bằng từ khóa

  Shows response
  
  
  

  0.
  Lớp con kế thừa và có thể mở rộng các thuộc tính và phương thức được định nghĩa trong lớp cha.
  Nếu lớp con không có hàm tạo() thì nó sẽ sử dụng hàm tạo() của lớp cha.
  
  - Ví dụ

  Shows response
  
  
  

  Kế thừa lớp, siêu

  Lớp con kế thừa các thuộc tính và phương thức được định nghĩa trong lớp cha (bao gồm cả các phương thức tĩnh).
  Nếu có một hàm tạo trong lớp con, trước tiên nó cần gọi

  Shows response
  
  
  

  1 trước khi sử dụng "this".
  Để viết lại trong lớp con một số thuộc tính và phương thức từ lớp cha, chỉ cần định nghĩa lại chúng trong lớp con.
  
  - Ví dụ

  Shows response
  
  
  

  Phương thức lớp với siêu

  Từ khóa

  Shows response
  
  
  

  2 dùng để gọi các phương thức tương ứng của siêu lớp. Nó được sử dụng khi bạn không muốn thay thế hoàn toàn phương thức gốc mà muốn thêm các hướng dẫn mới vào nó.
  Các lớp cung cấp từ khóa "siêu" cho điều đó.
  • super(parameters) - để gọi hàm tạo cha, với các tham số bắt buộc (chỉ bên trong hàm tạo())
  • siêu. method(parameters) - để gọi một phương thức cha, với các tham số bắt buộc. Trả về giá trị được trả về bởi phương thức cha
  
  - Ví dụ

  Shows response
  
  
  

  siêu trong các phương pháp tĩnh

  Từ khóa "siêu" cũng có thể được áp dụng trong các phương thức tĩnh.
  - Ví dụ.

  Trong Javascript có nhiều mẫu khác nhau để làm theo khi khởi tạo đối tượng. Mỗi mẫu này. chức năng, chia sẻ chức năng, nguyên mẫu và giả cổ điển, tuân theo các nguyên tắc cú pháp cụ thể và mẫu mà một người chọn tác động đến cách xử lý kế thừa đối tượng. Nếu bạn không chắc chắn về cách thức hoạt động của các mẫu khởi tạo, đây là một bài viết tuyệt vời về chủ đề này. Khi EMCAScript 2015 hoặc ES6 được phát hành, họ đã giới thiệu khả năng tạo các lớp con bằng cách sử dụng các từ khóa mở rộng và siêu, cả hai sẽ được thảo luận sau. Khi một đối tượng là lớp con của một đối tượng khác, nó kế thừa các phương thức và thuộc tính của đối tượng 'cha' và có quyền truy cập vào các phương thức và thuộc tính đó. Bây giờ, hãy thảo luận về cách khởi tạo giả cổ điển, phân lớp và kế thừa đối tượng hoạt động với ES6

  

  từ khóa lớp

  Khi sử dụng khởi tạo ES6, từ khóa 'class' được sử dụng để biểu thị một thể hiện mới của một đối tượng và hàm tạo của nó. Vì chúng ta đang sử dụng ES6 nên chúng ta có thể tạo các phương thức đối tượng ngay trong hàm lớp, sử dụng ít mã hơn và tạo đối tượng dễ đọc hơn. Dưới đây là định dạng mà khởi tạo giả cổ điển ES6 tuân theo. Lưu ý việc sử dụng từ khóa 'class' khi bắt đầu hàm
  

  class Animal {
    constructor(name, favFood) {
      this.name = name;
      this.food = favFood;
    }
    identifier() {
      return `I am ${this.name}`;
    }
  }
  

  Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

  Bây giờ chúng ta có lớp 'cha', chúng ta có thể bắt đầu tạo các lớp con dựa trên đối tượng cha. Để tạo một lớp con, chúng ta cần sử dụng từ khóa 'extends', cho phép chúng ta sao chép lớp cha vào lớp con mới đang được tạo. Đây là nơi lớp mới của chúng ta sẽ kế thừa mọi thứ từ lớp cha. Mặc dù phần mở rộng thực hiện hầu hết các công việc nặng nhọc, nhưng vẫn còn một số công việc cần phải hoàn thành từ phía chúng tôi. Mặc dù các phương thức sẽ được sao chép bằng phần mở rộng, nhưng chúng ta vẫn phải tạo hàm tạo trong lớp mới được tạo. Dưới đây, bạn sẽ thấy cấu trúc của lớp con của chúng tôi bằng cách sử dụng từ khóa mở rộng và tạo hàm tạo bên trong
  

  class Dog extends Animal {
    constructor() {
    // What Goes In Here?
    };
  }
  

  Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

  siêu từ khóa

  Bây giờ lớp con mới của chúng ta trông khá đẹp, nhưng chúng ta sẽ làm gì với hàm tạo bên trong nó? . Điều này cho phép chúng ta tạo lại các thuộc tính giống nhau từ lớp cha trong lớp con. Chúng ta hãy xem làm thế nào nó hoạt động dưới đây
  

  class Dog extends Animal {
    constructor(name, favFood, sound) { 
      // passing the parameters of the parent class
      // plus the parameter sound
      super(name, favFood);
      this.sound = sound;
    }
  }
  

  Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

  Bây giờ chúng ta đã tạo thành công lớp con của mình từ lớp cha, hãy xem cách chúng ta có thể thêm các phương thức vào lớp con cũng như ghi đè lên các phương thức trước đó được kế thừa từ lớp cha, trong khi vẫn duy trì các phương thức đó trong lớp cha. Đây là một trong những ứng dụng tuyệt vời của các lớp con trong Javascript
  

  ________số 8

  Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

  Nhìn vào tất cả những gì chúng tôi đã làm cho đến nay. Chúng ta có một lớp Animal là lớp cha, một lớp Dog là lớp con của lớp Animal và một lớp Cat là lớp con của lớp Dog. Hãy xem cách mỗi lớp con này hoạt động và kế thừa các phương thức và thuộc tính của lớp cha của chúng
  

  
  const bat = new Animal('Dracula', 'blood');
  
  console.log(bat.name); // Prints 'Dracula' to the console
  
  const doggie = new Dog('Spot', 'bones', 'bark');
  
  doggie.identifier(); // returns 'I am Spot' // We still have the 
  // identifier method in our Dog subclass!
  
  doggie.makeNoise(); // Returns 'bark bark' 
  // Our makeNoise function in our Dog subclass 
  // still works as intended even though we 
  // overwrote it within the Cat subclass!
  
  const kitty = new Cat('Sabrina', 'fish', 'meow', 'purrr');
  
  kitty.makeNoise(); // Returns 'Meow!'
  
  kitty.catThing(); // Return 'purrr'
  

  Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

  Như bạn có thể thấy trong các dòng mã ở trên khi chúng ta tạo các lớp con mới từ lớp cha, mỗi lớp con kế thừa những gì lớp cha có và sau đó là bất kỳ phương thức hoặc thuộc tính nào mà bạn chỉ định trong hàm tạo. Sử dụng mẫu ES6 để tạo các lớp con là một lựa chọn tuyệt vời cho lập trình viên và tôi thực sự khuyên bạn nên làm quen với cú pháp và quy trình vì nó rất hữu ích

  Phần kết luận

  Chúng tôi đã đề cập đến quy trình tạo các lớp và lớp con trong Javascript bằng ES6. Như bạn đã thấy, phương thức tạo lớp này cho phép bạn dễ dàng sao chép các thuộc tính và phương thức từ lớp cha bằng cách sử dụng các từ khóa extends và super. Phương pháp này cực kỳ hữu ích và cho phép bạn tự do sửa đổi các lớp con của cha mẹ tùy thuộc vào cách bạn muốn chúng hoạt động. Sử dụng cú pháp ES6 để tạo các lớp con giúp tiết kiệm các dòng mã và do đó tiết kiệm bộ nhớ, cả hai đều là những lợi ích tuyệt vời. ES6 được hỗ trợ bởi tất cả các trình duyệt hiện tại và việc sử dụng nó trong khi tạo các lớp và lớp con là một công cụ tuyệt vời trong hộp công cụ của lập trình viên của bạn, vì vậy hãy lấy nó ra và bắt đầu sử dụng nó trong mã của bạn

  Làm cách nào để viết một lớp con trong JavaScript?

  Chà, có hai phương pháp có thể được sử dụng để tạo một lớp con Javascript, Khởi tạo giả cổ điển và ES6. Trong khởi tạo giả cổ điển, việc tạo một lớp con yêu cầu sử dụng hàm '. nguyên mẫu. call()' phương thức và 'Object .

  Khi nào tôi nên sử dụng phân lớp?

  Phân lớp. Nếu chúng ta muốn sửa đổi trạng thái cũng như hành vi của bất kỳ lớp nào hoặc ghi đè bất kỳ phương thức nào để thay đổi hành vi của lớp cha thì chúng ta sẽ thực hiện phân lớp con. Ví dụ. Chúng tôi phân lớp UIView để thay đổi trạng thái và hành vi của nó trong mã iOS của chúng tôi. Lưu câu trả lời này.

  Mục đích của các lớp con là gì?

  Các lớp con hỗ trợ sửa đổi mã tăng dần bằng cách cho phép lập trình viên định nghĩa một lớp mới bằng cách kế thừa mã của một lớp hiện có, đồng thời có thể sửa đổi hoặc thêm các biến thể hiện và phương thức

  Lớp con hoạt động như thế nào trong Java?

  Một lớp con kế thừa tất cả các thành viên (trường, phương thức và lớp lồng nhau) từ lớp cha của nó . Các hàm tạo không phải là thành viên, vì vậy chúng không được kế thừa bởi các lớp con, nhưng hàm tạo của lớp cha có thể được gọi từ lớp con.