Grundlegende Anleitung zur funktionalen Programmierung in JavaScript_Grundlagen

Einführung

JavaScript ist eine mächtige, aber dennoch missverstandene Programmiersprache. Manche Leute sagen gerne, dass es sich um eine objektorientierte Programmiersprache handelt oder dass es sich um eine funktionale Programmiersprache handelt. Andere sagen gerne, dass es sich nicht um eine objektorientierte Programmiersprache handelt oder dass es sich nicht um eine funktionale Programmiersprache handelt. Andere sind der Meinung, dass sie sowohl Merkmale einer objektorientierten als auch einer funktionalen Sprache aufweist oder dass sie weder objektorientiert noch funktional ist. Lassen Sie uns diese Argumente zunächst beiseite legen.

Nehmen wir an, dass wir eine gemeinsame Mission haben: Programme zu schreiben, die möglichst viele funktionale Programmierprinzipien im Rahmen der JavaScript-Sprache nutzen.

Zuerst müssen wir diese Missverständnisse über funktionale Programmierung in unseren Köpfen klären.

Funktionale Programmierung, die in der JS-Welt (schwerwiegend) missverstanden wird

Anscheinend gibt es einige Entwickler, die den ganzen Tag JavaScript in einem funktionalen Paradigma verwenden. Ich würde immer noch sagen, dass es eine größere Anzahl von JavaScript-Entwicklern gibt, die die wahre Bedeutung dieses Vorwands nicht wirklich verstehen.

Ich bin davon überzeugt, dass diese Situation dadurch verursacht wird, dass viele auf der Serverseite verwendete Webentwicklungssprachen von der C-Sprache abgeleitet sind und die C-Sprache offensichtlich keine funktionale Programmiersprache ist.

Es scheint zwei Ebenen der Verwirrung zu geben. Verwenden wir das folgende Beispiel, das häufig in jQuery verwendet wird, um die erste Ebene der Verwirrung zu veranschaulichen:

$(".signup").click(function(event){
  $("#signupModal").show();
  event.preventDefault();
});

Hey, schau genau hin. Als Parameter übergebe ich eine anonyme Funktion, die in der JavaScript-Welt als „CallBack“-Funktion bekannt ist.

Glaubt irgendjemand wirklich, dass es sich hierbei um funktionale Programmierung handelt? Gar nicht!

Dieses Beispiel zeigt ein Schlüsselmerkmal funktionaler Sprachen: Funktionen als Parameter. Andererseits widerspricht dieses dreizeilige Beispiel auch fast jedem anderen Paradigma der funktionalen Programmierung.

Die zweite Ebene des Chaos ist etwas subtiler. Nachdem sie dies gelesen haben, denken einige trendsuchende JS-Entwickler heimlich nach.

Okay, Mist! Aber ich weiß bereits alles über funktionale Programmierung. Ich verwende Underscore.js für alle meine Projekte.

Underscore.js ist eine beliebte JavaScript-Bibliothek, die überall verwendet wird. Ich habe beispielsweise eine Reihe von Wörtern und benötige eine Menge, bei der jedes Element in der Menge aus den ersten beiden Buchstaben jedes Wortes besteht. Dies mit Underscore.js zu implementieren ist ziemlich einfach:

var firstTwoLetters = function(words){
  return _.map(words,function(word){
    return _.first(word,2);
  });
};

Schau! Siehe JavaScript-Zauberkunst. Ich verwende diese erweiterten funktionalen Anwendungsfunktionen wie _.map und _.first. Gibt es noch etwas, was du sagen möchtest, Leland?

Obwohl Hervorhebungen und Funktionen wie _.map sehr wertvolle Teile des Funktionsparadigmas sind, erscheint mir die Art und Weise, wie der Code wie in diesem Beispiel organisiert ist, … ausführlich und zu schwer zu verstehen. Müssen wir das wirklich tun?

Wenn wir anfangen, etwas „funktionaler“ zu denken, können wir das obige Beispiel vielleicht wie folgt ändern:

// ...一点魔法
var firstTwoLetters = map(first(2));

Denken Sie sorgfältig darüber nach, eine Codezeile enthält die gleichen Informationen wie die fünf Codezeilen oben. Wörter und Wort sind nur Parameter/Platzhalter. Der Kern dieser Methode besteht darin, die Kartenfunktion, die erste Funktion und die Konstante 2 auf offensichtlichere Weise zu kombinieren.

