[譯] 為函式自定義屬性的八種實現方法

介紹：本文來自 Stack Overflow 上Adding custom properties to a function - John Slegers 的答案 。“給函式自定義屬性”並不是常規做法，但是答案中給出的思路涉及廣泛，很值得學習。

首先，你要認識到標準的函式屬性（ arguments，name，caller 和 length ）都不能被覆蓋。所以，打消自定義的這些屬性名的想法吧。

給函式新增自定義屬性可以使用很多不同方法，這些都是跨瀏覽器相容的。

方法一：執行函式時新增屬性

var doSomething = function() {
doSomething.name = 'Tom';
doSomething.name2 = 'John';
return 'Beep';
};

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
複製程式碼

輸出：

doSomething.name : 
doSomething.name2 : undefined
doSomething() : Beep
doSomething.name : 
doSomething.name2 : John 
複製程式碼

方法一（替代語法）

function doSomething() {
doSomething.name = 'Tom';
doSomething.name2 = 'John';
return 'Beep';
};

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
複製程式碼

輸出：

doSomething.name : doSomething
doSomething.name2 : undefined
doSomething() : Beep
doSomething.name : doSomething
doSomething.name2 : John 
複製程式碼

方法一（第二種替代語法）

var doSomething = function f() {
f.name = 'Tom';
f.name2 = 'John';
return 'Beep';
};

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
複製程式碼

輸出：

doSomething.name : f
doSomething.name2 : undefined
doSomething() : Beep
doSomething.name : f
doSomething.name2 : John 
複製程式碼

這種方法的問題在於，你需要至少先執行一次函式，才能完成屬性賦值。對於多數函式來說，很顯然我們不想這麼做。所以考慮其他選擇。

方法二：定義函式之後新增屬性

function doSomething() {
return 'Beep';
};

doSomething.name = 'Tom';
doSomething.name2 = 'John';

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
複製程式碼

輸出：

doSomething.name : doSomething
doSomething.name2 : John
doSomething() : Beep
doSomething.name : doSomething
doSomething.name2 : John 
複製程式碼

現在，你不需要在取得屬性值之前執行一次函數了。然而，不足之處是感覺這些屬性脫離了函式。

方法三：使用匿名函式包裝函式體（並立即執行）

var doSomething = (function(args) {
var f = function() {
return 'Beep';
};
for (i in args) {
f[i] = args[i];
}
return f;
}({
'name': 'Tom',
'name2': 'John'
}));

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
複製程式碼

輸出：

doSomething.name : 
doSomething.name2 : John
doSomething() : Beep
doSomething.name : 
doSomething.name2 : John 
複製程式碼

使用匿名函式包裝你的函式，就可以將屬性放入物件中，然後在匿名函式內遍歷這些屬性加以新增。用這種方式，屬性與函式聯絡密切了。當你想要從已存在的物件中拷貝屬性到函式中時，這種技術很有效。

然而缺點是，你只能在定義函式時一次性新增這些屬性。而且，這也違背了軟體工程的 DRY 原則（程式碼的抽象三原則），尤其是你需要經常給各種函式新增屬性的話。

方法四：為函式新增一個“extend”方法，用於從物件中逐個新增屬性

var doSomething = function() {
return 'Beep';
};

doSomething.extend = function(args) {
for (i in args) {
this[i] = args[i];
}
return this;
}

doSomething.extend({
'name': 'Tom',
'name2': 'John'
});

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
複製程式碼

輸出：

doSomething.name : 
doSomething.name2 : John
doSomething() : Beep
doSomething.name : 
doSomething.name2 : John 
複製程式碼

可以一次性處理多個屬性，也可以隨時從別處添加了。

然而，程式碼同樣違反了 DRY 原則，如果你經常這麼做的話。

方法五：建立一個通用的“extend”函式

// 注：原文有錯誤，已改正
var extend = function(obj, args) {
if (Array.isArray(args) || (args !== null && typeof args === 'object')) {
for (i in args) {
obj[i] = args[i];
}
}
return obj;
}

var doSomething = extend(
function() {
return 'Beep';
}, {
'name': 'Tom',
'name2': 'John'
}
);

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
複製程式碼

輸出：

doSomething.name : 
doSomething.name2 : John
doSomething() : Beep
doSomething.name : 
doSomething.name2 : John 
複製程式碼

這是一個通用的繼承方法，更符合 DRY 原則，允許你任性新增屬性。

方法六：建立一個 extendableFunction 物件，用它為函式新增擴充套件函式

var extendableFunction = (function() {
var extend = function(args) {
if (Array.isArray(args) || (args !== null && typeof args === 'object')) {
for (i in args) {
this[i] = args[i];
}
}
return this;
};
var ef = function(v, obj) {
v.extend = extend;
return v.extend(obj);
};

ef.create = function(v, args) {
return new this(v, args);
};
return ef;
})();

var doSomething = extendableFunction.create(
function() {
return 'Beep';
}, {
'name': 'Tom',
'name2': 'John'
}
);

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
複製程式碼

輸出：

doSomething.name : 
doSomething.name2 : John
doSomething() : Beep
doSomething.name : 
doSomething.name2 : John 
複製程式碼

不再需要一個通用的“extend”函數了，這種方法生產出來的函式自帶一個“extend”函式方法。

