ホームページ > ウェブフロントエンド > jsチュートリアル > ポリモーフィズムの簡単な入門

ポリモーフィズムの簡単な入門

零下一度
リリース: 2017-07-03 14:18:09
オリジナル
1120 人が閲覧しました

ポリモーフィズムとは文字通り「複数の状態」を意味し、同じ動作(メソッド)が異なるオブジェクト上で異なる状態を持ちます。
ポリモーフィック機能は、OOP のさまざまな場所で使用されます。たとえば、マウスの右ボタンをクリックする、ショートカットをクリックする、デスクトップ上の空白をクリックする、タスクバーをクリックするなどのときに、ポップアップ メニューが表示されます。違う。

メソッドオーバーライド:

つまり、サブクラスは親クラスと同じ名前のメソッドを定義することで、親クラスのメソッドをオーバーライドして異なる機能を実現します。

 1     function Animal(){} 2     var AnimalP = Animal.prototype; 3     AnimalP.eat = function(food){ 4         console.log('这个动物正在吃' + food); 5     }; 6  7     function Snake(){} 8     var SnakeP = extend(Snake,Animal);//extend函数请看上一节 9     /*snake没有对eat方法重写,继承的父类eat()方法*/10     function Dog(){}11     var DogP = extend(Dog,Animal);12     DogP.eat = function(food){13         /*对eat()方法重写*/14         /*上一章讲过,也可以在这里通过 Animal.eat.call(this,food)调用父方法;*/15         console.log("这只狗正在吃"+food);16     };17 18     function Cat(){}19     var CatP = extend(Cat,Animal);20     CatP.eat = function(food){21         console.log("这只猫正在吃"+food);22     };23     var snake = new Snake();24     snake.eat('老鼠');//log:这个动物正在吃老鼠25     var dog = new Dog();26     dog.eat('骨头');//log:这只狗正在吃骨头27     var cat = new Cat();28     cat.eat('鱼');//log:这只猫正在吃鱼
ログイン後にコピー

抽象クラス:

上記のコードでは、Snake クラスは独自の Eat() メソッドを実装していませんが、サブクラスには特定のメソッド (抽象メソッド) が必要な場合があります。そのため、現時点では、抽象クラスを使用する必要があります。ES5 と ES6 には抽象クラスの概念がないため、Animal を使用する場合は、シミュレーションを通じてのみ実装できます。 Eat() メソッドは抽象メソッドとして定義されています:

1     AnimalP.eat = function(food){2         /*定义抽象方法(虚函数),如果子类没有重写这个方法,在执行这方法的时候就会抛出错误*/3         throw '"' + this.constructor.name + "'类没有eat()方法";4     };5     function Snake(){}6     var SnakeP = extend(Snake,Animal);7     var snake = new Snake();8     snake.eat('老鼠');//throw:"Snake'类没有eat()方法
ログイン後にコピー

メソッドのオーバーロード (オーバーロード):

渡されるパラメータ (パラメータの型、数) に応じて、このような関数を作成する必要があります。実行結果も異なります:

1 var run = function(speed){2         if(typeof speed == 'number'){3             console.log('跑的速度有' + speed + 'm/s');4         }else if(typeof speed == 'string'){5             console.log('跑的速度有' + speed);6         }7     }8     run(15);//log:跑的速度有15m/s9     run('20KM/h');//log:跑的速度有20KM/h
ログイン後にコピー
しかし、上で書かれたコードを保守するのは明らかに困難です。クラスで使用すると、run メソッドをインターフェースとして使用して、パラメーターのタイプに応じてさまざまなメソッドを実行できます。

 1     function Dog(){} 2     var DogP = Dog.prototype; 3     DogP.run = function(speed){ 4         if(typeof speed == 'number'){ 5             this._runNumber(speed); 6         }else if(typeof speed == 'string'){ 7             this._runString(speed); 8         }else{ 9             throw '参数不匹配';10         }11     }12     DogP._runString = function(speed){13         console.log('这只狗跑的速度有' + speed);14     }15     DogP._runNumber = function(speed){16         console.log('这只狗跑的速度有' + speed + 'm/s');17     }18     var dog = new Dog();19     dog.run(15);//log:这只狗跑的速度有15m/s20     dog.run('20KM/h');//log:这只狗跑的速度有20KM/h21     dog.run([]);//throw:参数不匹配
ログイン後にコピー
これはメソッドのオーバーロードのシミュレーションですが、実際には、ES5、ES6、typecipt は構文的なメソッドのオーバーロードをサポートしておらず、typecipt は関数のオーバーロードのみをサポートしています。

これはポリモーフィズムの別の実装です。

ES6 によるデモ:

 1     class Animal{ 2         eat(food){ 3             throw '"' + this.constructor.name + "'类没有eat()方法"; 4         } 5     } 6     class Snake extends Animal{} 7     class Dog extends Animal{ 8         eat(food){ 9             console.log("这只狗正在吃"+food);10         }11     }12     class Cat extends Animal{13         eat(food){14             console.log("这只猫正在吃"+food);15         }16     }17     let snake = new Snake();18     snake.eat('老鼠');//throw:"Snake'类没有eat()方法19     let dog = new Dog();20     dog.eat('骨头');//log:这只狗正在吃骨头21     let cat = new Cat();22     cat.eat('鱼');//log:这只猫正在吃鱼
ログイン後にコピー

TypeScript によるデモ:

 1 abstract class Animal{//定义抽象类Animal 2     constructor(){} 3     abstract eat(food: string){} 4     /*定义抽象方法eat(),并且限定传入的参数类型是string, 5     还可以定义返回值,接口等,如果子类不符合限定的规范,编译的时候就会报错。 6     */ 7 } 8 class Snake extends Animal{}//报错,无法通过编译,因为没有定义eat()抽象方法 9 class Dog extends Animal{10     eat(food: string){11         console.log("这只狗正在吃"+food);12     }13 }14 class Cat extends Animal{15     eat(food: string){16         console.log("这只猫正在吃"+food);17     }18 }19 let dog = new Dog();20 dog.eat('骨头');//log:这只狗正在吃骨头21 let cat = new Cat();22 cat.eat('鱼');//log:这只猫正在吃鱼
ログイン後にコピー

あとがき

著者の記事が気に入ったら、忘れずにブックマークしてください。あなたの「いいね」が著者にとって最大の励みになります。 ;

ここで説明したのはオブジェクト指向の主な知識点であり、これは決して完璧ではありません。時間があればすぐに始めることをお勧めします。 、本を読んで js OOP を体系的に学習する必要があります。

このシリーズには最後の章があり、これまでの章で説明した知識ポイントをケースを通して統合し、誰もがそれをよりよく消化して吸収できるようにします。醸造までに数週間かかります

ご質問がございましたら、お気軽にメッセージを残すか、著者にプライベート メッセージを送信してください。不適切な点やもっと適切に表現できる点がございましたら、ご指摘いただければ早急に修正、改善させていただきます。

以上がポリモーフィズムの簡単な入門の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート