ES6中class的继承

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的继承

最新文章

热门文章