Javascript中的高階函數(shù)介紹
這是一個有趣的東西,這或許也在說明Javascript對象的強(qiáng)大。我們要做的就是在上一篇說到的那樣,輸出一個Hello,World,而輸入的東西是print('Hello')('World'),而這就是所謂的高階函數(shù)。
高階函數(shù)
高階看上去就像是一種先進(jìn)的編程技術(shù)的一個深奧術(shù)語,一開始我看到的時候我也這樣認(rèn)為的。
Javascript的高階函數(shù)
然而,高階函數(shù)只是將函數(shù)作為參數(shù)或返回值的函數(shù)。以上面的Hello,World作為一個簡單的例子。
var Moqi = function(p1){
this.add = function (p2){
return p1 + ' ' + p2;
};
return add;
};
我們便可以這樣使用這個函數(shù)
console.log(Moqi('Hello')('World'));
或許這個過程有點(diǎn)混亂,看看詳細(xì)一點(diǎn)的。
> typeof Moqi('Hello')
<- "function"
> Moqi('Hello')
<- function (p2){
return p1 + ' ' + p2;
}
也就是說實(shí)際上Moqi('Hello')是一個函數(shù),Moqi('Hello')
> var m = Moqi('Hello')
> m('World')
> "Hello,World"
從上面的情況來看,高階函數(shù)可以使代碼更簡潔、高效。自然而然地我們也可以創(chuàng)建一個函數(shù),以便于:
> Moqi('Hello')('World')('Phodal')
> "Hello,World Phodal"
于是就有了這樣一個函數(shù)
var Moqi = function(p1){
return function (p2){
return function(p3){
return p1 + ',' + p2 + ' ' +p3;
}
};
};
還原高階函數(shù)
越來越復(fù)雜,需要引入高階函數(shù)抽象的信號是出現(xiàn)重復(fù)或者相似的代碼。然后,我們先一步步還原到之前的函數(shù):
var Moqi = function(p1){
this.add = function (p2){
return function(p3){
return p1 + ',' + p2 + ' ' +p3;
}
};
return this.add;
};
接著再創(chuàng)建一個新的函數(shù)
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;
};
高階函數(shù)實(shí)例
上面的例子只是為了好玩,下面的例子是真正的運(yùn)用。
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])
< 3
在上面的例子中傳進(jìn)去的add是一個參數(shù),而在return的時候剛是一個函數(shù)。如在jQuery中有一個函數(shù)用于
// 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 );
},
也是這樣的運(yùn)用,可見高階函數(shù)對于掌握好JS的重要。。
相關(guān)文章
詳解JavaScript如何準(zhǔn)確獲取任意變量的數(shù)據(jù)類型
js是弱類型語言,或者說是動態(tài)語言,在定義變量時我們可以不提前聲明變量的類型,也可以在變量聲明后賦予不同類型的值。所以本文為大家詳解一下JavaScript如何準(zhǔn)確獲取任意變量的數(shù)據(jù)類型,需要的可以參考一下2022-06-06
Javascript中字符串replace方法的第二個參數(shù)探究
當(dāng)我們要把一段字符串中的某些指定字符替換掉,第一時間想到的就是replace方法,他的用法很簡單,W3school上講的清晰易懂。網(wǎng)上有關(guān)replace的文章也有很多了,那么這篇這里主要聊聊它的第二個參數(shù),下面來一起看看,注意閱讀本文需要對replace方法有一定了解。2016-12-12
Parcel.js + Vue 2.x 極速零配置打包體驗(yàn)教程
這篇文章主要介紹了Parcel.js + Vue 2.x 極速零配置打包體驗(yàn) 的相關(guān)資料,需要的朋友可以參考下2017-12-12
關(guān)于JavaScript數(shù)組對象去重的幾種方法
這篇文章主要介紹了關(guān)于JavaScript數(shù)組對象去重的幾種方法,不管是map對象的特性還是reduce方法都是很好用的去重方法,需要的朋友可以參考下2023-04-04
JavaScript如何借用構(gòu)造函數(shù)繼承
這篇文章主要介紹了JavaScript如何借用構(gòu)造函數(shù)繼承,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
drag-and-drop實(shí)現(xiàn)圖片瀏覽器預(yù)覽
chrome的drag and drop API,它能將本地的圖片放到瀏覽器中進(jìn)行預(yù)覽,猜想一下當(dāng)我們把圖片拖拽到瀏覽器里會發(fā)生什么事情,你的瀏覽器試圖打開一個新的頁面并加載這個圖片。這篇文章給我們介紹drag-and-drop實(shí)現(xiàn)圖片瀏覽器預(yù)覽,需要的朋友可以參考下2015-08-08
BootstrapTable refresh 方法使用實(shí)例簡單介紹
本文就bootstrapTable refresh 方法如何傳遞參數(shù)做簡單舉例說明,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-02-02

