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. R语言客户端RStudio快捷键大全
			
    Console Description Windows & Linux Mac 将光标定位到控制台 Ctrl+2 Ctrl+2 清空控制台 Ctrl+L Command+L 将光标定位到行首  ...
    
			
    2. 
						
  2. JAVA-Scaneer对象
			
    Scanner对象 我们可以通过scanner来获取用户的输入 基本语法 Scanner s = new Scanner(System.in); nextLine():输入 import java.u ...
    
			
    3. 
						
  3. H5页面怎么跳转到公众号主页？看过来
			
    前言: 做公众号开发的小伙伴,可能会遇到这种需求: 在一个H5页面点击一个关注公众号按钮跳转到公众号主页. 听到这个需求的一瞬间,疑惑了!这不可能! 摸了摸高亮的额头!没办法,做还是要做的 开始上解决 ...
    
			
    4. 
						
  4. webRTC的标准与发展
			
    Web实时通信(WebRTC)是标准,协议和JavaScript API的集合,两者的组合可实现浏览器(对等)之间的对等音频,视频和数据共享.WebRTC无需依赖第三方插件或专有软件,而是将实时通信转 ...
    
			
    5. 
						
  5. 一文彻底搞清 Gradle 依赖【转】
			
    来源:曾是放牛娃 www.jianshu.com/p/59fd653a54d2 转自:https://mp.weixin.qq.com/s?__biz=MzA3MDMyMjkzNg==&mid ...
    
			
    6. 
						
  6. ERROR:  database "db" is being accessed by other users
			
    执行DROP DATABASE testdb;的时候提示: ERROR: database "testdb" is being accessed by other users DE ...
    
			
    7. 
						
  7. Java互联网架构师系统进阶课程学习 （4）【享学】
			
    Java互联网架构师系统进阶课程学习 (4)[享学] 4.显式锁和AQS   显式锁 Lock接口和核心方法 Lock接口和synchronized的比较 synchronized 代码简洁,Lock ...
    
			
    8. 
						
  8. 寄生线虫免疫学研究新路径！华中农业大学胡敏团队报道寄生线虫N-糖基化修饰图谱
			
    N-糖基化修饰是真核生物中一种重要的蛋白质翻译后修饰,在许多生物学过程中起着关键作用,包括蛋白质折叠.受体-配体相互作用.免疫应答和疾病发病机制等.近年来,高精度质谱技术的出现促进了糖组和糖蛋白质组的 ...
    
			
    9. 
						
  9. 得到、微信、美团、爱奇艺APP组件化架构实践
			
    一.背景 随着项目逐渐扩展,业务功能越来越多,代码量越来越多,开发人员数量也越来越多.此过程中,你是否有过以下烦恼? 项目模块多且复杂,编译一次要5分钟甚至10分钟?太慢不能忍? 改了一行代码 或只调 ...
    
			
    10. 
						
  10. Android源码解析——Handler、Looper与MessageQueue
			
    本文的目的是来分析下 Android 系统中以 Handler.Looper.MessageQueue 组成的异步消息处理机制,通过源码来了解整个消息处理流程的走向以及相关三者之间的关系 需要先了解以 ...
    
			
    11.