Chuỗi phương pháp trong JavaScript

Phương thức Chaining, còn được gọi là Cascading, có nghĩa là gọi nhiều lần phương thức này đến phương thức khác trên một đối tượng, trong một dòng mã liên tục. Chúng ta hãy xem một ví dụ mà chuỗi phương thức có thể giúp chúng ta tránh lặp lại.

Ví dụ

Lấy ví dụ về chiếc xe hạng sau -

class Car {
   constructor() {
      this.wheels = 4
      this.doors = 4
      this.topSpeed = 100
      this.feulCapacity = "400 Litres"
   }
   setWheels(w) {
      this.wheels = w
   }
   setDoors(d) {
      this.doors = d
   }
   setTopSpeed(t) {
      this.topSpeed = t
   }
   setFeulCapacity(fc) {
      this.feulCapacity = fc
   }
   displayCarProps() {
      console.log(`Your car has ${this.wheels} wheels,\
      ${this.doors} doors with a top speed of ${this.topSpeed}\
      and feul capacity of ${this.feulCapacity}`)
   }
}
let sportsCar = new Car();
sportsCar.setDoors(2)
sportsCar.setTopSpeed(250)
sportsCar.setFeulCapacity("600 Litres")
sportsCar.displayCarProps()

Đầu ra

Your car has 4 wheels,2 doors with a top speed of 250and feul capacity of 600 Litres 

Xem có bao nhiêu lần sportsCar bị lặp lại một cách không cần thiết? Chúng ta có thể loại bỏ nó bằng cách sử dụng phương pháp chuỗi. Để làm như vậy, thay vì để cho người đặt chỉ thiết lập giá trị, hãy trả lại giá trị này ở cuối. Điều này sẽ cho phép chúng tôi thực hiện các hoạt động trên đối tượng. Sau khi thực hiện thay đổi này, mã của chúng tôi trông giống như -

class Car {
   constructor() {
      this.wheels = 4
      this.doors = 4
      this.topSpeed = 100
      this.feulCapacity = "400 Litres"
   }
   setWheels(w) {
      this.wheels = w;
      return this;
   }
   setDoors(d) {
      this.doors = d;
      return this;
   }
   setTopSpeed(t) {
      this.topSpeed = t;
      return this;
   }
   setFeulCapacity(fc) {
      this.feulCapacity = fc;
      return this;
   }
   displayCarProps() {
      console.log(`Your car has ${this.wheels} wheels,\
      ${this.doors} doors with a top speed of ${this.topSpeed}\
      and feul capacity of ${this.feulCapacity}`)
   }
}

Bây giờ chúng ta có thể thay đổi phần mà chúng ta tạo đối tượng xe hơi bằng mã dễ đọc hơn và ít lặp lại hơn -

Ví dụ

let sportsCar = new Car()
   .setDoors(2)
   .setTopSpeed(250)
   .setFeulCapacity("600 Litres")
   .displayCarProps()

Đầu ra

Your car has 4 wheels,2 doors with a top speed of 250and feul capacity of 600 Litres 

Chuỗi phương thức còn được gọi là giao diện thông thạo vì nó cho phép hoạt động trên đối tượng thông qua các phương thức mà không phá vỡ luồng lặp đi lặp lại bằng cách lặp lại đối tượng.