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. odoo里的javascript学习---自定义插件
			
    插件效果图 定义js odoo.define('auto_widget',function(require){ "use strict"//通过扩展AbstractField来扩展 ...
    
			
    2. 
						
  2. 【对线面试官】Kafka基础入门
			
    <对线面试官>系列目前已经连载33篇啦,这是一个讲人话面试系列 [对线面试官]Java注解 [对线面试官]Java泛型 [对线面试官] Java NIO [对线面试官]Java反射 &am ...
    
			
    3. 
						
  3. 论文笔记：（2019）GAPNet: Graph Attention based Point Neural Network for Exploiting Local Feature of Point Cloud
			
    目录 摘要 一.引言 二.相关工作 基于体素网格的特征学习 直接从非结构化点云中学习特征 从多视图模型中学习特征 几何深度学习的学习特征 三.GAPNet架构 3.1 GAPLayer 局部结构表示  ...
    
			
    4. 
						
  4. 预训练语言模型的前世今生 - 从Word Embedding到BERT
			
    预训练语言模型的前世今生 - 从Word Embedding到BERT 本篇文章共 24619 个词,一个字一个字手码的不容易,转载请标明出处:预训练语言模型的前世今生 - 从Word Embeddi ...
    
			
    5. 
						
  5. LeetCode入门指南 之 链表
			
    83. 删除排序链表中的重复元素 存在一个按升序排列的链表,给你这个链表的头节点 head ,请你删除所有重复的元素,使每个元素 只出现一次 .返回同样按升序排列的结果链表. class Soluti ...
    
			
    6. 
						
  6. 数据库比对工具SQL(表、字段、触发器、索引、视图、存储过程)
			
    做一个数据库比对小工具,把SQL做一个笔记 SELECT object_id AS ID --表ID,'表' sType,Name --表名FROM sys.tablesORDER BY Name-- ...
    
			
    7. 
						
  7. 前阿里技术总监手打：452页Android Framework 精编内核解析
			
    众所周知,Android是一个基于Linux实现的操作系统.但对于Linux内核来说,Android也仅仅只是一个运行在内核之上的应用程序,与其他运行在内核之上的应用程序没有任何区别. 所以Andro ...
    
			
    8. 
						
  8. 单机版搭建kubernetes(K8s)
			
    准备 云原生的概念越来越火,忍不住去看了看kubernetes,初次接触,晕晕乎乎的,于是不管三七二十一,先搭建个单机版的再说(没钱买服务器,目前也懒得装虚拟机),跑起来也算是第一步吧.网上教程一顿搜 ...
    
			
    9. 
						
  9. JVM学习笔记-第三章-垃圾收集器与内存分配策略
			
    JVM学习笔记-第三章-垃圾收集器与内存分配策略 tips:对于3.4之前的章节可见博客:https://blog.csdn.net/sanhewuyang/article/details/95380 ...
    
			
    10. 
						
  10. Linux进程理解与实践（四）wait函数处理僵尸进程
			
    Wait的背景 当子进程退出的时候,内核会向父进程发送SIGCHLD信号,子进程的退出是个异步事件(子进程可以在父进程运行的任何时刻终止) 子进程退出时,内核将子进程置为僵尸状态,这个进程称为僵尸进程 ...
    
			
    11.