javascript中的function命名空間與模擬getter、setter

function的命名空間

在javascript中,function也可以擁有自己的命名空間
例如以下這段程式碼:

1
2
3
4
5
6
7
8
function () {
return 'I am A';
}

A.hello = 'hello!';

console.log(A());
console.log(A.hello);

我們可以在console得到以下內容:

1
2
I am A
hello!

可以發現即使A被宣告成一個function,它依然可以像object一樣被assign其中的其他attribute,而直接呼叫A本身也還是它原來function的功能

getter、setter

在javascript中,this會是呼叫它的對象,可以參考這裡
因此我們可以結合命名規則的特性寫成這個樣子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function () {
let Name = 'john';
let Gender = 'male';

< 大专栏  javascript中的function命名空間與模擬getter、setterspan class="line"> function f () {
}

f.Name = function(_) {
if (!arguments.length) {
return Name;
}
Name = _;
return this;
}

f.Gender = function(_) {
if (!arguments.length) {
return Gender;
}
Gender = _;
return this;
}

return f;
}

const a = A();

console.log(a.Name());
console.log(a.Gender());

這裡我們在function A中定義了兩個變數Name, Gender
然後分別使用A中的兩個function來作為存取他們的getter與setter
若我們不傳任何參數給a.Name與a.Gender的話,將可透過他們得到A中的兩個local變數,因此這裡的console將會印出:

1
2
john
male

而若我們有傳參數的話,例如這樣:

1
2
console.log(a.Name('alice').Name());
console.log(a.Gender('female').Gender());

這兩個函數將會作為setter使用,並會回傳f以便繼續呼叫其他變數
這是因為我們在這兩個function中回傳了this,因此我們又重新得到了呼叫他的物件f,故可以在console中得到:

1
2
alice
female

這裏我們看到可以將function作為一般命名空間使用,另外透過this也能實作getter、setter來存取這個命名空間中的變數

原文地址:https://www.cnblogs.com/lijianming180/p/12326500.html