【译】JavaScript 中的“纯函数”

发表于 5年以前 | 总阅读数：1579 次

原文链接：http://www.nicoespeon.com/en/2015/01/pure-functions-javascript/

推荐国内最好的在线翻译平台众成翻译

什么是"纯函数"

纯函数是指不依赖于且不改变它作用域之外的变量状态的函数。

也就是说，纯函数的返回值只由它调用时的参数决定，它的执行不依赖于系统的状态（比如：何时、何处调用它----译者注）。

纯函数是函数式编程的一个基础。

来看一些例子：

var values = { a: 1 };

    function impureFunction ( items ) {
      var b = 1;

      items.a = items.a * b + 2;

      return items.a;
    }

    var c = impureFunction( values );
    // 现在 `values.a` 变成 3,  impureFunction 改变了它。

在上面的代码中，我们改变了参数对象中的一个属性。由于我们定义的函数改变的对象在我们的函数作用域之外，导致这个函数成为"不纯"的函数。

var values = { a: 1 };

    function pureFunction ( a ) {
      var b = 1;

      a = a * b + 2;

      return a;
    }

    var c = pureFunction( values.a );
    // `values.a` 没有被改变, 它的值仍然是 1

上面的代码，我们只计算了作用域内的局部变量，没有任何作用域外部的变量被改变，因此这个函数是"纯函数"。

var values = { a: 1 };
    var b = 1;

    function impureFunction ( a ) {
      a = a * b + 2;

      return a;
    }

    var c = impureFunction( values.a );
    // 实际上,  `c` 的值依赖于外部变量 `b`.
    // 你可能容易忽略这种情况，外部变量的变化也可能会导致函数出现不确定结果。

上面的代码里，b 不在作用域中，函数执行结果依赖于上下文环境，因此函数也是"不纯"的。

var values = { a: 1 };
    var b = 1;

    function pureFunction ( a, c ) {
      a = a * c + 2;

      return a;
    }

    var c = pureFunction( values.a, b );
    // 这样从定义上明确 `c` 依赖于参数 `b`，避免函数不确定结果。

上面这样改就成了"纯函数"。

具体应用

考虑以下代码:

var getMinQuantity = function getMinQuantity ( name ) {
      // 一个纯函数根据传入的名字返回对应的数量

我们看一下在一个实际项目中的代码例子：

var popover = {

      // A bunch of code…

      addQuantityText: function ( quantity ) {
        var quantityTextOptions = {
          namespace: "quantity",
          initialChildIndex: 2,
          quantity: quantity
        };

        try {
          this.formatQuantityText( quantityTextOptions );
        } catch ( err ) {
          console.log( "Couldn\"t add quantity text!" );
        }
      },

      formatQuantityText: function ( options ) {
        if ( !this.$$boxContainer ) {
          throw new Error( "$$boxContainer is not configured" );
        }

        var namespace = options.namespace || "quantity";
        var quantity = options.quantity || 0;
        var initialChildIndex = options.initialChildIndex || 0;

        var $$quantity = new Canvas(); // implementation details hidden
        $$quantity.name = namespace;
        $$quantity.value = quantity;
        this.setQuantityTextColor( $$quantity );

        this.$$boxContainer.addChild( $$quantity, initialChildIndex );

        return $$quantity;
      },

      setQuantityTextColor: function ( $$quantity ) {
        if ( !$$quantity ) return;

        var minQuantity = getMinQuantity( $$quantity.name );
        var quantity = $$quantity.value || minQuantity;
        var hasEnoughQuantity = (quantity >= minQuantity);

        $$quantity.color = (hasEnoughQuantity) ? "green" : "red";
      },

      // A bunch of code…

    };

上面的这三个函数 addQuantityText(), formatQuantityText() 以及 setQuantityTextColor() 都不是纯函数。

我们使用 addQuantityText() 在 $$boxContainer 容器里展示数量。这个方法是个操作入口，其中做一些细节的操作。当$$quantity出错的时候，你需要在这一整坨代码里面里面查错，有时候这复杂得像是在寻宝 ---- 当然这不是令人心情愉快寻宝游戏。

这种代码组织方式往往意味着长期维护会很麻烦。

当问题变得复杂

在这个例子里，函数内执行次序变得重要。

仅仅交换2行代码，程序就会出错。这看起来很显然，但是它确实不好调试。

var popover = {

      // A bunch of code…

      addQuantityText: function ( quantity ) {
        var quantityTextOptions = {
          namespace: "quantity",
          initialChildIndex: 2,
          quantity: quantity
        };

        try {
          this.formatQuantityText( quantityTextOptions );
        } catch ( err ) {
          console.log( "Couldn\"t add quantity text!" );
        }
      },

      formatQuantityText: function ( options ) {
        if ( !this.$$boxContainer ) {
          throw new Error( "$$boxContainer is not configured" );
        }

        var namespace = options.namespace || "quantity";
        var quantity = options.quantity || 0;
        var initialChildIndex = options.initialChildIndex || 0;

        var $$quantity = new Canvas(); // implementation details hidden

        //this.setQuantityTextColor 提前写了，造成错误
        this.setQuantityTextColor( $$quantity );
        $$quantity.name = namespace;
        $$quantity.value = quantity;

        this.$boxContainer.addChild( $$quantity, initialChildIndex );

        return $$quantity;
      },

      setQuantityTextColor: function ( $$quantity ) {
        if ( !$$quantity ) return;

        var minQuantity = getMinQuantity( $$quantity.name );
        var quantity = $$quantity.value || minQuantity;
        var hasEnoughQuantity = (quantity >= minQuantity);

        $$quantity.color = (hasEnoughQuantity) ? "green" : "red";
      },

      // A bunch of code…

    };

上面的代码产生了错误，问题是这个错误有时候还比较难被发现。

setQuantityTextColor() 本应该只负责处理 $$quantity 的颜色，但你却需要从头阅读三个函数的每一行代码去判断究竟哪些操作改变了object中的属性值，然后重新梳理整个代码流程去弄明白其中的哪一步出错了。

在这个时候，你甚至会后悔将 formatQuantityText() 分解为了更细粒度的方法来简化每个方法的具体实现细节。

总而言之，在你调试的时候，你需要检查许多代码。如果你开始思考将一个大方法拆分成若干小方法为什么反而让调试变得困难，那么纯函数概念就变得对你非常有意义。

使用纯函数思想解决问题

我们尽量使用纯函数来改写我们的代码：

var popover = {

      // A bunch of code…

      // 所以对系统状态改变的操作都封装在这个方法里
      // 插入 DOM 元素只由单一函数来负责，限制副作用
      // 这使得 debug 变得简单
      addQuantityText: function ( quantity ) {
        if ( !this.$$boxContainer ) {
          throw new Error( "$$boxContainer is not configured" );
        }

        var quantityTextOptions = {
          namespace: "quantity",
          quantity: quantity
        };
        var $$quantity = this.formatQuantityText( quantityTextOptions );

        this.$$boxContainer.addChild( $$quantity, 2 );
      },

      // 这个方法没有副作用，它仅调用另一个纯函数。
      // 它创建和返回所需要的、正确配置的 canvas 对象
      formatQuantityText: function ( options ) {
        var namespace = options.namespace || "quantity";
        var quantity = options.quantity || 0;

        var $$quantity = new Canvas(); // implementation details hidden
        $$quantity.name = namespace;
        $$quantity.value = quantity;
        $$quantity.color = this.getQuantityTextColor( quantity, namespace );

        return $$quantity;
      },

      // 这个函数也没有副作用，它根据参数 quantity 返回对应的颜色值
      getQuantityTextColor: function ( quantity, namespace ) {
        var minQuantity = getMinQuantity( namespace );
        var hasEnoughQuantity = (quantity && quantity >= minQuantity);

        return (hasEnoughQuantity) ? "green" : "red";
      },

      // A bunch of code…

    };

从设计上来讲，上面的代码并没有根本性的变化，然而，这样改写带来了显而易见的好处。

我们做了什么？

我们用 getQuantityTextColor() 代替了 setQuantityTextColor()
这个方法根据 quantity 返回一个颜色值，而不是之前那样直接改变 object 属性
方法不依赖于它们作用域之外的变量
方法只调用纯函数方法
我们将$$quantity对象的创建和修改DOM分开来了
我们将对系统状态的改变统一封装到 addQuantityText() 内部

通过上面的步骤，我们移除了带有副作用的方法，从而简化了代码维护的工作量。如果$$quantity发生错误，我们只需要检查一个函数。

简化接口

我们之前的的两个方法是public的，更完美的做法是将它们改成private的。

事实上，做这个优化和我们的API无关，它们存在只是为了简化接口。如果你对这不理解，可以先阅读我之前写得这篇文章。

由于它们已经是纯函数，将它们提出来简直易如反掌，因为它们的输出不依赖任何外部环境，只由参数决定：

function getQuantityTextColor ( quantity, namespace ) {
      var minQuantity = getMinQuantity( namespace );
      var hasEnoughQuantity = (quantity && quantity >= minQuantity);

      return (hasEnoughQuantity) ? "green" : "red";
    };

    function formatQuantityText ( options ) {
      var namespace = options.namespace || "quantity";
      var quantity = options.quantity || 0;

      var $$quantity = new Canvas(); // implementation details hidden
      $$quantity.name = namespace;
      $$quantity.value = quantity;
      $$quantity.color = getQuantityTextColor( quantity, namespace );

      return $$quantity;
    };

简化后的接口代码：

var popover = {

      // A bunch of code…

      addQuantityText: function ( quantity ) {
        if ( !this.$$boxContainer ) {
          throw new Error( "$$boxContainer is not configured" );
        }

        var quantityTextOptions = {
          namespace: "quantity",
          quantity: quantity
        };
        var $$quantity = formatQuantityText( quantityTextOptions );

        this.$$boxContainer.addChild( $$quantity, 2 );
      },

      // A bunch of code…

    };