javascript每日必学之多态_javascript技巧

  朋友们大家好,今天我们就接着前面的内容讲,前面我们已经讲到了继承,今天我们就来讲OOP目前最后一个体现,那就是多态,因为javascript语言的灵活性,所以我们是没有办法使用接口的,所以这也给js程序带来了一定的困惑,大家也不用太着急关心这个问题,因为这些到后面ECMAScript后面的版本会给我们解决这些问题的,又扯远了,还是回到正题,OOP的多态,前面我们已经可以很明白的理解继承是什么样子的了,就是先声明一个父类,然后,我们可以写很多的子类来继承父类的属性和方法,这些我们就可以用最少的代码量,实现了与父类一样的功能,这就是继承。马上就有同学提出疑问:前面的继承我看了很久,也能有理解,但主是不知道有什么用,为什么我们要去写那么多的继承类?这个问题,立马切中要害,问得相当的关键,如果没有多态的存在,我们先前所说的继承还真没什么用,因为我们所有的继承类都是一模一样的复制,没有什么特点。举个例子:

我们可以很明显地就看出问题来了,熊猫A,熊猫B与父类的熊猫完全一样,虽然,我们可以很轻松写很多个子类来,但是,这并没有什么用,我们就直接使用父类的属性和方法,就能达到我们的目的,对,这样说,感觉OOP的继承没有什么用了,前面我们才学到的知识,不会就这样浪费了吧,哈哈,不要怕,前面只要只是你所学到的东西,完全没有白学,下面我们就来讲继承的补充,多态,看示例图:

不管是人类,还是其他动物,不断的繁衍,不断的进化,每一个后代看似一样,其实又不一样,或多或少都有自己的独特的属性或者行为,现在熊猫A在某种特别的情况下学会了洗澡,它有自己的卫生属性,而熊猫B是个高手,学会了泡妞(大爷的,老子都没学会,它学会了),它有了自己的魅力属性,这样我们就可以很清晰看出来,当我们需要写一个子类来继承父类的时候,它一定是具有和父类相同行为或者属性而且还一定具有自己独特的行为或者属性,这样我们就省去了相同行为或者属性的代码编写(OOP思想带来的好处再一次被体现),下面我们来看实例代码:

//遗传继承函数
function Extend(Children,Parent){
  for(var p in Parent){
    if(typeof Children[p] == "undefined"){
      Children[p] = Parent[p];
    }
  }
}

//熊猫父类
function Panda(){
  //颜色
  this.color = "黑色交错";
  //健康值
  this.health = 100;
  //可爱值
  this.lovely = 80;
  //年龄
  this.age = "3岁";
}
//吃
Panda.prototype.Eat = function(){
  console.log("吃竹子");
}
//拉
Panda.prototype.Shit = function(){
  console.log("拉了一坨翔");
}
//睡
Panda.prototype.Sleep = function(){
  console.log("美美地睡了一整天");
}
//交配
Panda.prototype.Mating = function(){
  console.log("熊猫的爱爱也是为了下一代嘛");
}

//熊猫A
function Panda_A(){
  //讲卫生度
  this.lovehealth = 60;

  Extend(this,new Panda());
}
//洗澡
Panda_A.prototype.Bath = function(){
  console.log("为了不生病,就得讲卫生,我去洗澡了");
  //洗一次澡,讲卫生程度 + 1
  this.lovehealth += 1;
}

//熊猫B
function Panda_B(){
  //魅力值
  this.charm = 90;

  Extend(this,new Panda());
}
//泡妞
Panda_B.prototype.GetGirls = function(){
  console.log("为了族群的繁荣,我就先去泡妞去了,谁叫我的魅力这么高呢?");
  //泡一次妞,魅力值 - 1
  this.charm -= 1;
}

下面我们看一看示例,是不是跟前面描述的一样?

不管是父类的实例,还是子类的实例,都能正常的使用父类(共有)的属性及行为函数,下面再来看看特有的呢?

再来大家最关心的那个行为还没测试,就是熊猫B可以泡妞,不再调大家的口味了,立马测试

能过上面的示例,我们已经知道多态是怎么一回事了,现在又有同学发问了:前面我们已经可以实现多态了,只是看到多了一些特有的属性和行为,那么可不可以改变一些原有属性及行为呢?因为要模拟对象,我们就要做到尽量相同的模拟,就像,如果还有一个熊猫C类,他们进化得更高级了,已经不用吃竹子了,居然学人开始吃饭了:

//熊猫C
function Panda_C(){

  Extend(this,new Panda());
}
//吃
Panda_C.prototype.Eat = function(){
  //吃饭
  console.log("我们要进化得比人类更高级,所以我们就开始吃饭了,不再吃竹子!!");
}

看到了吧,只要是与父类已经不相同的属性或者行为,我们都可以通过重写的方式来进行覆盖,从而实现子类变态的特殊要求。

  总结一下,今天我们就补充前面继承的思想,从而实现了多态的模拟,OOP思想,我们也先就告一段落,相信大家已经对OOP有了自己的认识,就是把代码模拟成对象来进行编写,这样有两个好处:

1、把代码的重用率提高了,提高了工作效率。

2、代码已经被模拟在对象,这样有条理代码方便了我们管理,和后期维护及扩展。

以上就是本文的全部内容,希望对大家的学习有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
多态
javascript 多态、javascript 函数多态、javascript每日一练、javascript技巧、javascript高级技巧,以便于您获取更多的相关知识。

时间: 2024-12-18 03:07:16

javascript每日必学之多态_javascript技巧的相关文章

javascript每日必学之循环_javascript技巧

