1. 简单的多态
  2. 多态:
  3. 1.同一个接口,在不同情况下做不一样的事情;相同的接口,不同的表现;
  4. 2.接口本身只是一组定义,实现都是子类里面;需要子类去实现的方法(子类只需重写与父类同名的方法,即可达到覆盖的效果),若子类有跟父类同名的方法,则会直接走子类的方法,不会走父类的;
  5. 3.非静态方法中,仍然子类可通过super..方法名( )(举例:super.say ),来调用父类的方法(supe指向的事父类的原型)
  6.  
  7. 重载:根据函数的参数类型,参数个数
  8. 作用:为一个函数提供了更丰富的行为


  1. js的重载和其他语言的重载是完全不一样的概念。因为js是一门弱类型语言, JS中函数可以传入任意类型、任意个数的参数,通通可以通过在函数内使用this.arguments获得。这样,就无法实现同名函数参数列表不同实现不同功能。 而且js不是一个面向对象的语言, 即使在ES6中引入了Class类的概念, 但这只是一种语法糖, js并没有实现真正的面向对象。 这里的重载其实可以简单的理解就是为函数提供更丰富的行为
 
 
 
  1. 1. 父类的原型对象,是指父类的属性prototype,二者不是一个东西,原型对象prototype上可以保存父类的一些方法(es6中,父类的属性不放在原型对象上)。
  2.  
  3. 2. 父类的原型对象的方法,是在constructor外面定义的,
  4.  
  5. 2.“父类自身的方法”,则是直接在类身上定义的方法,
  6. 如果是指“父类原型上的方法”,则是在constructor外面定义的(第一张图);如果是指“父类构造函数上的方法”,则是指在constructor里面定义的,
  7. es6的构造函数constructor相当于es5的构造函数本身,它俩的作用都是给实例添加属性,与es5的构造函数的原型对象prototype上的constructor不是一个东西。
  1. super方法,用来继承父类,所以super里的参数,是实例的属性,在class外面,可以被实例直接访问

//多态就是同一个接口,在不同情况下做不一样的事情。即相同的接口,不同的表现
//接口本身只是一组定义,实现都是在类里面.可以直接理解成需要子类去实现的方法,子类只要重写一个和父类同名的方法,就可以达到一个覆盖的效果


//多态的优点,1、提高类的扩充性与灵活性
//2,暴露接口

  1. //重写
  2. class Human{
  3. say(){
  4. console.log('我是人')
  5. }
  6. }
  7. //子类如果拥有父类的同名方法,则会直接调用子类的方法,不会去走父 类的
  8. class Man extends Human{
  9.  
  10. say(){
  11. super.say() //输出 我是人
  12. console.log('我是小哥哥')
  13. }
  14. }
  15. class Woman extends Human{
  16. //有的时候子类自己实现的内容,还是依赖父类中的一些操作,可以通过super.xxx的方式去进行访问
  17. say(){
  18. super.say(); //访问父类的同名方法,这里super是作为对象的形式去访问,在非静态方法中访问到的是父类的原型
  19.  
  20. console.log('我是小姐姐')
  21. }
  22. }
  23.  
  24. new Man().say();
  25.  
  26. new Woman().say();
 

重载 是根据函数的参数类型以及参数个数去做不一样的事情,

  1. class SimpleCalc{
  2. addCalc(...args){
  3. if(args.length === 0){
  4. return this.zero();
  5. }
  6. if(args.length === 1){
  7. return this.onlyOneArgument(args);
  8. }
  9. return this.add(args);
  10. }
  11.  
  12. zero(){
  13. return 0;
  14. }
  15. onlyOneArgument(){
  16. return args[0];
  17. }
  18. add(args){
  19. return args.reduce((a,b) => a+b , 0) //返回a+b,从0开始作为基数传递
  20. }
  21. }

重载的其他场景:比如一个Ajax的封装,写函数的时候非常常见

  1. function post(url,header,params){
  2. if(!params){
  3. params = header;
  4. header = null; //或者等于undefined也可以
  5. }
  6. }
  7. post('https://imooc.com',{
  8. a:1,
  9. b:2
  10. });

//一个非常实用的场景,利用重写的特性,达到预留接口的效果
//比如有方法必须要用子类去实现,如果没有就报错

  1. class Monster{
  2. constructor(name,level,model){
  3. this.model = model;
  4. this.name = name;
  5. this.level = level;
  6. }
  7. attack(){
  8.  
  9. throw Error('必须由子类来实现`attack`(攻击)方法')
  10. }
  11. }
  12.  
  13. //模型的映射表
  14. const ModelMap = {
  15. '红眼僵尸':1,
  16. '南瓜精':2,
  17. '独眼蝠':3,
  18. '绿眼僵尸':4
  19. }
  20.  
  21. class RedEyeZombie extends Monster{
  22. //这边的构造函数不用接收参数,因为它的参数开发者是非常明确地,是不需要外部传入的
  23. constructor(){
  24. //通过ModelMap['红眼僵尸']可以访问到模型对应的ID
  25. super('红眼僵尸',10,ModelMap['红眼僵尸']);
  26. }
  27. }
  28. class GreenEyeZombie extends Monster{
  29. constructor(){
  30. super('绿眼僵尸',10,ModelMap['绿眼僵尸'])
  31. }
  32. attack(){
  33. console.log('绿眼僵尸发动了攻击')
  34. }
  35. }
  36.  
  37. const gez = new GreenEyeZombie();
  38. //覆盖了父类的attack方法
  39. gez.attack();
  40.  
  41. const rez = new RedEyeZombie();
  42. //子类没有attack,所以去调用父类的,报错
  43. rez.attack();

