Perbincangan mendalam tentang kemahiran pengaturcaraan_javascript berfungsi javascript

有时，优雅的实现是一个函数。不是方法。不是类。不是框架。只是函数。 
                      - John Carmack，游戏《毁灭战士》首席程序员

Pengaturcaraan fungsian adalah tentang memecahkan masalah kepada satu siri fungsi. Lazimnya, fungsi dirantai bersama, bersarang di antara satu sama lain, dihantar ke sana ke mari, dan dianggap sebagai warga kelas pertama. Jika anda telah menggunakan rangka kerja seperti jQuery atau Node.js, anda mungkin telah menggunakan beberapa teknik ini tanpa disedari.

Kita mulakan dengan sedikit memalukan Javascript.

Andaikan kita memerlukan senarai nilai yang akan diberikan kepada objek biasa. Objek ini mungkin mengandungi apa-apa sahaja: data, objek HTML, dsb.

var
  obj1 = {value: 1},
  obj2 = {value: 2},
  obj3 = {value: 3};
var values = [];
function accumulate(obj) {
 values.push(obj.value);
}
accumulate(obj1);
accumulate(obj2);
console.log(values); // Output: [obj1.value, obj2.value]

Kod ini berfungsi tetapi tidak stabil. Mana-mana kod boleh menukar objek nilai tanpa melepasi fungsi accumulate(). Dan jika kita terlupa untuk menetapkan tatasusunan kosong [] kepada nilai, kod ini tidak akan berfungsi sama sekali.

Tetapi jika pembolehubah diisytiharkan di dalam fungsi, ia tidak akan diubah oleh sebarang kod nakal.

function accumulate2(obj) {
 var values = [];
 values.push(obj.value);
 return values;
}
console.log(accumulate2(obj1)); // Returns: [obj1.value]
console.log(accumulate2(obj2)); // Returns: [obj2.value]
console.log(accumulate2(obj3)); // Returns: [obj3.value]

Tidak boleh! Hanya nilai objek terakhir yang dihantar masuk dikembalikan.

Kami mungkin dapat menyelesaikan masalah ini dengan meletakkan fungsi di dalam fungsi pertama.

var ValueAccumulator = function(obj) {
 var values = []
 var accumulate = function() {
  values.push(obj.value);
 };
 accumulate();
 return values;
};

Tetapi masalahnya masih wujud, dan kini kami tidak boleh mengakses pembolehubah fungsi dan nilai terkumpul.

Apa yang kita perlukan ialah fungsi panggilan kendiri

Fungsi panggilan sendiri dan penutupan

Bagaimana jika kita boleh mengembalikan ungkapan fungsi yang seterusnya mengembalikan tatasusunan nilai? Pembolehubah yang diisytiharkan dalam fungsi boleh diakses oleh semua kod dalam fungsi, termasuk fungsi panggilan sendiri.

Dengan menggunakan fungsi panggilan sendiri, rasa malu sebelum ini hilang.

var ValueAccumulator = function() {
 var values = [];
 var accumulate = function(obj) {
  if (obj) {
   values.push(obj.value);
   return values;
  } else {
   return values;
  }
 };
 return accumulate;
};
//This allows us to do this:
var accumulator = ValueAccumulator();
accumulator(obj1);
accumulator(obj2);
console.log(accumulator());
// Output: [obj1.value, obj2.value]
ValueAccumulator = ->
 values = []
 (obj) ->
  values.push obj.value if obj
  values

Ini semua tentang skop. Nilai pembolehubah boleh dilihat dalam fungsi dalaman accumulate(), walaupun apabila kod luaran memanggil fungsi ini. Ini dipanggil penutupan.

Penutupan dalam Javascript bermakna fungsi itu boleh mengakses skop induk, walaupun jika fungsi induk telah menyelesaikan pelaksanaan.

Penutupan ialah ciri semua bahasa berfungsi. Bahasa imperatif tradisional tidak mempunyai penutupan.

Fungsi tertib lebih tinggi

Fungsi panggilan kendiri sebenarnya adalah satu bentuk fungsi tertib lebih tinggi. Fungsi tertib tinggi ialah fungsi yang mengambil fungsi lain sebagai input atau mengembalikan fungsi sebagai output.

