ホームページ >ウェブフロントエンド >jsチュートリアル >ポリモーフィズムの簡単な入門
ポリモーフィズムとは文字通り「複数の状態」を意味し、同じ動作(メソッド)が異なるオブジェクト上で異なる状態を持ちます。
ポリモーフィック機能は、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 は関数のオーバーロードのみをサポートしています。
これはポリモーフィズムの別の実装です。
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:这只猫正在吃鱼
以上がポリモーフィズムの簡単な入門の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。