CodeGym /Khóa học Java /Frontend SELF VI /Mixin và composition

Mixin và composition

Frontend SELF VI
Mức độ , Bài học
Có sẵn

11.1 Mixin

Mixin và composition là những công cụ mạnh mẽ để tổ chức và tái sử dụng mã trong JavaScript. Chúng cung cấp các phương pháp thay thế cho kế thừa cổ điển, cho phép tạo ra các hệ thống linh hoạt và mô-đun.

Mixin là một cách để tái sử dụng mã, cho phép thêm chức năng vào các lớp mà không sử dụng kế thừa. Mixin là một đối tượng chứa các phương thức và thuộc tính có thể được sao chép vào các lớp hoặc đối tượng khác.

Ví dụ sử dụng mixin:

JavaScript
    
      const CanEat = {
        eat() {
          console.log('Eating...');
        }
      };

      const CanWalk = {
        walk() {
          console.log('Walking...');
        }
      };

      class Person {
        constructor(name) {
          this.name = name;
        }
      }

      // Sao chép các phương thức từ mixin vào prototype của lớp
      Object.assign(Person.prototype, CanEat, CanWalk);

      const person = new Person('John');

      person.eat();  // Kết quả: Eating...
      person.walk(); // Kết quả: Walking...
    
  

Ưu điểm của mixin:

  1. Tái sử dụng mã: mixin cho phép dễ dàng chia sẻ các phương thức và thuộc tính chung giữa các lớp.
  2. Linh hoạt: có thể chọn mixin nào cần áp dụng cho các lớp, cung cấp sự tổ chức mã linh hoạt hơn.
  3. Tránh giới hạn của kế thừa: mixin cho phép thêm chức năng mà không cần tạo ra các cấu trúc kế thừa phức tạp.

Vấn đề của mixin:

  1. Xung đột tên: khi kết hợp nhiều mixin, có thể xảy ra xung đột tên của các phương thức hoặc thuộc tính.
  2. Cấu trúc không rõ ràng: mixin có thể làm cho cấu trúc lớp kém rõ ràng, gây khó khăn trong việc bảo trì mã.

11.2 Composition

Composition là cách tiếp cận mà các đối tượng được tạo ra bằng cách kết hợp nhiều đối tượng hoặc hàm để tạo thành hành vi phức tạp hơn. Composition cho phép xây dựng hệ thống từ những mô-đun nhỏ, độc lập, làm cho mã linh hoạt hơn và dễ mở rộng.

Ví dụ 1: Composition của hàm

JavaScript
    
      function canEat(obj) {
        obj.eat = function() {
          console.log('Eating...');
        };
      }

      function canWalk(obj) {
        obj.walk = function() {
          console.log('Walking...');
        };
      }

      function Person(name) {
        this.name = name;
      }

      const person = new Person('John');
      canEat(person);
      canWalk(person);

      person.eat();  // Kết quả: Eating...
      person.walk(); // Kết quả: Walking...
    
  

Ví dụ 2: Composition với lớp

JavaScript
    
      class CanEat {
        eat() {
          console.log('Eating...');
        }
      }
      
      class CanWalk {
        walk() {
          console.log('Walking...');
        }
      }
      
      class Person {
        constructor(name) {
          this.name = name;
          // Tạo các instance của CanEat và CanWalk
          this.eater = new CanEat();
          this.walker = new CanWalk();
        }
      
        // Ủy quyền phương thức cho các instance tương ứng
        eat() {
          this.eater.eat();
        }
      
        walk() {
          this.walker.walk();
        }
      }
      
      const person = new Person('John');
      
      person.eat();  // Kết quả: Eating...
      person.walk(); // Kết quả: Walking...
    
  

Ưu điểm của composition:

  1. Linh hoạt: composition cho phép dễ dàng kết hợp các khía cạnh hành vi khác nhau và tái sử dụng chúng trong nhiều ngữ cảnh.
  2. Tính mô-đun: composition khuyến khích việc tạo ra các mô-đun nhỏ, độc lập, giúp dễ dàng kiểm tra và bảo trì mã.
  3. Tránh giới hạn của kế thừa: composition tránh các vấn đề liên quan đến sự phân cấp lớp sâu và kế thừa đa dạng.

Vấn đề của composition:

  1. Độ phức tạp trong việc thực hiện: composition có thể yêu cầu logic phức tạp hơn để kết hợp các chức năng.
  2. Dư thừa mã: trong một số trường hợp, composition có thể dẫn đến dư thừa mã khi cần rõ ràng kết hợp các phương thức và thuộc tính.

11.3 So sánh mixin và composition

Mixin:

  • Dễ sử dụng để thêm chức năng cho nhiều lớp
  • Có thể dẫn đến xung đột tên và cấu trúc không rõ ràng

Composition:

  • Linh hoạt và mô-đun hơn
  • Tránh các vấn đề liên quan đến kế thừa, nhưng có thể khó thực hiện và duy trì hơn
Bình luận
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION