JavaScript原型继承添加方法属性

在javascript中,一个函数,能够包含变量,也能够包含其它的函数,那么,这样子的话,咱们就能够把变量作为类的属性,内部的函数则做为成员方法了。那么,外层的函数,就能够当作是一个类了。javascript

一、首先咱们写一个动物类吧,其实他是一个函数,只不过咱们能够把它当作这个类的构造函数java

  1. function Animal(){  
  2.      console.log('Call the constuctor.');  
  3.  } 

二、而后咱们能够使用new关键字来建立一个myClass类的实例函数

  1. var cat = new Animal(); 

这样,咱们就建立了一个实例obj了,运行一下,使用相关的调试工具就能够看到Call the constructor的调试信息了。也就证实,咱们建立类成功了。工具

三、那么,接下来,咱们也能够给构造函数加上参数,好比:this

  1. function Animal(name){  
  2.     this.name = name;  

这样子,咱们就能够建立实例,而且访问类的属性了spa

  1. function myClass(name){  
  2.     this.name = name;  
  3. }  
  4. var cat = new myClass("Kate");  
  5. alert(cat.name); 

这样子,就能够访问到实例cat的属性name了。prototype

四、你们都知道,动物会跳会吃,那么咱们怎么给他加上方法呢?看下面调试

方法一:直接在构造函数里面声明方法对象

  1. function Animal(name){  
  2.     this.name = name;  
  3.     this.jump = function(){  
  4.         alert (this.name + " is jumping...");  
  5.     };  
  6.  
  7.     this.eat = function(){  
  8.         alert (this.name + " is eatting...");  
  9.     };  
  10. }  
  11.  
  12. var cat = new Animal("Kate");  
  13.  
  14. alert(cat.name);  
  15. cat.jump();  
  16. cat.eat(); 

方法二:利用prototype为类添加方法继承

  1. function Animal(name){  
  2.     this.name = name;  
  3. }  
  4.  
  5. Animal.prototype = {  
  6.           
  7.     type : 'cat',  
  8.  
  9.     jump : function(){  
  10.         alert (this.name + " is jumping...");  
  11.     },  
  12.  
  13.     eat : function(){  
  14.         alert (this.name + " is eatting...");              
  15.     }  
  16.  
  17. }  
  18.  
  19. var cat = new Animal("Kate");  
  20.  
  21. alert(cat.name);  
  22. alert(cat.type);  
  23. cat.jump();  
  24. cat.eat(); 

一样的,咱们也能够用一样的方法为类添加新的属性,如type....

五、上面咱们讲到的,是javascipt中,怎么建立一个类,以及怎么为类添加属性以及方法,接下来,咱们谈一下怎么实现类的继承。

要实现继承,咱们能够经过prototype实现类的继承,首先,咱们要先声明一个Dog类(若是还不懂,请从新看上面相关内容),而且让它继承Animal类。

  1. function Dog(){};  
  2. Dog.prototype = new Animal("Henry"); 

而后咱们能够实例化一只新的狗dog出来,试着调用它的方法,看当作功了吗?

  1. function Dog(){};  
  2. Dog.prototype = new Animal("Henry");  
  3.  
  4. var dog = new Dog();  
  5. dog.jump();  
  6. dog.eat(); 

显然,若是代码没敲错的话,应该能够看到提示“Henry is jumping...”,“Henry is eatting...”。

六、既然实现了类的继承,那就必然想到另一个问题,那就是多态的问题。

多态是指相同的操做或函数、过程可做用于多种类型的对象上并得到不一样的结果。不一样的对象,收到同一消息能够产生不一样的结果,这种现象称为多态。

经过继承,子类已经继承了父类的方法了,但要实现多态,势必对子类的方法进行重写。

为了表达更明确,咱们再建立一个Pig类出来,而且继承Animal类。怎么建立我就不说了。建立完的代码应该是像如今这样子。

  1. function Dog(){};  
  2. Dog.prototype = new Animal("Henry");  
  3.  
  4. function Pig(){};  
  5. Pig.prototype = new Animal("Coco");  
  6.  
  7. var dog = new Dog();  
  8. dog.jump();  
  9. dog.eat();  
  10.  
  11. var pig = new Pig();  
  12.  
  13. pig.jump();  
  14. pig.eat(); 

运行以后,由于继承了Animal类的缘由,结果确定又是“XX is jumping...”,“XX is eatting...”了,那咱们要实现的,就是进行方法的重写。咱们能够有下面的方式实现方法的重写。

  1. function Dog(){};//建立dog子类  
  2. Dog.prototype = new Animal("Henry");  
  3. //重写dog的方法  
  4. Dog.prototype.jump = function(){  
  5.     alert("Hi, this is " + this.name + ", I'm jumping...")  
  6. };  
  7. Dog.prototype.eat = function(){  
  8.     alert("Henry is eatting a bone now.");      
  9. };  
  10.  
  11. function Pig(){};//建立pig子类  
  12. Pig.prototype = new Animal("Coco");  
  13. //重写pig的方法  
  14. Pig.prototype.jump = function(){  
  15.     alert("I'm sorry. " + this.name + " can not jump.");  
  16. };  
  17. Pig.prototype.eat = function(){  
  18.     alert("Hi, I'm " + this.name + ", I'm eatting something delicious.");  
  19. }  
  20.  
  21. var dog = new Dog();  
  22. dog.jump();  
  23. dog.eat();  
  24.  
  25. var pig = new Pig();  
  26.  
  27. pig.jump();  
  28. pig.eat(); 

运行一下,是否是实现了对方法的重写呢??

六、那么,假如我实例化一只dog以后,我想单独为这只dog添加属性和方法,怎么作呢?看下面

  1. var dog = new Dog();  
  2. //添加属性和方法  
  3. dog.type = "Doberman Pinscher";  
  4. dog.shout = function(){  
  5.     alert("I'm a " + this.type + ".");  
  6. }  
  7. dog.jump();  
  8. dog.eat();  
  9. //调用新的方法  
  10. dog.shout(); 
相关文章
相关标签/搜索