注：extendableFunction 和上面的 extend 都是高階函式（high order function），但又都不是純函式（pure function）。相關知識可以瞭解一下函數語言程式設計，有能力的話最好閱讀英文原版mostly-adequate-guide 。

方法七：向 Function 原形掛載“extend”函式

Function.prototype.extend = function(args) {
if (Array.isArray(args) || (args !== null && typeof args === 'object')) {
for (i in args) {
this[i] = args[i];
}
}
return this;
};

var doSomething = function() {
return 'Beep';
}.extend({
name : 'Tom',
name2 : 'John'
});

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
複製程式碼

輸出：

doSomething.name : 
doSomething.name2 : John
doSomething() : Beep
doSomething.name : 
doSomething.name2 : John 
複製程式碼

這種做法的一個巨大優勢是，向函式新增新的屬性變得非常簡單，這種做法也符合 DRY 原則，並且很面向物件。另外，向 Function 原形鏈掛載方法也節省記憶體。

然而，這種做法的缺點是並不具有充分的前瞻性。一旦將來瀏覽器給 Funcion 的原形上掛載了原生的“extend”方法，你的程式碼就會出問題。

方法八：函式遞迴一次然後返回自身

var doSomething = (function f(arg1) {
if(f.name2 === undefined) {
f.name = 'Tom';
f.name2 = 'John';
// 注：此處原答案疑似錯誤，已改正
f.extend = function(args) {
if (Array.isArray(args) || (args !== null && typeof args === 'object')) {
for (i in args) {
this[i] = args[i];
}
}
return this;
};
return f;
} else {
return 'Beep';
}
})();

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
複製程式碼

輸出：

doSomething.name : f
doSomething.name2 : John
doSomething() : Beep
doSomething.name : f
doSomething.name2 : John 
複製程式碼

執行該函式一次，檢查它所需要的屬性。如果沒有，設定該屬性並返回函式本體；如果設定過了，直接執行該函式。

如果你將“extend”方法設定為屬性之一，之後還可以為該函式新增別的屬性。

向物件中新增自定義屬性

我雖然給出了這麼多方法，還是建議你不要給函式設定屬性；設定物件的屬性好多了！

我個人喜歡使用下面這種語法來實現單例類：

var keyValueStore = (function() {
return {
'data' : {},
'get' : function(key) { return keyValueStore.data[key]; },
'set' : function(key, value) { keyValueStore.data[key] = value; },
'delete' : function(key) { delete keyValueStore.data[key]; },
'getLength' : function() {
var l = 0;
for (p in keyValueStore.data) l++;
return l;
}
}
})();
複製程式碼

這種寫法的好處是相容公共和私有變數。例如，這樣你就可以讓“data”變為 private 的：

var keyValueStore = (function() {
var data = {};

return {
'get' : function(key) { return data[key]; },
'set' : function(key, value) { data[key] = value; },
'delete' : function(key) { delete data[key]; },
'getLength' : function() {
var l = 0;
for (p in data) l++;
return l;
}
}
})();
複製程式碼

可是你想要多個 datastore 例項？沒問題！

var keyValueStore = (function() {
var count = -1;

return (function kvs() {
count++;
return {
'data': {},
'create': function() { return new kvs(); },
'get' : function(key) { return this.data[key]; },
'set' : function(key, value) { this.data[key] = value; },
'delete' : function(key) { delete this.data[key]; },
'getLength' : function() {
var l = 0;
for (p in this.data) l++;
return l;
}
}
})();
})();
複製程式碼

let s1 = keyValueStore;
let s2 = s1.create();
s1.set('a', 1);
s1.set('b', 2);
s2.set('c', 3);
s1.count() === s2.count(); // 輸出 true；count() 返回 kvs 的個數
s1.getLength(); // 輸出 2；getLength() 返回每個 kvs 自身的資料條數
s2.getLength(); // 輸出 1
s1.get('c'); // 輸出 undefined；因為“c”是 s2 所包含的
複製程式碼

最後，你可以隔離例項和單例類的屬性，並在原形上給例項定義 public 方法。

var keyValueStore = (function() {
var count = 0; // Singleton private properties

var kvs = function() {
count++; // Instance private properties
this.data = {};// Instance public properties
};

kvs.prototype = { // Instance public properties
'get' : function(key) { return this.data[key]; },
'set' : function(key, value) { this.data[key] = value; },
'delete' : function(key) { delete this.data[key]; },
'getLength' : function() {
var l = 0;
for (p in this.data) l++;
return l;
}
};

return{ // Singleton public properties
'create' : function() { return new kvs(); },
'count' : function() { return count; }
};
})();
複製程式碼

使用上面的方法，好處有：

• 為物件宣告多個例項
• 保有私有變數
• 定義類的變數

使用方法如下：

kvs = keyValueStore.create();
kvs.set('Tom', "Baker");
kvs.set('Daisy', "Hostess");
var profession_of_daisy = kvs.get('Daisy');// 輸出 Hostess
kvs.delete('Daisy');
console.log(keyValueStore.count());// 輸出 1
複製程式碼

注：keyValueStore 是單例，create 與 count 是其自身方法，create 用於新建資料倉庫 kvs，count 為生產的 kvs 計數；kvs 僅有 get、set、delete、getLength 方法，無法像前一種實現一樣直接呼叫 create 和 count 方法了。