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. 两万字Vue.js基础学习笔记（二）
			
    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
    
			
    2. 
						
  2. 传统.NET 4.x应用容器化体验（5）
			
    前面几篇都是基于阿里云ECS直接玩的,有童鞋问直接用Windows Server 2019可以玩不,本篇就为你介绍一下如何给Windows Server 2019配置Docker环境. 1 准备工作  ...
    
			
    3. 
						
  3. 记一次 .NET 某云采购平台API 挂死分析
			
    一:背景 1. 讲故事 大概有两个月没写博客了,关注我的朋友应该知道我最近都把精力花在了星球,这两个月时间也陆陆续续的有朋友求助如何分析dump,有些朋友太客气了,给了大大的红包,哈哈,手里面也攒了1 ...
    
			
    4. 
						
  4. C++第四十七篇 -- VS2017带参数启动调试程序
			
    参考链接:https://www.cnblogs.com/kileyi/p/10163269.html 举例:Test_Bluetooth.exe -help Test_Bluetooth.cpp # ...
    
			
    5. 
						
  5. redis数据类型及应用场景
			
    0.key的通用操作 KEYS * keys a keys a* 查看已存在所有键的名字 ****TYPE 返回键所存储值的类型 ****EXPIRE\ PEXPIRE 以秒\毫秒设定生存时间 *** ...
    
			
    6. 
						
  6. 剖根问底：Java 不能实现真正泛型的原因是什么？
			
    大家好,我是二哥呀! 今天我来给大家讲一下,Java 不能实现真正泛型的原因是什么? 本文已同步至 GitHub <教妹学 Java>专栏,风趣幽默,通俗易懂,对 Java 初学者亲切友善 ...
    
			
    7. 
						
  7. 2021年BI软件排名,国内外BI软件功能对比
			
    数据分析是帮助企业深入了解自身业务表现(例如正在做什么或哪块业务需要注意和改进)的重要元素.为了获得更直观的展现,数据分析BI软件可帮助公司通过报告.数据可视化.应用程序等从数据中获取决策数据支撑.没 ...
    
			
    8. 
						
  8. 强烈IDEA这些插件，让你的开发速度飞起来！
			
    大家好,我是大彬~ 俗话说:工欲善其事必先利其器.今天给大家介绍几款我自己经常用的 IDEA 插件,很强大,助力大家开发. 插件安装 以IDEA为例,进入settings->Plugins-&g ...
    
			
    9. 
						
  9. Access, Modify, Change Time of Linux File
			
    All these 3 time can be viewed by "stat " command. Access time is influenced by read opera ...
    
			
    10. 
						
  10. Git-05-文件删除与恢复
			
    删除文件 1 添加一个文件test.txt文件用于测试 2 删除文件,这样删除,工作区和版本库一致 也可以直接rm 然后在 git rm,git commit 这样也能保证工作区和版本库一致 恢复误删 ...
    
			
    11.