Ist JavaScript eine funktionale Programmiersprache?

Es gibt keine Zauberformel, um festzustellen, ob eine Sprache eine „funktionale“ Sprache ist. Einige Sprachen sind eindeutig funktionsfähig, genauso wie andere Sprachen eindeutig nicht funktionsfähig sind, aber es gibt viele Sprachen, die irgendwo in der unklaren Mitte liegen.

Hier sind einige häufig verwendete und wichtige „Zutaten“ funktionaler Sprachen (JavaScript kann fettgedruckte Symbole verwenden)

• Funktionen sind „Bürger erster Klasse“
• Funktionen können Funktionen zurückgeben
• Unterstützt lexikalisch Schließungen
• Funktionen müssen „rein“ sein
• Zuverlässige Rekursion
• Kein Mutationsstatus

Dies ist keineswegs eine exklusive Liste, aber wir werden zumindest nacheinander die drei wichtigsten Funktionen von Javascript besprechen, die es uns ermöglichen, Programme auf funktionale Weise zu schreiben.

Schauen wir uns jeden einzelnen genauer an:

Funktionen sind „erstklassige Bürger“

Dies ist wahrscheinlich die offensichtlichste aller Zutaten und wahrscheinlich die häufigste in vielen modernen Programmiersprachen.

Lokale Variablen in JavaScript werden über das Schlüsselwort var definiert.

var foo = "bar";

Es ist sehr einfach, Funktionen als lokale Variablen in JavaScript zu definieren.

var add = function (a, b) { return a + b; };
var even = function (a) { return a % 2 === 0; };

Das sind alles Fakten, Variablen: Variable add und Variable stellen sogar eine Referenzbeziehung zur Funktionsdefinition her, indem ihnen ein Wert zugewiesen wird. Diese Referenzbeziehung kann bei Bedarf jederzeit geändert werden.

// capture the old version of the function
var old_even = even; 
 
// assign variable `even` to a new, different function
even = function (a) { return a & 1 === 0; };

Natürlich ist das nichts Besonderes. Aber die wichtige Eigenschaft, ein „Bürger erster Klasse“ zu sein, ermöglicht es uns, eine Funktion als Parameter an eine andere Funktion zu übergeben. Zum Beispiel:

var binaryCall = function (f, a, b) { return f(a, b); };

这是一个函数，他接受了一个二元函数f，和两个参数a，b，然后调用这个二元函数f，该二元函数f以a、b为输入参数。

add(1,2) === binaryCall(add, 1, 2); 
// true

这样做看起来有点笨拙，但是当把接下来的函数式编程“配料”合并考虑的时候，牛叉之处就显而易见了…

函数能返回函数（换个说法“高阶函数”）

事情开始变的酷起来。尽管开始比较简单。函数最终以新的函数作为返回值。举个例子：

var applyFirst = function (f, a) { 
 return function (b) { return f(a, b); };
};

这个函数（applyFirst）接受一个二元函数作为其中一个参数，可以把第一个参数（即二元函数）看作是这个applyFirst函数的“部分操作”，然后返回一个一元（一个参数）函数，该一元函数被调用的时候返回外部函数的第一个参数（f）的二元函数f(a, b)。返回两个参数的二元函数。

让我们再谈谈一些函数，例如mult(乘法)函数：

var mult = function(a, b) { return a * b; };

依循mult(乘法)函数的逻辑，我们可以写一个新的函数double(乘方)：

var double = applyFirst(mult, 2);
 
double(32); 
// 64
double(7.5); 
// 15

这就是偏函数，在FP中经常会用到。（译注：FP全名为 Functional Programming 函数式程序设计 ）

我们当然可以像applyFirst那样定义函数：

var curry2 = function (f) {
 return function (a) {
  return function (b) {
   return f(a, b);
  };
 };
};

现在，我想要一个double（乘方）函数，我们换种方式做：

var double = curry2(mult)(2);

这种方式被称作“函数柯里化”。有点类似partial application（偏函数应用），但是更强大一点。

准确的说，函数式编程之所以强大，大部分因于此。简单和易理解的函数成为我们构筑软件的基础构件。当拥有高水平的组织能力、很少重用的逻辑的时候，函数能够被组合和混合在一起用来表达出更复杂的行为。

高阶函数可以得到的乐趣更多。让我们看两个例子：

1.翻转二元函数参数顺序

// flip the argument order of a function
var flip = function (f) {
 return function (a, b) { return f(b, a); };
};
 
divide(10, 5) === flip(divide)(5, 10); 
// true

2.创建一个组合了其他函数的函数

// return a function that's the composition of two functions...
// compose (f, g)(x) -> f(g(x))
var compose = function (f1, f2) {
 return function (x) {
  return f1(f2(x));
 };
};
 
// abs(x) = Sqrt(x^2)
var abs = compose(sqrt, square);
 
abs(-2); 
// 2

这个例子创建了一个实用的函数，我们可以使用它来记录下每次函数调用。

var logWrapper = function (f) {
 return function (a) {
  console.log('calling "' + f.name + '" with argument "' + a);
  return f(a);
 };
};

var app_init = function(config) { 
/* ... */
 };
 
if(DEBUG) {
 
// log the init function if in debug mode
 app_init = logWrapper(app_init);
}
 
// logs to the console if in debug mode
app_init({
 
/* ... */
});

词法闭包+作用域

我深信理解如何有效利用闭包和作用域是成为一个伟大JavaScript开发者的关键。
那么…什么是闭包？

简单的说，闭包就是内部函数一直拥有父函数作用域的访问权限，即使父函数已经返回。61bc4fd3a408f9b7fe12fc5564f7379b
可能需要个例子。

var createCounter = function () {
 var count = 0;
 return function () {
  return ++count;
 };
};
 
var counter1 = createCounter();
 
counter1(); 
// 1
counter1(); 
// 2
 
var counter2 = createCounter();
 
counter2(); 
// 1
counter1(); 
// 3

一旦createCounter函数被调用，变量count就被分配一个新的内存区域。然后，返回一个函数，这个函数持有对变量count的引用，并且每次调用的时候执行count加1操作。

注意从createCounter函数的作用域之外，我们是没有办法直接操作count的值。Counter1和Counter2函数可以操作各自的count变量的副本，但是只有在这种非

常具体的方式操作count（自增1）才是被支持的。

在JavaScript，作用域的边界检查只在函数被声明的时候。逐个函数，并且仅仅逐个函数，拥有它们各自的作用域表。（注：在ECMAScript 6中不再是这样，因为let的引入）

一些进一步的例子来证明这论点：

// global scope
var scope = "global";
 
var foo = function(){
 
// inner scope 1
 var scope = "inner";
 var myscope = function(){
  
// inner scope 2
  return scope;
 };
 return myscope;
};
 
console.log(foo()()); 
// "inner"
 
console.log(scope); 
// "global"

关于作用域还有一些重要的事情需要考虑。例如，我们需要创建一个函数，接受一个数字（0-9），返回该数字相应的英文名称。

简单点，有人会这样写：

// global scope...
var names = ['zero','one','two','three','four','five','six','seven','eight','nine'];
var digit_name1 = function(n){
 return names[n];
};

但是缺点是，names定义在了全局作用域，可能会意外的被修改，这样可能致使digit_name1函数所返回的结果不正确。
那么，这样写：

var digit_name2 = function(n){
 var names = ['zero','one','two','three','four','five','six','seven','eight','nine'];
 return names[n];
};

这次把names数组定义成函数digit_name2局部变量.这个函数远离了意外风险，但是带来了性能损失，由于每次digit_name2被调用的时候，都将重新为names数组定义和分配空间。换个例子如果names是个非常大的数组，或者可能digit_name2函数在一个循环中被调用多次，这时候性能影响将非常明显。

// "An inner function enjoys that context even after the parent functions have returned."
var digit_name3 = (function(){
 var names = ['zero','one','two','three','four','five','six','seven','eight','nine'];
 return function(n){
  return names[n];
 };
})();

这时候我们面临第三个选择。这里我们实现立即调用的函数表达式，仅仅实例化names变量一次，然后返回digit_name3函数，在 IIFE (Immediately-Invoked-Function-Expression 立即执行表达式)的闭包函数持有names变量的引用。
这个方案兼具前两个的优点，回避了缺点。搞定！这是一个常用的模式用来创建一个不可被外部环境修改“private”（私有）状态。