JavaScriptのインターフェースとは何ですか-フロントエンドQ&A-php.cn

JavaScript では、インターフェイスはコントラクトを定義する参照型を指します。インターフェイスは実際にクラスがどのようなメソッドを実装しているかを示し、それによってこのクラスの使用を支援します。インターフェイスによりコードがより安定します。

JavaScriptのインターフェースとは何ですか

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript にはインターフェイスを作成または実装する組み込みの方法はありません。また、あるオブジェクトが別のオブジェクトと同じメソッドのセットを実装しているかどうかを判断する組み込みメソッドもありません。このため、オブジェクトを互換的に使用することが困難になります。しかし、JavaScript は非常に柔軟なので、他の方法でも実装できます。

インターフェースとは

インターフェースは実際にオブジェクト内にどのようなメソッドを含めるべきかを定義します。これらのメソッドがどのように実装されるかを考慮する必要はありませんが、オブジェクトがこれらのメソッドを持つことを定義します。

インターフェイスは、合意を定義する参照タイプを指します。他の型は、特定の操作を確実にサポートするためにインターフェイスを実装します。インターフェイスは、それを実装するクラスまたは他のインターフェイスによって提供される必要があるメンバーを指定します。クラスと同様に、インターフェイスにはメソッド、プロパティ、インデクサー、およびイベントをメンバーとして含めることができます。

インターフェイスの利点

インターフェイスは、実際にクラスがどのメソッドを実装しているかを示します。これは、このクラスを使用するのに役立ちます。インターフェイスにメソッドを追加すると、インターフェイスによりコードがより安定します。これを実装するクラスがこのメソッドをそれに応じて追加しない場合、間違いなくエラーがスローされます。

JavaScript 模倣インターフェース

JavaScript 模倣インターフェースには 3 つのメソッドがあります:

コメントメソッド
#属性チェック方法
##ダック変換方法

##コメントを使用してインターフェイスを説明する

コメントを使用してインターフェイスを説明するのは最も簡単な方法ですが、効果は最悪です。

/*
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());

ログイン後にコピー

このメソッドの利点は、クラスによって実装されたインターフェイスのドキュメントが提供されることです。必要なインターフェイスが、クラスがサポートするように宣言しているインターフェイスの中にない場合 (つまり、このメソッドに含まれていない場合) .implementsInterface) ) を実行すると、エラーメッセージが表示されます。

欠点も明らかで、this.implementsInterface で宣言されたインターフェイスがコメントで定義されたインターフェイスと異なっていてもチェックに合格できる場合、addForm メソッドの呼び出しでエラーが発生しないことを意味します。

ダック変換を使用したインターフェイスのシミュレート

#実際、クラスがこれらのメソッドを持っている限り、サポートするインターフェイスを宣言するかどうかは問題ではありません。インターフェース。 Duck 変換では、オブジェクトがインスタンスであるかどうかを判断するための唯一の基準として、オブジェクトのメソッドセットが使用されます。実装原理も非常に単純です。オブジェクトにインターフェイスによって定義されたメソッドと同じ名前のメソッドがある場合、そのオブジェクトはインターフェイスを実装していると見なされます。

// 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 メソッドを実装していません。このコードを実行するとエラーが発生します。

しかし、アヒル変換方法にも欠点があり、すべての検査側面が必須です。

この新人の実装方法 > 私は継承メソッドと呼んでいます

クラス継承を使用してインターフェイスをシミュレートしました。具体的な実装についてはコードを参照してください。

最初に、インターフェイスとして使用されるクラスを定義します。属性メソッドは、インターフェイスのメソッドセットを表します。

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 中国語 Web サイトの他の関連記事を参照してください。