javascript中介面是什麼

在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(&#39;参数小于两个&#39;);
        }

        for (let i = 1; i < arguments.length; i++) {
            var instanceInterface = arguments[i];
            if (instanceInterface.constructor !== Interface) {
                throw new Error(&#39;你要检查的参数不属于Interface接口&#39;)
            }

            for (let j in instanceInterface.method) {
                let methodName = instanceInterface.method[j];
                if (!obj[methodName] || typeof obj[methodName] !== &#39;function&#39;) {
                    throw new Error(`请实现接口的${methodName}方法`)
                }
            }
        }
    }
}

// 实例化接口对象
var Composite = new Interface(&#39;Composite&#39;, [&#39;add&#39;, &#39;remove&#39;, &#39;getChild&#39;]);
var FormItem = new Interface(&#39;FormItem&#39;, [&#39;save&#39;]);

// 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進階教學】

以上是javascript中介面是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！