การโยงวิธีการใน JavaScript

Chaining Methods หรือที่รู้จักในชื่อ Cascading หมายถึงการเรียกใช้เมธอดหนึ่งบนอ็อบเจ็กต์ซ้ำๆ ในบรรทัดเดียวของโค้ดต่อเนื่องกัน ให้เรามาดูตัวอย่างที่ method chaining สามารถช่วยเราหลีกเลี่ยงการทำซ้ำได้

ตัวอย่าง

ยกตัวอย่างรถคลาสต่อไปนี้ -

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()

ผลลัพธ์

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

ดูกี่ครั้ง sportsCar ซ้ำโดยไม่จำเป็น? เราสามารถกำจัดมันได้โดยใช้วิธีการผูกมัด ในการทำเช่นนั้น แทนที่จะปล่อยให้ตัวตั้งค่าเพียงแค่ตั้งค่า ให้คืนค่าที่ส่วนท้าย ซึ่งจะทำให้เราสามารถดำเนินการกับวัตถุได้ หลังจากทำการเปลี่ยนแปลงนี้ รหัสของเราดูเหมือน -

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}`)
   }
}

ตอนนี้ เราสามารถเปลี่ยนแปลงส่วนที่เราสร้างวัตถุรถด้วยโค้ดที่อ่านง่ายและไม่ซ้ำกัน −

ตัวอย่าง

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

ผลลัพธ์

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

การโยงเมธอดเรียกอีกอย่างว่าอินเทอร์เฟซที่คล่องแคล่ว เนื่องจากช่วยให้ทำงานกับวัตถุผ่านเมธอดโดยไม่ทำให้โฟลว์เสียหายซ้ำแล้วซ้ำเล่าโดยทำซ้ำอ็อบเจ็กต์