ES6——简单的多态
- 简单的多态
- 多态:
- 1.同一个接口,在不同情况下做不一样的事情;相同的接口,不同的表现;
- 2.接口本身只是一组定义,实现都是子类里面;需要子类去实现的方法(子类只需重写与父类同名的方法,即可达到覆盖的效果),若子类有跟父类同名的方法,则会直接走子类的方法,不会走父类的;
- 3.非静态方法中,仍然子类可通过super..方法名( )(举例:super.say( ) ),来调用父类的方法(supe指向的事父类的原型)
- 重载:根据函数的参数类型,参数个数
- 作用:为一个函数提供了更丰富的行为
- js的重载和其他语言的重载是完全不一样的概念。因为js是一门弱类型语言, JS中函数可以传入任意类型、任意个数的参数,通通可以通过在函数内使用this.arguments获得。这样,就无法实现同名函数参数列表不同实现不同功能。 而且js不是一个面向对象的语言, 即使在ES6中引入了Class类的概念, 但这只是一种语法糖, js并没有实现真正的面向对象。 这里的重载其实可以简单的理解就是为函数提供更丰富的行为
- 1. 父类的原型对象,是指父类的属性prototype,二者不是一个东西,原型对象prototype上可以保存父类的一些方法(es6中,父类的属性不放在原型对象上)。
- 2. 父类的原型对象的方法,是在constructor外面定义的,
- 2.“父类自身的方法”,则是直接在类身上定义的方法,
- 如果是指“父类原型上的方法”,则是在constructor外面定义的(第一张图);如果是指“父类构造函数上的方法”,则是指在constructor里面定义的,
- es6的构造函数constructor相当于es5的构造函数本身,它俩的作用都是给实例添加属性,与es5的构造函数的原型对象prototype上的constructor不是一个东西。
- super方法,用来继承父类,所以super里的参数,是实例的属性,在class外面,可以被实例直接访问
//多态就是同一个接口,在不同情况下做不一样的事情。即相同的接口,不同的表现
//接口本身只是一组定义,实现都是在类里面.可以直接理解成需要子类去实现的方法,子类只要重写一个和父类同名的方法,就可以达到一个覆盖的效果
//多态的优点,1、提高类的扩充性与灵活性
//2,暴露接口
- //重写
- class Human{
- say(){
- console.log('我是人')
- }
- }
- //子类如果拥有父类的同名方法,则会直接调用子类的方法,不会去走父 类的
- class Man extends Human{
- say(){
- super.say() //输出 我是人
- console.log('我是小哥哥')
- }
- }
- class Woman extends Human{
- //有的时候子类自己实现的内容,还是依赖父类中的一些操作,可以通过super.xxx的方式去进行访问
- say(){
- super.say(); //访问父类的同名方法,这里super是作为对象的形式去访问,在非静态方法中访问到的是父类的原型
- console.log('我是小姐姐')
- }
- }
- new Man().say();
- new Woman().say();
、
重载 是根据函数的参数类型以及参数个数去做不一样的事情,
- class SimpleCalc{
- addCalc(...args){
- if(args.length === 0){
- return this.zero();
- }
- if(args.length === 1){
- return this.onlyOneArgument(args);
- }
- return this.add(args);
- }
- zero(){
- return 0;
- }
- onlyOneArgument(){
- return args[0];
- }
- add(args){
- return args.reduce((a,b) => a+b , 0) //返回a+b,从0开始作为基数传递
- }
- }
重载的其他场景:比如一个Ajax的封装,写函数的时候非常常见
- function post(url,header,params){
- if(!params){
- params = header;
- header = null; //或者等于undefined也可以
- }
- }
- post('https://imooc.com',{
- a:1,
- b:2
- });
//一个非常实用的场景,利用重写的特性,达到预留接口的效果
//比如有方法必须要用子类去实现,如果没有就报错
- class Monster{
- constructor(name,level,model){
- this.model = model;
- this.name = name;
- this.level = level;
- }
- attack(){
- throw Error('必须由子类来实现`attack`(攻击)方法')
- }
- }
- //模型的映射表
- const ModelMap = {
- '红眼僵尸':1,
- '南瓜精':2,
- '独眼蝠':3,
- '绿眼僵尸':4
- }
- class RedEyeZombie extends Monster{
- //这边的构造函数不用接收参数,因为它的参数开发者是非常明确地,是不需要外部传入的
- constructor(){
- //通过ModelMap['红眼僵尸']可以访问到模型对应的ID
- super('红眼僵尸',10,ModelMap['红眼僵尸']);
- }
- }
- class GreenEyeZombie extends Monster{
- constructor(){
- super('绿眼僵尸',10,ModelMap['绿眼僵尸'])
- }
- attack(){
- console.log('绿眼僵尸发动了攻击')
- }
- }
- const gez = new GreenEyeZombie();
- //覆盖了父类的attack方法
- gez.attack();
- const rez = new RedEyeZombie();
- //子类没有attack,所以去调用父类的,报错
- rez.attack();
ES6——简单的多态的更多相关文章
- koa2入门--01.ES6简单复习、koa2安装以及例子
1.ES6简单复习 /*let 和 const: let用于定义一个块作用域的变量,const 定义一个常量 */ let a = 'test'; const b = 2; /*对象的属性和方法的简写 ...
- ES6简单语法
ES6 简单语法: 变量声明 ES5 var 声明变量为全局变量 会变量提升 ES6 let 声明的变量为块级变量 且不能重复声明 不存在变量提升 # {}一个大括号为一个作用域 ES6 const ...
- es6简单介绍
1.ECMAScript 6 简介 2.let和const命令 3.变量的解构赋值 4.字符串的扩展之模板字符串 5.正则的扩展 6.数值的扩展 7.函数的扩展 8.数组的扩展 9.对象的扩展 10. ...
- Vue学习【第二篇】:ES6简单介绍
ECMAScript 6简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript ...
- ES6简单入门
let let命令用来声明块级作用域. 以前的JavaScript只有全局作用域和函数作用域, 没有块级作用域. // 示例1: if (1) { var a = "hello"; ...
- ES6简单理解基本使用
let const 原来的var声明标识符:可以重复声明,编译不报错. let,const声明标识符:不能重复声明,再声明编译报错. var声明的标识符作用域是当前函数,let和const是当前{块} ...
- ES6简单总结
1.变量声明let和const 我们都是知道在ES6以前,var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部).这就是函数变量提升例如: functi ...
- ES6简单初识
ES常用命令介绍 函数的Rest参数和扩展 Promise使用 Module.exports和ES6 import/export的使用 promise使用 promise 为了解决callback嵌套 ...
- es6简单小复习
Ecmascript 6 ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了. Ecmascript 是 JavaScript 语言的 ...
随机推荐
- POJ1723,1050,HDU4864题解(贪心)
POJ1723 Soldiers 思维题. 考虑y坐标,简单的货舱选址问题,选择中位数即可. 再考虑x坐标,由于直接研究布置方法非常困难,可以倒着想:不管如何移动,最后的坐标总是相邻的,且根据贪心的思 ...
- [蓝牙嗅探-Ubertooth One] 千元开源蓝牙抓包 Ubertooth One 安装和使用
目录 前言 1.编译 Ubertooth tools 1.1.准备工作 1.2.编译安装 libbtbb 1.3.编译安装 Ubertooth tools 1.4.Wireshark 插件 1.5.更 ...
- windows上传本地项目Github远程仓库(另附设置git网页链接)
一:关于Windows平台安装git以及github的注册不在详细描述,可以参考如下经验: 安装教程:https://jingyan.baidu.com/article/925f8cb8a8e91cc ...
- 1.4matlab矩阵的表示
1.4matlab矩阵的表示 矩阵的建立 利用直接输入法建立矩阵:将矩阵的元素用中括号括起来,按矩阵的顺序输入各元素,同一行的各元素之间用逗号或空格分隔,不同行的元素之间用分号分隔. 利用已建立好的矩 ...
- 谈谈 C++ STL 中的迭代器
C++中的迭代器和指针 在前面的内容中我们简单讲过,STL主要是由三部分组成 容器(container),包括vector,list,set,map等 泛型算法(generic algorithm), ...
- vulnhub-DC:5靶机渗透记录
准备工作 在vulnhub官网下载DC:5靶机DC: 5 ~ VulnHub 导入到vmware,设置成NAT模式 打开kali准备进行渗透(ip:192.168.200.6) 信息收集 利用nmap ...
- SaltStack 水平权限绕过漏洞(CVE-2020-11651)
影响版本 SaltStack < 2019.2.4 SaltStack < 3000.2 poc git clone https://github.com/jasperla/CVE-202 ...
- transform——转换
① 位移 transform:translate(x,y); 同时x轴和y轴的位移 translate(x); 在x轴上的位移 同 translateX(x) translate ...
- js hook
//cookie hook (function () { 'use strict'; var cookie_cache = document.cookie; Object.defineProperty ...
- Mol Cell | 张令强/贺福初/魏文毅/刘翠华揭示线性泛素化调控血管生成新机制
景杰学术 | 报道 泛素化修饰作为主要的蛋白质翻译后修饰之一,与细胞周期.应激反应.信号传导和DNA损伤修复等几乎所有的生命活动密切相关[1].泛素分子通常含有7个赖氨酸残基,通过这些残基可以和其他泛 ...