快捷導(dǎo)航

返回函數(shù)的JavaScript函數(shù)

更新時(shí)間：2016年06月14日 14:57:40 投稿：lijiao

理解返回函數(shù)的JavaScript函數(shù)是什么意思，通過幾個(gè)簡短的例子真正理解返回函數(shù)的JavaScript函數(shù)到底是什么？感興趣的小伙伴們可以參考一下

幾個(gè)星期前，我發(fā)了一條微博說我喜歡返回函數(shù)的函數(shù)。很快就出現(xiàn)了幾個(gè)回復(fù)，基本是都是….什么東東？！對(duì)于一個(gè)程序員來說，理解返回函數(shù)的函數(shù)是一個(gè)非常重要的技能，使用它你能節(jié)省很多代碼，讓JavaScript更高效，讓你進(jìn)一步理解JavaScript的強(qiáng)大之處。下面是我寫的幾個(gè)簡單的例子，我希望通過它你能理解我所表達(dá)的意思。

假設(shè)你有一個(gè)對(duì)象，包含有兩個(gè)子對(duì)象，它們都有g(shù)et方法，這兩個(gè)方法非常相似，稍有不同：

var accessors = {
 sortable: {
 get: function() {
  return typeof this.getAttribute('sortable') != 'undefined';
 }
 },
 droppable: {
 get: function() {
  return typeof this.getAttribute('droppable') != 'undefined';
 }
 }
};

重復(fù)的代碼不是一個(gè)好的現(xiàn)象，所以我們要?jiǎng)?chuàng)建一個(gè)外部函數(shù)，接受一個(gè)屬性名稱：

function getAttribute(attr) {
 return typeof this.getAttribute(attr) != 'undefined';
}

var accessors = {
 sortable: {
 get: function() {
  return getAttribute('sortable');
 }
 },
 droppable: {
 get: function() {
  return getAttribute('droppable');
 }
 }
};

這樣好多了，但仍不完美，因?yàn)檫€是有些多余的部分，更好的方法是要讓它直接返回最終需要的函數(shù)——這樣能消除多余的函數(shù)執(zhí)行：

function generateGetMethod(attr) {
 return function() {
 return typeof this.getAttribute(attr) != 'undefined';
 };
}

var accessors = {
 sortable: {
 get: generateGetMethod('sortable')
 },
 droppable: {
 get: generateGetMethod('droppable')
 }
};

/* 它跟最初的方法是完全等效的：*/

var accessors = {
 sortable: {
 get: function() {
  return typeof this.getAttribute('sortable') != 'undefined';
 }
 },
 droppable: {
 get: function() {
  return typeof this.getAttribute('droppable') != 'undefined';
 }
 }
};

*/

上面你看到的就是一個(gè)返回函數(shù)的函數(shù)；每個(gè)子對(duì)象里都有了自己的get方法，但卻去掉了多余的函數(shù)嵌套執(zhí)行過程。

這是一種非常有用的技術(shù)，能幫你消除重復(fù)相似的代碼，如果使用的恰當(dāng)，能讓你的代碼更可讀，更易維護(hù)！

大家理解了嗎？

您可能感興趣的文章:

相關(guān)文章

uniapp中使用vuex并持久化的方法示例
vuex是基于vuex.js的狀態(tài)管理工具,可以把它理解為一個(gè)倉庫,下面這篇文章主要給大家介紹了關(guān)于uniapp中如何使用vuex并持久化的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
JQuery入門——用one()方法綁定事件處理函數(shù)(僅觸發(fā)一次)
one()方法功能是為所選的元素綁定一個(gè)僅觸發(fā)一次的處理函數(shù),感興趣的朋友可以了解下它的調(diào)用語法為:one(type, [data], fn),閱讀本文或許有意外的收獲呢
2013-02-02
JavaScript實(shí)現(xiàn)滑塊驗(yàn)證解鎖
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)滑塊驗(yàn)證解鎖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
js添加事件的通用方法推薦
下面小編就為大家?guī)硪黄猨s添加事件的通用方法推薦。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
JavaScript適配器模式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript適配器模式的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
JavaScript模擬實(shí)現(xiàn)Promise功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript如何模擬實(shí)現(xiàn)Promise功能，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下
2022-12-12
JavaScript中 this 指向問題深度解析
這篇文章主要介紹了JavaScript中 this 指向問題深度解析,JavaScript 中的 this 指向問題有很多文章在解釋，仍然有很多人問，本文給大家深度解析，需要的朋友可以參考下
2017-02-02
使用微信小程序顯示用戶當(dāng)前地理位置的詳細(xì)代碼
這篇文章主要介紹了使用微信小程序顯示用戶當(dāng)前地理位置的詳細(xì)代碼,在微信小程序的開發(fā)中不可避免的會(huì)遇到需要顯示用戶地理位置的操作，本文將簡單介紹如何在微信小程序中顯示用戶當(dāng)前的地理位置，需要的朋友可以參考下
2022-06-06
SOSO地圖JS畫出標(biāo)注和中心點(diǎn)以html形式運(yùn)行
SOSO地圖想必大家都知道吧，本文將為大家詳細(xì)介紹下使用JS畫出標(biāo)注和中心點(diǎn),直接貼出代碼，感興趣的朋友可以參考下
2013-08-08
詳解JS如何判斷對(duì)象上是否存在某個(gè)屬性
判斷某一個(gè)對(duì)象里面是否存在某個(gè)屬性，是常見錯(cuò)誤場(chǎng)景排查，但是你真的知道該如何使用嘛，本文為大家整理了常用的三種方法，希望對(duì)大家有所幫助
2023-05-05