ホームページ > 記事 > ウェブフロントエンド > JavaScriptのインターフェースとは何ですか
JavaScript では、インターフェイスはコントラクトを定義する参照型を指します。インターフェイスは実際にクラスがどのようなメソッドを実装しているかを示し、それによってこのクラスの使用を支援します。インターフェイスによりコードがより安定します。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
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 メソッドの呼び出しでエラーが発生しないことを意味します。
ダック変換を使用したインターフェイスのシミュレート// 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); }
この新人の実装方法 > 私は継承メソッドと呼んでいます
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 サイトの他の関連記事を参照してください。