朋友们大家好,今天,我们继续接着前面的内容讲,前们我们已经讲了条件分支,今天我们就讲循环,顾名思义就是,重复执行相同的操作,正常循环是受程序控制的,不正常的情况,就会出现死循环,那就是我们的代码中出现bug,那样,我们还要学会调式bug,等我们先把基础知识讲完了之后,我还会专门用篇幅来讲解浏览器里面的调试,那种程序就会在我们掌控之中,这才是我们想要结果. 循环包括的结构体有 for , while , do--while,for循环有两种形式的存在,一种是数字变量变化所引起的循环,另一种就是fo

javascript每日必学之封装_javascript技巧

朋友们好,前面我们已经讲解了有关javascript的基础,从今天的内容开始,我们就要开始讲有关封装的内容了,这里,我们就一点一点地接触到OOP(面向对象编程)了,如果作为一门语言使用的程序员连OOP都不知道是什么,或者只听说过,自己没有去领悟,不能写出面向对象的代码,那么也没有学习程序的必要了,下面我先会给大家详细的介绍面向对象是什么,面向过程是什么,要想弄明白面向对象,首先我们就必须知道面向过程.在你已经弄明白了面向过程之后,我们也不能盲目地为了OOP而OOP,那样只会是做一些徒劳的事,因为

javascript每日必学之继承_javascript技巧

朋友们大家好,我们今天这一讲就接着前面的封装继续讲解,今天就是在前面内容上面的升级,OOP思想中的继承,我们就先来解释一下继承到底是什么意思,我们在什么地方会用到继续. 继承就是,后代继续祖先的一系列属性,行为.后代仍然算是与祖先同族,下面我们再用一些具体描述,来理解一下什么是继承 中国人,跟美国人都是 继承自 人类祖先,所以我们具有相同的属性行为,但是还有一定的差异,后面我们们将继续讲到的多态,所以通过上面的示例图,我们可以清晰的知道,人与人之前其实大同小异,所以我们再看看下面的示例代码,我们

javascript每日必学之运算符_javascript技巧

读者朋友们好,前面我已经大概的了解了Javascript的作用以及一些基本的函数声明与变量声明,今天我们就接着前面的内容讲解,我们就来看一下javscript的逻辑(正序,分支,循环)以及一些简单的运算符 下面我们就来讲一些简单的操作运算符 + 加号:1.用来计算两个数字相加之和,2.用来拼接两个字符串 - 减号:1.用来计算两个数字相减之差,2.用在一个数字前面来标识成一个负数 * 乘号:用来计算两具数字相乘之积 / 除号:用来计算被除数除以除数后,所得的商 % 取余:用来计算被除数除以除数后

JavaScript每天必学之事件_javascript技巧

其实这篇文章挺早之前就写了,但是由于sf保存方面的bug,所以当时写了一大堆,结果没保存,觉得这个没写完是个不小的遗憾,今天正好有空,就给补充下了,也正好给我的javascript学习总结做一个完结篇.  这里,主要讨论一下js相关的事件--  事件处理程序  在DOM中定义了一些事件, 而响应某个事件的函数就叫事件处理程序(或事件侦听器).事件处理程序的名字一般以"on"开头,例如:onclick等  事件冒泡与捕获  事件流指的是页面中接收事件的顺序,IE,火狐和chrome浏览器

javascript每日必学之条件分支_javascript技巧

大家好,我们今天接着前面的讲,前面已经大概了讲了一下运算符,今天的任务主要就是讲解逻辑条件分支,循环. 我们先就来模拟一个逻辑块,就用我们经常接触到的买车票来说吧,车票的价格对不同的人价格是有差别的,但是我们都是一样的去执行买票这个行为,我们就可以把买票写成一个函数BuyTicket //代码 function BuyTicket(){ console.log("请付款200元"); } 大家看到了这个函数体,其实是有缺陷的,我们每个人去买票的时候,都是执行这一个函数,如果是军人,或者

javascript每日必学之基础入门_javascript技巧

        从今天开始,我将带领新朋友们,从了解javascript开始,一步一步地进阶到大神境界,别的不废话,现在开始,我们就一点一点地从入门阶段开始. 我们还是介绍一下javascript的身世,不然,大家会对javascript存在非常大的误解,它的产生历史,我们就过于多说,我也记不住,上学开始历史也没及过格 js与我们经常用来开发后台程序的java语言不是什么亲戚,他们的使用范围也是相差非常远,js只是用在html,用来对document节点进行增删改查,构建与服务器通讯的一种解释性

Bootstrap每天必学之表格_javascript技巧

本文主要讲解的是表格,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的各种列表的展示,有时候也会因为用户或者老板的需求而感到头疼.下面我们来看一下,Bootstrap已经为我们准备那些类型的表格呢?如下所示: 1.基本案例 2.条纹状表格 3.带边框的表格 4.鼠标悬停 5.紧缩表格 6.状态class 7.响应式表格 8.总结 基本案例  为任意<table>标签添加.table可以为其赋予基本的样式-少量的内补(padding)和水平方向的分隔线.这种方式看起来很多余!?但是

Bootstrap每天必学之导航_javascript技巧

1.导航(基础样式) 导航对于一位前端人员来说并不陌生.可以说导航是一个网站重要的元素组件之一,可以便于用户查找网站所提供的各项功能服务.导航的制作方法也是千奇百怪,五花八门.在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航. 在Bootstrap框架将导航独立出来成为一个导航组件,根据不同的版本,可以找到对应的源码: LESS版本:对应的源文件是navs.less Sass版本:对应的源文件是_navs.scss 编译后版本:对应源码是bootstrap.css文件第34