DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript的函數式編程基礎指南
JavaScript的函數式編程基礎指南
編輯:JavaScript基礎知識     

引言

JavaScript是一種強大的,卻被誤解的編程語言。一些人喜歡說它是一個面向對象的編程語言,或者它是一個函數式編程語言。另外一些人喜歡說,它不是一個面向對象的編程語言,或者它不是一個函數式編程語言。還有人認為它兼具面向對象語言和函數式語言的特點,或者,認為它既不是面向對象的也不是函數式的,好吧,讓我們先擱置那些爭論。

讓我們假設我們共有這樣的一個使命:在JavaScript語言所允許的范圍內,盡可能多的使用函數式編程的原則來編寫程序。

首先,我們需要清理下腦子裡那些關於函數式編程的錯誤觀念。

在JS界被(重度)誤解的函數式編程

顯然有相當一批開發者一天到晚的以函數式范式的方式使用JavaScript。我還是要說有更大量的JavaScript開發者,並不真正理解那佯做的真正意義。

我確信,導致這種局面是因為很多用於服務端的web開發語言都源自C語言,而C語言,很顯然不是一種函數式編程語言。

似乎有兩個層級的混亂,第一個層級的混亂我們用下面這個在jQuery中經常會用到的例子來說明:

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

嘿,仔細看。我傳遞一個匿名函數作為參數,這在JavaScript世界裡被稱作眾所周知“CallBack”(回調)函數。

真有人會認為這就是函數式編程嗎?根本不是!

這個例子展示了一個函數式語言的關鍵特性:函數作為參數。另一方面,這個3行代碼的例子也違背了幾乎所有其他的函數式編程范式。

第二個層級的混亂有點微妙。讀到這裡,一些追求潮流的JS開發者在暗自思考。

好吧,廢話!但是我已經知道了所有關於函數式編程的知識與技能。我在我所有的項目上使用Underscore.js。

Underscore.js 是一個廣受歡迎的JavaScript庫,到處都在使用。舉個例子,我有一組單詞,我需要獲得一個集合,集合裡的每個元素是各個單詞的頭兩個字母。用Underscore.js實現這個相當簡單:

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

看!看JavaScript巫術。我正在使用這些高級的函數式應用函數,像_.map 和 _.first。你還有什麼要說的,利蘭(譯注:作者Leland)?

盡管underscore 和 像_.map這樣的函數是非常有價值的函數式范式,但是像這個例子中所采用的組織代碼的方法看起來…冗長而且對於我來說太難於理解。我們真的需要這樣做嗎?

如果開始思考的時候多一點“函數式”的思維,可能我們能夠把上面的例子改成這樣:

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

仔細想想,在1行代碼中包含了和上面5行代碼同樣的信息。words 和word 僅僅是參數/占位符。這個方法的核心是用一種更明顯的方式組合map函數,first函數,和常量2。

JavaScript是函數式編程語言嗎?

沒有神奇的公式能夠判定一種語言是不是“函數式”語言。有些語言很明顯就是函數式的,就像另外一些語言很明顯不是函數式的,但是有大量語言的是模稜兩可的中間派。

於是這裡給出一些常用的、重要的函數式語言的“配料”(JavaScript能實現用粗體標志)

  • 函數是“第一等公民”
  • 函數能夠返回函數
  • 詞法上支持閉包
  • 函數要“純粹”
  • 可靠遞歸
  • 沒有變異狀態

這決不是一個排它的列表,但是我們至少要逐個討論Javascript中最重要的三個特性,它們支撐我們可以用函數式的方式來編寫程序。

讓我們逐個詳細的了解下:

函數是“第一等公民”

這條可能是在所有的配料中最明顯的,並且可能是在很多現代編程語言中最常見到的。

在JavaScript局部變量是通過var關鍵字來定義的。

var foo = "bar";

JavaScript中把函數以局部變量的方式定義是非常容易做到的。

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

這些都是事實,變量:變量add和變量even通過被賦值的方式,與函數定義建立引用關系,這種引用關系是在任何時候如果需要是可以被改變的。

// 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; };

當然,這沒有什麼特別的。但是成為“第一等公民”這個重要的特性使得我們能夠把函數以參數的方式傳遞給另一個函數。舉個例子:

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開發者的關鍵。
那麼…什麼是閉包?

簡單的說,閉包就是內部函數一直擁有父函數作用域的訪問權限,即使父函數已經返回。<譯注4>
可能需要個例子。

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”(私有)狀態。


XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved