JavaScript原型继承添加方法属性

摘要:
在javascript中,一个函数,可以包含变量,也可以包含其它的函数,那么,这样子的话,我们就可以把变量做为类的属性,内部的函数则作为成员方法了。functionDog(){};Dog.prototype=newAnimal;functionPig(){};Pig.prototype=newAnimal;vardog=newDog();dog.jump();dog.eat();varpig=newPig();pig.jump();pig.eat();运行之后,因为继承了Animal类的原因,结果肯定又是“XXisjumping...”,“XXiseatting...”了,那我们要实现的,就是进行方法的重写。

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

1、首先我们写一个动物类吧,其实他是一个函数,只不过我们可以把它看成这个类的构造函数

  1. functionAnimal(){
  2. console.log('Calltheconstuctor.');
  3. }

2、然后我们可以使用new关键字来创建一个myClass类的实例

  1. varcat=newAnimal();

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

3、那么,接下来,我们也可以给构造函数加上参数,比如:

  1. functionAnimal(name){
  2. this.name=name;
  3. }

这样子,我们就可以创建实例,并且访问类的属性了

  1. functionmyClass(name){
  2. this.name=name;
  3. }
  4. varcat=newmyClass("Kate");
  5. alert(cat.name);

这样子,就可以访问到实例cat的属性name了。

4、大家都知道,动物会跳会吃,那么我们怎么给他加上方法呢?看下面

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

  1. functionAnimal(name){
  2. this.name=name;
  3. this.jump=function(){
  4. alert(this.name+"isjumping...");
  5. };
  6. this.eat=function(){
  7. alert(this.name+"iseatting...");
  8. };
  9. }
  10. varcat=newAnimal("Kate");
  11. alert(cat.name);
  12. cat.jump();
  13. cat.eat();

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

  1. functionAnimal(name){
  2. this.name=name;
  3. }
  4. Animal.prototype={
  5. type:'cat',
  6. jump:function(){
  7. alert(this.name+"isjumping...");
  8. },
  9. eat:function(){
  10. alert(this.name+"iseatting...");
  11. }
  12. }
  13. varcat=newAnimal("Kate");
  14. alert(cat.name);
  15. alert(cat.type);
  16. cat.jump();
  17. cat.eat();

同样的,我们也可以用同样的方法为类添加新的属性,如type....

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

要实现继承,我们可以通过prototype实现类的继承,首先,我们要先声明一个Dog类(如果还不懂,请重新看上面相关内容),并且让它继承Animal类。

  1. functionDog(){};
  2. Dog.prototype=newAnimal("Henry");

然后我们可以实例化一只新的狗dog出来,试着调用它的方法,看看成功了吗?

  1. functionDog(){};
  2. Dog.prototype=newAnimal("Henry");
  3. vardog=newDog();
  4. dog.jump();
  5. dog.eat();

显然,如果代码没敲错的话,应该可以看到提示“Henry is jumping...”,“Henry is eatting...”。

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

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

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

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

  1. functionDog(){};
  2. Dog.prototype=newAnimal("Henry");
  3. functionPig(){};
  4. Pig.prototype=newAnimal("Coco");
  5. vardog=newDog();
  6. dog.jump();
  7. dog.eat();
  8. varpig=newPig();
  9. pig.jump();
  10. pig.eat();

运行之后,因为继承了Animal类的原因,结果肯定又是“XX is jumping...”,“XX is eatting...”了,那我们要实现的,就是进行方法的重写。我们可以有下面的方式实现方法的重写。

  1. functionDog(){};//创建dog子类
  2. Dog.prototype=newAnimal("Henry");
  3. //重写dog的方法
  4. Dog.prototype.jump=function(){
  5. alert("Hi,thisis"+this.name+",I'mjumping...")
  6. };
  7. Dog.prototype.eat=function(){
  8. alert("Henryiseattingabonenow.");
  9. };
  10. functionPig(){};//创建pig子类
  11. Pig.prototype=newAnimal("Coco");
  12. //重写pig的方法
  13. Pig.prototype.jump=function(){
  14. alert("I'msorry."+this.name+"cannotjump.");
  15. };
  16. Pig.prototype.eat=function(){
  17. alert("Hi,I'm"+this.name+",I'meattingsomethingdelicious.");
  18. }
  19. vardog=newDog();
  20. dog.jump();
  21. dog.eat();
  22. varpig=newPig();
  23. pig.jump();
  24. pig.eat();

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

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

  1. vardog=newDog();
  2. //添加属性和方法
  3. dog.type="DobermanPinscher";
  4. dog.shout=function(){
  5. alert("I'ma"+this.type+".");
  6. }
  7. dog.jump();
  8. dog.eat();
  9. //调用新的方法
  10. dog.shout();

免责声明:文章转载自《JavaScript原型继承添加方法属性》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇mySql 远程连接(is not allowed to connect to this MySQL server)Android进入一个新页面,EditText失去焦点并禁止弹出键盘下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

跳转页面、alert弹窗、setTimeout使用、setInterval使用、repeater日期格式设置

cs后台跳页面: Response.Write("<script>window.location.href='http://t.zoukankan.com/Default2.aspx';</script>"); 或者 Response.Redirect("Default2.aspx"); cs后台弹窗提示:  Response.Wr...

layer弹出层框架alert与msg详解

layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer。    ...

js 弹出确认 取消对话框

//删除房源信息 functiondeleteHouse(){ var id=$(this).parent().parent().find(".checkbox").val(); console.log(id); //alert("确定要删除"+id+"吗?"); if(confirm('确定要删除吗?')){...

jquery和js的几种页面加载函数的方法以及执行顺序

参考博客:http://www.cnblogs.com/itslives-com/p/4646790.html        https://www.cnblogs.com/james641/p/7838373.html 执行顺序:A>B>C>D>E $(function() { alert("A"); }); $(doc...

Vue在HTML页面中的脚手架

<script src="http://t.zoukankan.com/assets/js/vue.js"></script> <script src="http://t.zoukankan.com/assets/js/vue-resource.min.js"></script>...

this.$alert 方法

this.$alert('确认删除吗', '提示', { confirmButtonText: '确定', callback: action => { this.function() } });...