[翻译]函数式 JavaScript 简介

by yiz96 11. 3 月 2016 JavaScript 0

本文由伯乐在线 – Delostik 翻译，武佳斌校稿。未经许可，禁止转载！
英文出处：M. David Green。欢迎加入翻译组。
伯乐在线地址：http://web.jobbole.com/85266/

你肯定听说过JavaScript是一个函数式语言，或者至少知道他支持函数式编程。但是究竟什么是函数式编程？对于这个问题，相比较通用的编程范式，函数式的实现跟我们平时写的JavaScript又有什么不同？

好消息是在编程范式方面JavaScript没有那么讲究，你可以混入命令式（Imperative Programming）、面向对象、原型和函数式代码等等，只要你觉得合适，都能得到一样的结果。但是坏消息也因它而起，JavaScript在同样的代码库下同时提供了众多编程风格，所以你需要根据代码的可维护性、可读性和性能选择合适的编程方式。

函数式JavaScript并不是一定要用于整个项目中来体现它的价值。学习一点函数式的方法可以在我们构建项目时提供一些参考和帮助，而不论我们喜欢哪种方式。学习一些函数式模式和技术可以帮助我们写出更整洁、优雅的JavaScript代码，不论我们是不是真的用它。

var result;
function getText() {
  var someText = prompt("Give me something to capitalize");
  capWords(someText);
  alert(result.join(" "));
};
function capWords(input) {
  var counter;
  var inputArray = input.split(" ");
  var transformed = "";
  result = [];
  for (counter = 0; counter &lt; inputArray.length; counter++) {
    transformed = [
      inputArray[counter].charAt(0).toUpperCase(), 
      inputArray[counter].substring(1)
    ].join("");
    result.push(transformed);
  }
};
document.getElementById("main_button").onclick = getText;

var result;

function getText() {

var someText = prompt("Give me something to capitalize");

capWords(someText);

alert(result.join(" "));

};

function capWords(input) {

var counter;

var inputArray = input.split(" ");

var transformed = "";

result = [];

for (counter = 0; counter < inputArray.length; counter++) {

transformed = [

inputArray[counter].charAt(0).toUpperCase(),

inputArray[counter].substring(1)

].join("");

result.push(transformed);

}

};

document.getElementById("main_button").onclick = getText;

这一小段代码中做了很多事：定义了一个全局变量；字符串值被传来传去，并被函数修改；还夹杂着原生JavaScript的DOM方法。函数名不是很有描述力，一定程度上因为这一切都依赖于不确定存在或不存在的上下文。但是如果你碰巧在浏览器执行了这段代码，而且网页中定义了一个<button id="main_button">，你会收到可输入文本的对话框提示，会看到那串被首字母大写了的文本。

像这种命令式代码会从顶部开始执行（如果不考虑variable hoisting的情况）。但是我们仍然可以利用JavaScript的面向对象能力来提高代码的可读性和整洁度。

面向对象的JavaScript

几年后，开发者开始注意到像浏览器这样的共享环境下的命令式编程的问题。一段JavaScript代码中定义的全局变量可能会破坏另一个全局变量。代码执行的顺序和效果无法预测，尤其在网络延迟和渲染时间的影响下。

后来出现了一些好办法来封装JS代码，让它能更好地跟DOM工作。比如下面这段代码是前面代码的一种改写，使用了面向对象的方法：

(function() {
  "use strict";
  var SomeText = function(text) {
    this.text = text;
  };
  SomeText.prototype.capify = function(str) {
    var firstLetter = str.charAt(0);
    var remainder = str.substring(1);
    return [firstLetter.toUpperCase(), remainder].join("");
  };
  SomeText.prototype.capifyWords = function() {
    var result = [];
    var textArray = this.text.split(" ");
    for (var counter = 0; counter &lt; textArray.length; counter++) {
      result.push(this.capify(textArray[counter]));
    }
    return result.join(" ");
  };
 
  document.getElementById("main_button").addEventListener("click", function(e) {
    var something = prompt("Give me something to capitalize");
    var newText = new SomeText(something);
    alert(newText.capifyWords());
  });
}());

(function() {

"use strict";

var