ES6——简单的多态的更多相关文章

  1. koa2入门--01.ES6简单复习、koa2安装以及例子

    1.ES6简单复习 /*let 和 const: let用于定义一个块作用域的变量,const 定义一个常量 */ let a = 'test'; const b = 2; /*对象的属性和方法的简写 ...

  2. ES6简单语法

    ES6 简单语法: 变量声明 ES5 var 声明变量为全局变量 会变量提升 ES6 let 声明的变量为块级变量 且不能重复声明 不存在变量提升 # {}一个大括号为一个作用域 ES6 const ...

  3. es6简单介绍

    1.ECMAScript 6 简介 2.let和const命令 3.变量的解构赋值 4.字符串的扩展之模板字符串 5.正则的扩展 6.数值的扩展 7.函数的扩展 8.数组的扩展 9.对象的扩展 10. ...

  4. Vue学习【第二篇】:ES6简单介绍

    ECMAScript 6简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript ...

  5. ES6简单入门

    let let命令用来声明块级作用域. 以前的JavaScript只有全局作用域和函数作用域, 没有块级作用域. // 示例1: if (1) { var a = "hello"; ...

  6. ES6简单理解基本使用

    let const 原来的var声明标识符:可以重复声明,编译不报错. let,const声明标识符:不能重复声明,再声明编译报错. var声明的标识符作用域是当前函数,let和const是当前{块} ...

  7. ES6简单总结

    1.变量声明let和const 我们都是知道在ES6以前,var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部).这就是函数变量提升例如: functi ...

  8. ES6简单初识

    ES常用命令介绍 函数的Rest参数和扩展 Promise使用 Module.exports和ES6 import/export的使用 promise使用 promise 为了解决callback嵌套 ...

  9. es6简单小复习

    Ecmascript 6 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了. Ecmascript 是 JavaScript 语言的 ...

随机推荐

  1. POJ1723,1050,HDU4864题解(贪心)

    POJ1723 Soldiers 思维题. 考虑y坐标,简单的货舱选址问题,选择中位数即可. 再考虑x坐标,由于直接研究布置方法非常困难,可以倒着想:不管如何移动,最后的坐标总是相邻的,且根据贪心的思 ...

  2. [蓝牙嗅探-Ubertooth One] 千元开源蓝牙抓包 Ubertooth One 安装和使用

    目录 前言 1.编译 Ubertooth tools 1.1.准备工作 1.2.编译安装 libbtbb 1.3.编译安装 Ubertooth tools 1.4.Wireshark 插件 1.5.更 ...

  3. windows上传本地项目Github远程仓库(另附设置git网页链接)

    一:关于Windows平台安装git以及github的注册不在详细描述,可以参考如下经验: 安装教程:https://jingyan.baidu.com/article/925f8cb8a8e91cc ...

  4. 1.4matlab矩阵的表示

    1.4matlab矩阵的表示 矩阵的建立 利用直接输入法建立矩阵:将矩阵的元素用中括号括起来,按矩阵的顺序输入各元素,同一行的各元素之间用逗号或空格分隔,不同行的元素之间用分号分隔. 利用已建立好的矩 ...

  5. 谈谈 C++ STL 中的迭代器

    C++中的迭代器和指针 在前面的内容中我们简单讲过,STL主要是由三部分组成 容器(container),包括vector,list,set,map等 泛型算法(generic algorithm), ...

  6. vulnhub-DC:5靶机渗透记录

    准备工作 在vulnhub官网下载DC:5靶机DC: 5 ~ VulnHub 导入到vmware,设置成NAT模式 打开kali准备进行渗透(ip:192.168.200.6) 信息收集 利用nmap ...

  7. SaltStack 水平权限绕过漏洞(CVE-2020-11651)

    影响版本 SaltStack < 2019.2.4 SaltStack < 3000.2 poc git clone https://github.com/jasperla/CVE-202 ...

  8. transform——转换

    ① 位移 transform:translate(x,y);     同时x轴和y轴的位移 translate(x);        在x轴上的位移 同 translateX(x) translate ...

  9. js hook

    //cookie hook (function () { 'use strict'; var cookie_cache = document.cookie; Object.defineProperty ...

  10. Mol Cell | 张令强/贺福初/魏文毅/刘翠华揭示线性泛素化调控血管生成新机制

    景杰学术 | 报道 泛素化修饰作为主要的蛋白质翻译后修饰之一,与细胞周期.应激反应.信号传导和DNA损伤修复等几乎所有的生命活动密切相关[1].泛素分子通常含有7个赖氨酸残基,通过这些残基可以和其他泛 ...