Javascript中的高階函數介紹_javascript技巧

這是一個有趣的東西，這或許也在說明Javascript物件的強大。我們要做的就是在上一篇說到的那樣，輸出一個Hello,World，而輸入的東西是print('Hello')('World')，而這就是所謂的高階函數。

高階函數

高階看起來就像是一種先進的程式設計技術的一個深奧術語，一開始我看到的時候我也這樣認為的。

Javascript的高階函數

然而，高階函數只是將函數作為參數或傳回值的函數。以上面的Hello,World作為一個簡單的例子。

複製程式碼 程式碼如下:

var Moqi = function(p1){
    this.add = function (p2){
        return p1 ' ' p2;
    };
    return add;
};

我們便可以這樣使用這個函數

複製程式碼 程式碼如下:

console.log(Moqi('Hello')('World'));

或許這個過程有點混亂，看看詳細一點的。

複製程式碼 程式碼如下:

> typeof Moqi('Hello')
> Moqi('Hello')
        return p1 ' ' p2;
    }

也就是說實際上Moqi('Hello')是個函數，Moqi('Hello')

複製程式碼 程式碼如下:

> var m = Moqi('Hello')       
 > m('World')
 > "Hello,World"
 

從上面的情況來看，高階函數可以讓程式碼更簡潔、更有效率。自然而然地我們也可以建立一個函數，以便於:

複製程式碼 程式碼如下:

 > Moqi('Hello')('World')('Phodal')
 > "Hello,World Phodal"

於是就有了這樣一個函數

複製程式碼 程式碼如下:

var Moqi = function(p1){
    return  function (p2){
        return function(p3){
            return p1 ',' p2 ' ' p3;
        }
    };
};

還原高階函數

越來越複雜，需要引入高階函數抽象的訊號是出現重複或相似的程式碼。然後，我們先一步步還原到之前的函數：

複製程式碼 程式碼如下:

var Moqi = function(p1){
     this.add =  function (p2){
        return function(p3){
            return p1 ',' p2 ' ' p3;
        }
    };
    return this.add;
};

接著再建立一個新的函數

複製程式碼 程式碼如下:

var Moqi = function(p1){
     this.add =  function (p2){
        this.add1 = function(p3){
            return p1 ',' p2 ' ' p3;
        };
        return this.add1;
    };
    return this.add;
};

使用javascript中的call方法，就會有：

複製程式碼 程式碼如下:

var Moqi = function(p1){
    var self = this;

    function fd(p2) {
        this.add1 = function (p3) {
            return p1 ',' p2 ' ' p3;
        };
    }

    self.add =  function (p2){
        fd.call(this, p2);
        return this.add1;
    };
    return self.add;
};

高階函數實例

上面的例子只是為了好玩，下面的例子是真正的運用。

複製程式碼 程式碼如下:

add = function(a,b){
    return a b;
};

function math(func,array){
    return func(array[0],array[1]);
}

console.log(math(add,[1,2]));

> math(add,[1,2])

在上面的例子中傳進去的add是一個參數，而在return的時候剛好是一個函數。如在jQuery中有一個函數用於

複製程式碼 程式碼如下:

// Convert dashed to camelCase; used by the css and data modules
// Microsoft forgot to hump their vendor prefix (#9572)
camelCase: function( string ) {
    return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
},

也是這樣的運用，可見高階函數對於掌握好JS的重要。 。