Fungsi tertib tinggi tidak biasa dalam pengaturcaraan tradisional. Walaupun pengaturcara imperatif menggunakan gelung untuk mengulang tatasusunan, pengaturcara berfungsi menggunakan pendekatan yang sama sekali berbeza. Dengan fungsi tertib lebih tinggi, setiap elemen dalam tatasusunan boleh digunakan pada fungsi dan mengembalikan tatasusunan baharu.

Ini adalah idea utama pengaturcaraan berfungsi. Fungsi tertib tinggi mempunyai keupayaan untuk menghantar logik kepada fungsi seperti objek.

Dalam Javascript, fungsi dianggap sebagai warga kelas pertama, sama seperti fungsi klasik seperti Skim dan Haskell ialah bahasa. Ini mungkin kedengaran agak pelik, tetapi maksud sebenarnya ialah fungsi dianggap sebagai jenis primitif, sama seperti nombor dan objek. Jika nombor dan objek boleh dihantar ke sana ke mari, maka begitu juga dengan fungsi.

Datang dan lihat sendiri. Sekarang gunakan fungsi ValueAccumulator() dalam bahagian sebelumnya dengan fungsi tertib lebih tinggi:
// Gunakan forEach() untuk lelaran melalui tatasusunan dan panggil fungsi panggil balik accumulator2
untuk setiap elemen var accumulator2 = ValueAccumulator();
var objects = [obj1, obj2, obj3]; // Tatasusunan ini boleh menjadi sangat besar
objects.forEach(accumulator2);
console.log(accumulator2());

Fungsi tulen

Hasil pengiraan yang dikembalikan oleh fungsi tulen hanya berkaitan dengan parameter yang dihantar masuk. Pembolehubah luaran dan keadaan global tidak akan digunakan di sini, dan tidak akan ada kesan sampingan. Dalam erti kata lain, pembolehubah yang dihantar sebagai input tidak boleh diubah. Oleh itu, hanya nilai yang dikembalikan oleh fungsi tulen boleh digunakan dalam program.

Gunakan fungsi matematik untuk memberikan contoh mudah. Math.sqrt(4) akan sentiasa mengembalikan 2, tidak menggunakan sebarang maklumat tersembunyi seperti tetapan atau keadaan, dan tidak menyebabkan sebarang kesan sampingan.

Fungsi tulen ialah tafsiran sebenar "fungsi" matematik iaitu hubungan antara input dan output. Idea mereka ringkas dan mudah digunakan semula. Oleh kerana fungsi tulen adalah serba lengkap, ia lebih sesuai untuk digunakan berulang kali.

Contoh untuk membandingkan fungsi tidak tulen dan fungsi tulen.

// 把信息打印到屏幕中央的函数
var printCenter = function(str) {
 var elem = document.createElement("div");
 elem.textContent = str;
 elem.style.position = 'absolute';
 elem.style.top = window.innerHeight / 2 + "px";
 elem.style.left = window.innerWidth / 2 + "px";
 document.body.appendChild(elem);
};
printCenter('hello world');
// 纯函数完成相同的事情
var printSomewhere = function(str, height, width) {
 var elem = document.createElement("div");
 elem.textContent = str;
 elem.style.position = 'absolute';
 elem.style.top = height;
 elem.style.left = width;
 return elem;
};
document.body.appendChild(
printSomewhere('hello world',
window.innerHeight / 2) + 10 + "px",
window.innerWidth / 2) + 10 + "px"));

Fungsi yang tidak betul bergantung pada keadaan objek tetingkap untuk mengira lebar dan ketinggian, manakala fungsi tulen yang serba lengkap memerlukan nilai ini dihantar sebagai parameter. Malah, ia membolehkan maklumat dicetak di mana-mana, yang menjadikan fungsi ini lebih serba boleh.

Fungsi tidak tulen kelihatan seperti pilihan yang lebih mudah kerana ia secara dalaman melaksanakan menambahkan elemen dan bukannya mengembalikan elemen. Fungsi tulen printSomewhere() yang mengembalikan nilai akan berprestasi lebih baik apabila digabungkan dengan teknik pengaturcaraan berfungsi yang lain.

var messages = ['Hi', 'Hello', 'Sup', 'Hey', 'Hola'];
messages.map(function(s, i) {
 return printSomewhere(s, 100 * i * 10, 100 * i * 10);
}).forEach(function(element) {
 document.body.appendChild(element);
});

当一个函数是纯的，也就是不依赖于状态和环境，我们就不用管它实际是什么时候被计算出来。 后面的惰性求值将讲到这个。

匿名函数

把函数作为头等对象的另一个好处是匿名函数。

就像名字暗示的那样，匿名函数就是没有名字的函数。实际不止这些。它允许了在现场定义临时逻辑的能力。 通常这带来的好处就是方便：如果一个函数只用一次，没有必要给它浪费一个变量名。

下面是一些匿名函数的例子：

// 写匿名函数的标准方式
function() {
 return "hello world"
};

// 匿名函数可以赋值给变量
var anon = function(x, y) {
 return x + y
};

// 匿名函数用于代替具名回调函数，这是匿名函数的一个更常见的用处
setInterval(function() {
 console.log(new Date().getTime())
}, 1000);
// Output: 1413249010672, 1413249010673, 1413249010674, ...

// 如果没有把它包含在一个匿名函数中，他将立刻被执行，
// 并且返回一个undefined作为回调函数：
setInterval(console.log(new Date().getTime()), 1000)
// Output: 1413249010671

下面是匿名函数和高阶函数配合使用的例子

function powersOf(x) {
 return function(y) {
  // this is an anonymous function!
  return Math.pow(x, y);
 };
}
powerOfTwo = powersOf(2);
console.log(powerOfTwo(1)); // 2
console.log(powerOfTwo(2)); // 4
console.log(powerOfTwo(3)); // 8
powerOfThree = powersOf(3);
console.log(powerOfThree(3)); // 9
console.log(powerOfThree(10)); // 59049

这里返回的那个函数不需要命名，它可以在powersOf()函数外的任何地方使用，这就是匿名函数。

还记得累加器的那个函数吗？它可以用匿名函数重写

var
 obj1 = { value: 1 },
 obj2 = { value: 2 },
 obj3 = { value: 3 };
 
var values = (function() {
 // 匿名函数
 var values = [];
 return function(obj) {
  // 有一个匿名函数！
  if (obj) {
   values.push(obj.value);
   return values;
  } else {
   return values;
  }
 }
})(); // 让它自执行
console.log(values(obj1)); // Returns: [obj.value]
console.log(values(obj2)); // Returns: [obj.value, obj2.value]
obj1 = { value: 1 }
obj2 = { value: 2 }
obj3 = { value: 3 }

values = do ->
 valueList = []
 (obj) ->
  valueList.push obj.value if obj
  valueList
console.log(values(obj1)); # Returns: [obj.value]
console.log(values(obj2)); # Returns: [obj.value, obj2.value]

真棒！一个高阶匿名纯函数。我们怎么这么幸运？实际上还不止这些，这里面还有个自执行的结构， (function(){...})();。函数后面跟的那个括号可以让函数立即执行。在上面的例子里， 给外面values赋的值是函数执行的结果。

匿名函数不仅仅是语法糖，他们是lambda演算的化身。请听我说下去…… lambda演算早在计算机和计算机语言被发明的很久以前就出现了。它只是个研究函数的数学概念。 非同寻常的是，尽管它只定义了三种表达式：变量引用，函数调用和匿名函数，但它被发现是图灵完整的。 如今，lambda演算处于所有函数式语言的核心，包括javascript。
 由于这个原因，匿名函数往往被称作lambda表达式。

匿名函数也有一个缺点，那就是他们在调用栈中难以被识别，这会对调试造成一些困难。要小心使用匿名函数。

方法链

在Javascript中，把方法链在一起很常见。如果你使用过jQuery，你应该用过这种技巧。它有时也被叫做“建造者模式”。

这种技术用于简化多个函数依次应用于一个对象的代码。

// 每个函数占用一行来调用，不如……
arr = [1, 2, 3, 4];
arr1 = arr.reverse();
arr2 = arr1.concat([5, 6]);
arr3 = arr2.map(Math.sqrt);

// ……把它们串到一起放在一行里面
console.log([1, 2, 3, 4].reverse().concat([5, 6]).map(Math.sqrt));
// 括号也许可以说明是怎么回事
console.log(((([1, 2, 3, 4]).reverse()).concat([5, 6])).map(Math.sqrt));

这只有在函数是目标对象所拥有的方法时才有效。如果你要创建自己的函数，比如要把两个数组zip到一起， 你必须把它声明为Array.prototype对象的成员.看一下下面的代码片段：
Array.prototype.zip = function(arr2) {
  // ...
}

这样我们就可以写成下面的样子
arr.zip([11,12,13,14).map(function(n){return n*2});
// Output: 2, 22, 4, 24, 6, 26, 8, 28

递归

递归应该是最著名的函数式编程技术。就是一个函数调用它自己。

当函数调用自己，有时奇怪的事情就发生了。它的表现即是一个循环，多次执行同样的代码，也是一个函数栈。

使用递归函数时必须十分小心地避免无限循环（这里应该说是无限递归）。就像循环一样，必须有个停止条件。 这叫做基准情形（base case）。

下面有个例子

var foo = function(n) {
 if (n < 0) {
  // 基准情形
  return 'hello';
 } else {
  // 递归情形
  return foo(n - 1);
 }
}
console.log(foo(5));

译注：原文中的代码有误，递归情形的函数调用缺少return，导致函数执行得最后没有结果。这里已经纠正。

递归和循环可以相互转换。但是递归算法往往更合适，甚至是必要的，因为有些情形用循环很费劲。

一个明显的例子就是遍历树。

var getLeafs = function(node) {
 if (node.childNodes.length == 0) {
  // base case
  return node.innerText;
 } else {
  // recursive case:
  return node.childNodes.map(getLeafs);
 }
}

分而治之

递归不只是代替for和while循环的有趣的方式。有个叫分而治之的算法，它递归地把问题拆分成更小的情形， 直到小到可以解决。

历史上有个欧几里得算法用于找出两个数的最大公分母

function gcd(a, b) {
 if (b == 0) {
  // 基准情形 (治)
  return a;
 } else {
  // 递归情形 (分)
  return gcd(b, a % b);
 }
}

console.log(gcd(12,8));
console.log(gcd(100,20));

gcb = (a, b) -> if b is 0 then a else gcb(b, a % b)

理论上来说，分而治之很牛逼，但是现实中有用吗？当然！用Javascript的函数对数组排序不是很好， 它不但替换了原数组，也就是说数据不是不变的，并且它还不够可靠、灵活。通过分而治之，我们可以做得更好。

全部的实现代码大概要40行，这里只展示伪代码：

var mergeSort = function(arr) {
 if (arr.length < 2) {
  // 基准情形: 只有0或1个元素的数组是不用排序的
  return items;
 } else {
  // 递归情形: 把数组拆分、排序、合并
  var middle = Math.floor(arr.length / 2);
  // 分
  var left = mergeSort(arr.slice(0, middle));
  var right = mergeSort(arr.slice(middle));
  // 治
  // merge是一个辅助函数，返回一个新数组，它将两个数组合并到一起
  return merge(left, right);
 }
}

译注：关于用分而治之的思路进行排序的一个更好的例子是快排，使用Javascript也只有13行代码。 具体请参考我以前的博文 《优雅的函数式编程语言》

惰性求值

惰性求值，也叫做非严格求值，它会按需调用并推迟执行，它是一种直到需要时才计算函数结果的求值策略， 这对函数式编程特别有用。比如有行代码是 x = func()，调用这个func()函数得到的返回值会赋值给x。 但是x等于什么一开始并不重要，直到需要用到x的时候。等到需要用x的时候才调用func()就是惰性求值。

这一策略可以让性能明显增强，特别是当使用方法链和数组这些函数式程序员最喜爱的程序流技术的时候。 惰性求值让人兴奋的一个优点是让无限序列成为可能。因为在它实在无法继续延迟之前，什么都不需要被真正计算出来。 它可以是这个样子：

// 理想化的JavaScript伪代码:
var infinateNums = range(1 to infinity);
var tenPrimes = infinateNums.getPrimeNumbers().first(10);

这为很多可能性敞开了大门，比如异步执行、并行计算、组合，这只列举了一点。

然而，还有个问题，Javascript本身并不支持惰性求值，也就是说存在让Javascript模拟惰性求值的函数库， 这是第三章的主题。