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. JS文件延迟和异步加载：defer和async属性
			
    -般情况下,在文档的 <head> 标签中包含 JavaScript 脚本,或者导入的 JavaScript 文件.这意味着必须等到全部 JavaScript 代码都被加载.解析和执行完以 ...
    
			
    2. 
						
  2. shell脚本(10)-流程控制while
			
    一.while循环介绍 while循环与for一样,一般不知道循环次数使用for,不知道循环的次数时推荐使用while 二.while语法 while [ condition ] #条件为真才会循环, ...
    
			
    3. 
						
  3. Pelles C 五光十色中的一抹经典
			
    我只是一个程序员,没有多少文化修养,根本不会组织出多么精彩动人的辞藻,所以废话不多说,开整. 前段时间,我开始了自己的毕业设计项目,项目的主题和内容是围绕数码防伪追溯原理制作一个识别装置,而这个装置并 ...
    
			
    4. 
						
  4. JS通用校验工具
			
    将以下form的校验内容存放到路径中 1 // 是否包含<script> 2 export function checkScript(rule, value, callback) { 3  ...
    
			
    5. 
						
  5. nacos Failed to obtain JDBC Connection 连接异常
			
    在conf/目录下,将application.properties.example 改名为bootstrap.properties 将连接数据库信息添加到末尾 # db mysql spring.da ...
    
			
    6. 
						
  6. intouch 开发源程序加密方法
			
    在先前项目中,因为同行竞争被拷贝走了源程序代码,以至于被上司责备,故而亡羊补牢对intouch(10.1老版本进行源代码加密探索)整理方法如下. 1.intouch wondermarker打开源程序 ...
    
			
    7. 
						
  7. tp3 联表查询
			
    联表查询D("column") ->field("{$DbPrefix}column.pid,{$DbPrefix}news.*") ->where ...
    
			
    8. 
						
  8. 论文笔记：（ICML2020）On Learning Sets of Symmetric Elements
			
    目录 摘要 一.引言 二.先前的工作 三.基础 3.1 符号和基本定义 3.2 G-不变网络 3.3 描述等变层 3.4 Deep sets 四.DSS层 4.1 对称元素集合 4.2 等变层的表征  ...
    
			
    9. 
						
  9. 根据随身固态U盘卷标搜索U盘盘符并打开文件的批处理脚本.bat 徐晓亮 595076941@qq.com 2019年12月19日6点50分
			
    @Echo offRem 根据随身固态U盘卷标搜索U盘盘符并打开文件的批处理脚本.batRem 徐晓亮 595076941@qq.com 2019年12月19日6点50分 Rem 此批处理脚本源代码的 ...
    
			
    10. 
						
  10. Windows影子用户创建与3389连接
			
    #当获得一条shell后,可以创建一个影子用户,通过影子用户可以行驶正常用户的所有权限与功能,并且只可在注册表中被检测出来---(应急响应注册表很重要) 1.首先需要拥有权限创建一个Administr ...
    
			
    11.