實務上會遇到的需求

實務上某些 function 會傳入 Array.prototype.forEach(),但我們只想執行一次而已,如符合條件就只執行一次,其餘僅管符合條件,但都不執行,我們該怎麼做呢 ?

Version


ECMAScript 2015

Scenario


1
2
3
const func = item => console.log(item);

[1, 2, 3].forEach(func);

很明顯會印出 123

但我們想只印出 1 即可,23 都不要印。

Closure


1
2
3
4
5
6
7
8
9
10
11
12
13
const createFunc = () => {
let count = 0;

return item => {
if (count++) return;

console.log(item);
};
};

const func = createFunc();

[1, 2, 3].forEach(func);

一個很直覺的思考方式,希望有個 count variable 幫我們統計,若 count0 就印,其他都不要印。

ECMAScript 要達成這種 private variable,必須依賴 Closure,所以特別另外建立 createFunc(),使 count 成為其 local variable,然後 return 新 function,使其與 count 做連結。

count0 時為 Falsy Value,因此印出 1,但 count1 之後就為 Truth Value,就不再繼續執行。

once000

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const createFunc = () => {
let once = false;

return item => {
if (once) return;

console.log(item);
once = true;
};
};

const func = createFunc();

[1, 2, 3].forEach(func);

一樣使用 Closure,但既然只執行一次,其實不必使用 counter,只需一個 Boolean flag 即可。

一開始令 oncefalse,因此會印出 1,印完馬上令 oncetrue,從此就不會再印出任何值。

once001

Property


1
2
3
4
5
6
const func = item => {
func.once || console.log(item);
func.once = true;
};

[1, 2, 3].forEach(func);

ECMAScript 是動態語言,可以動態建立 property,利用這個語言特性,其實可把動態建立 property 當成 private variable 使用。

一開始沒有 once property,為 Falsy Value,因此 || 會印出 1

然後馬上建立 once property,並令其為 false,之後就再也不會印出任何值。

once002

Conclusion


  • Closure 是 ECMAScript 很精彩的語言特性,在 OOP 必須借用 private field 實現的功能,在 FP 可藉由 Closure 實現
  • 動態建立 property 也是 ECMAScript 很精彩的語言特性,利用其不存在 property 為 undefined 的特性,視其為 Falsy Value,執行完後再動態建立 property 為 ture,當成 local variable 使用
2018-11-25