Function Chaining (Chuỗi hàm) trong JavaScript là gì?

Function Chaining là kỹ thuật gọi nhiều phương thức liên tiếp trên cùng một đối tượng trong một dòng code, nhờ mỗi phương thức trả về this (chính đối tượng đó). Điều này giúp code ngắn gọn, dễ đọc và hiệu suất tốt hơn.

Không có Function Chaining

Nếu các phương thức không trả về this, chuỗi gọi sẽ bị ngắt và trả về undefined.

Ví dụ

<script>
  var Calculator = function() {
    this.value = 0;
    this.add = function(n) { this.value += n; };
    this.subtract = function(n) { this.value -= n; };
    this.print = function() { document.write(this.value + '<br>'); };
  };

  var calc = new Calculator();
  calc.add(5);
  calc.subtract(2);
  calc.print(); // 3

  // Thử chaining — sẽ lỗi vì add/subtract không return this
  calc.add(5).subtract(2).print(); // TypeError: Cannot read property 'subtract' of undefined
</script>

Có Function Chaining (trả về this)

Thêm return this; vào các phương thức muốn chuỗi.

Ví dụ

<script>
  var Calculator = function() {
    this.value = 0;
    this.add = function(n) { this.value += n; return this; };
    this.subtract = function(n) { this.value -= n; return this; };
    this.print = function() { document.write(this.value + '<br>'); return this; };
  };

  var calc = new Calculator();
  calc.add(5).subtract(2).print(); // 3 — hoạt động mượt mà
</script>

Kết quả

3

Ứng dụng thực tế

Thư viện phổ biến như jQuery, Lodash, Moment.js đều sử dụng pattern này:

$('#myDiv').addClass('active').fadeIn().css('color', 'red');

Lợi ích

• Code súc tích, giảm biến trung gian.
• Dễ đọc: luồng xử lý thể hiện rõ ràng từ trái sang phải.
• Hiệu suất: tránh tạo closure hoặc function wrapper không cần thiết.

Lưu ý

Chỉ trả về this cho các phương thức mutator (thay đổi state). Phương thức accessor (trả về giá trị) nên trả về kết quả thay vì this.