站長資訊網
在javascript中，接口是指對協定進行定義的引用類型，接口其實就是告訴我們一個類實現了哪些方法，從而幫助其使用這個類；接口可以讓代碼變得更穩定。
本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
JavaScript中沒有內置的創建或實現接口的方法。它也沒有內置的方法用于判斷該一個對象是否實現了與另一個對象相同的一套方法。這使對象很難互換使用。但是JavaScript很靈活，我們可以通過別的方式去實現。
什么是接口
接口其實就是定義了對象內應該有哪些方法。他不用去考慮這些方法是怎么去實現的，而是定義該對象有這些方法。
接口是指對協定進行定義的引用類型。其他類型實現接口，以保證它們支持某些操作。接口指定必須由類提供的成員或實現它的其他接口。與類相似，接口可以包含方法、屬性、索引器和事件作為成員。
接口的好處
接口其實就是告訴我們一個類實現了哪些方法。從而幫助其使用這個類。接口可以讓我們的代碼變得更穩定，如果我們給接口添加了一個方法。而某個實現它的類沒有相應的添加這個方法，那肯定會拋出一個錯誤。
javascript模仿接口
JavaScript模仿接口有三種方法:
-
注釋法
-
屬性檢查法
-
鴨式變型法
用注釋描述接口
用注釋描述接口是最簡單的方法，但是效果是最差的。
/* interface Composite { function add(child); function remove(child); function getChild(index); } interface FormItem { function save(); } */ class CompositeForm { add(child) { //... } remove(child) { } getChild(index) { //... } save() { //... } }
這種模仿方法不是很好，它沒有檢查CompositeForm是否正確的實現了方法，完全是通過程序員們自覺去實現注釋中的接口。不過這種實現方式非常的簡單，但是它對測試和調試沒有任何幫助。
屬性檢查法模仿接口
這個方法會更謹慎一點，但是接口也是注釋的形式寫出來，只是可以通過檢查一個屬性得知某個類自稱實現了什么接口。
class CompositeForm { constructor() { this.implementsInterface = ['Composite', 'FormItem']; } } function addForm(formInstance) { if (!implements(formInstance, 'Composite', 'FormItem')) { throw new Error('對象沒有實現接口方法'); } } function implements(obj) { // 這個方法查詢接口 for (let i = 1; i < arguments.length; i++) { let interfaceName = arguments[i]; let interfaceFound = false; for (let j = 1; j < obj.implementsInterface.length; j++) { if (obj.implementsInterface[j] == interfaceName) { interfaceFound = true; break; } } if (!interfaceFound) { return false; } return true; } } addForm(new CompositeForm());
這種方法的優點是他對類所實現的接口提供了文檔說明，如果需要的接口不在我這個類宣稱支持的接口之列(也就是說不在我的this.implementsInterface里)，你就會看到錯誤信息。
缺點也顯而易見，如果我的this.implementsInterface里宣稱的和我注釋里所定義的接口不一樣但檢查還是能通過的，就是調用addForm方法是不會爆破錯的
用鴨式變型法模擬接口
其實，類是否聲明自己支持哪些接口并不重要，只要具有這些接口中的方法就行。鴨式變型法把對象的方法集作為判斷它是不是某個實例的唯一標準。實現原理也非常的簡單：如果對象具有與接口定義的方法同名的方法，那么就可以認為他實現了這個接口。
// interface class Interface { constructor(name, method) { if (arguments.length != 2) { throw new Error('兩個參數：name method'); } this.name = name; this.method = []; for (let i in method) { if (typeof method[i] != 'string') { throw new Error('method 必須是字符串'); } this.method.push(method[i]); } } //檢查接口方法 static ensureImplements(obj) { if (arguments.length < 2) { throw new Error('參數小于兩個'); } for (let i = 1; i < arguments.length; i++) { var instanceInterface = arguments[i]; if (instanceInterface.constructor !== Interface) { throw new Error('你要檢查的參數不屬于Interface接口') } for (let j in instanceInterface.method) { let methodName = instanceInterface.method[j]; if (!obj[methodName] || typeof obj[methodName] !== 'function') { throw new Error(`請實現接口的${methodName}方法`) } } } } } // 實例化接口對象 var Composite = new Interface('Composite', ['add', 'remove', 'getChild']); var FormItem = new Interface('FormItem', ['save']); // CompositeForm 類 class CompositeForm { //... add() {} remove() {} getChild() {} } let c1 = new CompositeForm(); Interface.ensureImplements(c1, Composite, FormItem); function addForm(formInterface) { ensureImplements(formInterface, Composite, FormItem); }
上面代碼中的CompositeForm類中我沒有實現save方法。運行這段代碼就會報錯。
但是鴨式變型法也是有缺點的，各個檢查方面都是強制實施的。
本菜鳥實現方法 > 我自稱繼承法
我用了類的繼承來模擬接口，具體實現請看代碼。
首先我們定義一個用作接口的類,屬性method代表接口的方法集
class Interface { constructor() { this.mehods = ['add', 'save', 'remove', 'save']; } static ensureImplements(obj) { //... } }
定義一個CompositeForm類繼承這個接口,并且在該類里面調用父類的ensureImplements方法檢測接口
class CompositeForm extends Interface{ constructor() { super().ensureImplements(this); } }
完善ensureImplements方法
class Interface { constructor() { this.mehods = ['add', 'save', 'remove', 'save']; } static ensureImplements(obj) { for (let i in this.mehods) { let methodName = this.mehods[i] if (!obj[methodName] || typeof obj[methodName] !== 'function') { let err = '請實現接口' + methodName + '的方法'; throw new Error(err); } } } }
【推薦學習：javascript高級教程】
