extends 子类的继承

super(); 调用父类的构造方法，只能在子类中执行

继承可以让子类获得父类的方法 属性，可以扩充 增加新的方法 属性等

父类（基类）——被继承的类

子类——继承后的类

1.extends（关键字） 子类的继承 ----------extends +要继承的类名

2.super(参数); 实际是调用父类构造函数， 只能在子类中执行； 必须在类中的构造函数constructor中使用super( )且必须在this前；

super(参数）---参数传给父类；

3.子类可以调用父类的方法

super的不仅可以用来访问对象的原型，还可以作为父类的构造函数来调用，所以在继承的时候，在子类的constructor中，调用super方法，可以让子类把父类的属性和方法继承过来，这样子类才会拥有父类的属性和方法（走一遍父类的属性，就是为了继承它们）。

在class的继承中，只能使用super，不能使用“Object.setPrototypeOf（）”，这是es6规定好的语法，我们只能按照它的规定来写，将其当成固定的语法记住就行。
 
 
定义在类中的方法是添加到当前类对应的原型对象上，并不会影响到父类，所以其他子类也无法使用第一个子类中的方法。


 


 




一般在class类中，this指向实例化后的对象




 




<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>ES6中class的继承</title>

    </head>

    <body>

        <script>

            //继承

            //继承可以让子类获得父类的方法  属性

            //可以扩充  增加新的方法 属性等

            //父类(基类) —— 被继承的类

            //子类  ——  继承后的类

            //继承在Es6中的关键字  extends

            class Human{

                constructor(name,age,sex,hobby){

                    this.name = name;

                    this.age = age;

                    this.sex = sex;

                    this.hobby = hobby;

                }

                desc(){

                    //数组的解构赋值看顺序,对象的解构赋值看变量名是否一致

                    const { name, age, sex, hobby } = this;  //这里的this是什么？

                    //使用解构的方式获取到,后面才能打印

                    console.log(`我叫${name},性别${sex},爱好${hobby},今年${age}岁`)

                }

                eat(){

                    console.log('吧唧吧唧')

                }

            }

            //子类,必须在子类的构造函数中调用super()

            class FEEngineer extends Human{

                constructor(name,age,sex,hobby,skill,salary){

                    //super其实就是父类的构造函数

                    //在子类的构造函数中,必须在调用this之前去调用super

                    super(name,age,sex,hobby);

                    this.skill = skill;

                    this.salary = salary;

                }

                say(){

                    console.log(this.skill.join(','))

                }

            }

            const feer = new FEEngineer(

            '张三',

            24,   //为什么age写'24'会报错？

            '男',

            ['打游戏','写代码'],

            ['es6','vue','react','webgl'],

            '1w')

            console.log(feer);

            feer.desc();

            feer.eat();

            feer.say()

            //extends的应用  网游中的职业系统

            //基类 基础的职业类  代表一个角色

            //子类  代表一个具有职业的角色

            class Character{

                constructor(name,sex){

                    this.name = name;

                    this.sex;

                    this.skill = [];

                }

            }

            class Wizard extends Character{

                constructor(name,sex){

                    super(name,sex);

                    this.initSkill();   //还没有实例化Wizard时，initSkill已经添加到原型对象上了，所以不管类中initSkill方法是写在constructor前面还是后面，都可以在constructor中通过this访问到

                }

                initSkill(){

                    this.skill = [

                        {

                            name:'阿瓦达索命',

                            mp:666,

                            level:999

                        },

                        {

                            name:'守护神咒',

                            mp:333,

                            level:888

                        }

                    ];

                }

            }

        </script>

    </body>

</html>
                                                                                                                                                        








												


											
ES6中class的继承的更多相关文章
	

    
						
  1. ES6中的类继承和ES5中的继承模式详解
		
    1.ES5中的继承模式 我们先看ES5中的继承. 既然要实现继承,首先我们得要有一个父类. Animal.prototype.eat = function(food) { console.log(th ...
    
		
    2. 
						
  2. ES6中的CLASS继承
		
    ES6中的CLASS继承:https://www.jianshu.com/p/3d3d52b47762 es6 javascript的Class 类的继承:https://blog.csdn.net/ ...
    
		
    3. 
								
  3. ES6中Class的继承关系
		
    es5实现中,每个对象都有__proto__属性(也就是关系图中[[prototype]]属性),指向对应的构造函数的prototype.Class 作为构造函数的语法糖,同时有prototype属性 ...
    
		
    4. 
						
  4. ES6中的类
		
    前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScri ...
    
		
    5. 
						
  5. ES5和ES6中的继承 图解
		
    Javascript中的继承一直是个比较麻烦的问题,prototype.constructor.__proto__在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固.ES6中又新增了c ...
    
		
    6. 
						
  6. ES5和ES6中对于继承的实现方法
		
    在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
    
		
    7. 
						
  7. ES6中的类和继承
		
    class的写法及继承 JavaScript 语言中,生成实例对象的传统方法是通过构造函数.下面是一个例子     function Point(x, y) {  this.x = x;  this. ...
    
		
    8. 
						
  8. ES5与ES6中的继承
		
    ES5继承在ES5中没有类的概念,所以一般都是基于原型链继承,具体的继承方法有以下几种: 父类: function Father (name) { this.name = name || 'sam'  ...
    
		
    9. 
						
  9. ES5和ES6中的继承
		
    看到一篇写的非常好的关于js继承的文章,其中对构造函数.原型.实例之间的关系的描述十分透彻,故转载作者文章以随时学习,并供大家共同进步! ES5 ES5中的继承,看图: function Super( ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python框架之Flask
			
    介绍:Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 . WSGl:Web Server Gateway ...
    
			
    2. 
						
  2. 第七篇 -- 常用界面组件的使用（QSlider和QProgressBar）
			
    首先画个图 ui_proBar.py # -*- coding: utf-8 -*- # Form implementation generated from reading ui file 'ui_ ...
    
			
    3. 
						
  3. Treestar Flowjo 10.6.2 for win64安装破解教程
			
    Treestar FlowJo v10.6.2是一款极其优秀好用的流式细胞数据分析工具,通过图像分析细胞的各种变化,利用软件自带的分析功能,结合细胞模型创建合理的数据分析平台.本教程提供其安装包.注册 ...
    
			
    4. 
						
  4. IBM SPSS Statistics 26.0 Mac Windows Linux安装破解教程
			
    IBM SPSS Statistics 26.0是IBM公司推出的一款用于统计学分析运算.数据挖掘.预测分析和决策支持任务的软件产品及相关服务的程序. 下载 windows/mac/linux IBM ...
    
			
    5. 
						
  5. 图解 HTTP 连接管理
			
    熟悉我的小伙伴都知道,我之前肝了本<HTTP 核心总结>的 PDF,这本 PDF 是取自我 HTTP 系列文章的汇总,然而我写的 HTTP 相关内容都是一年前了,我回头看了一下这本 PDF ...
    
			
    6. 
						
  6. ES6新特征
			
    1.块级作用域 {   }  就是块级作用域,还包括if.else.for.while...下都属于块级作用域. let 声明的变量不存在变量的提升,不允许let反复声明同一个变量:块级作用域下let ...
    
			
    7. 
						
  7. 4.10 Python3 进阶 - 迭代器 & 生成器
			
    >>返回主目录 源码 from typing import Iterable, Iterator # 可迭代对象:字符串.列表.元组.字典.集合.range().enumerate()等  ...
    
			
    8. 
						
  8. 物理机安装ESXi并优化部署虚拟机
			
    物理机配置 CPU,BIOS中启用虚拟化(VT-X) 内存和硬盘,内存尽量大.硬盘最好SSD,内存的大小和硬盘的速度直接决定了虚拟机运行的快慢 网络,至少一块千兆网卡(vSphere7.0版本以后支持 ...
    
			
    9. 
						
  9. React Native 启动流程简析
			
    导读:本文以 react-native-cli 创建的示例工程(安卓部分)为例,分析 React Native 的启动流程. 工程创建步骤可以参考官网.本文所分析 React Native 版本为 v ...
    
			
    10. 
						
  10. Linux服务器下JVM堆栈信息dump及问题排查
			
    #dump 方法栈信息 jstack $pid > /home/$pid/jstack.txt #dump jvm内存使用情况 jmap -heap $pid > /home/$pid/j ...
    
			
    11.