JavaScript方法链（Method Chaining）详解与实现

方法链概述

在探索JavaScript API设计时，方法链（Method Chaining）是一个引人注目且强大的概念，它并非新鲜事物，而是开发者日常设计中常见的模式。

JavaScript Method Chaining

关于这一概念，维基百科给出了明确定义：

Method chaining, also known as named parameter idiom, is a common syntax for invoking multiple method calls in object-oriented programming languages. Each method returns an object, allowing the calls to be chained together in a single statement.Chaining is syntactic sugar which eliminates the need for intermediate variables. A method chain is also known as a train wreck due to the increase in the number of methods that come one after another in the same line that occurs as more methods are chained togethe even though line breaks are often added between methods.

将其翻译为中文如下：

方法链，也被称为命名参数法，是在面向对象的编程语言调用的调用多个方法的通用语法。每一个方法返回一个对象，允许电话连接到一起，在一个单一的声明。链接是语法糖，省去了中间变量的需要。方法链也被称为火车残骸中由于方法来相继发生的同一行以上的方法都锁在即使换行通常添加方法间的数量增加。

jQuery中的应用

Method Chaining 使用

观察实际应用，方法链最广泛的场景莫过于jQuery库。

// chaining
$("#person").slideDown('slow')
.addClass('grouped')
.css('margin-left', '11px');

这种用法允许我们连续调用多个方法。jQuery高度依赖链式调用，这使得对同一选择器执行多个操作变得极其简便。同时，链式写法使代码更加清晰，并避免了重复执行相同的选择器操作，从而提升了性能。若不使用方法链，代码将呈现如下形式：

var p = $('#person');
p.slideDown('slow');
p.addClass('grouped');
p.css('margin-left', '11px');

这种模式在设计模式中类似于Builder模式，但区别在于此处p是方法而非一个类。

JavaScript实现示例

Javascript 方法链示例

在前文讨论JavaScript高阶函数时，曾提及print('Hello')('World')这种用法，其结果可能表现为嵌套函数的调用形式。

function f(i){
return function(e){
i+=e;
return function(e){
i+=e;
return function(e){
alert(i+e);
      };
    };
  };
};
f(1)(2)(3)(4); //10

这是网络上的一个示例，也是我之前编写链式调用的方式。这种写法显得较为简陋。

var func = (function() {
return{
add: function () {
console.log('1');
return{
result: function () {
console.log('2');
                }
            }
        }
    }
})();
func.add().result();

实际上，正确的做法是在每个函数中返回this，从而实现真正的链式调用：

Func = (function() {
this.add = function(){
console.log('1');
return this;
    };
this.result = function(){
console.log('2');
return this;
    };
return this;
});
var func = new Func();
func.add().result();

当然，我们也可以将最后两行代码：

var func = new Func();
func.add().result();

简化为：

new Func().add().result();

其他

最后，作为一个容易混淆点的对比：

方法链与原型链对比

Method Chaining VS prototype Chaining

原型链与方法链在某些方面相似，主要区别在于：

1.原型链是需要用原型 2.方法链则是用方法