JS——ES6 class类和继承及其实际运用

1、类的定义

不同于ES5使用构造函数来定义类，ES6中使用class关键字来定义类，并且类中构造函数为constructor，构造函数中使用this为构造函数添加实例成员：

            class Person{
				constructor(name,age) {
				    this.name = name;
					this.age = age;
				}
				
			}

2、类的构造函数和其他属性

（1）类的构造函数：一个类最多可以写一个构造函数，函数名只能是constructor；只有创建对象时构造函数才会被调用（使用new）；构造函数可以带参数；当一个类没有设置构造函数时，会有一个默认构造函数，函数体为空；只要写了构造函数就不存在默认构造函数。

使用new关键字通过类创建实例化对象，一定会调用构造函数，并且类仅能通过new来创建对象
构造函数中的this指向创建出来的实例化对象，可以通过对象名.变量名访问构造函数中的变量

            class Person{
				constructor(name,age) {
				    this.name = name;
					this.age = age;
				}
				
			}
			let person1 = new Person('zhang',10);
			console.log(person1.name,person1.age);

（2）在类中添加原型方法：不同于ES5，ES6类中添加原型方法不用function，类中的方法也没有prototype属性，类中直接使用函数名来定义原型方法；在原型方法中使用this.变量名可以访问构造函数中的变量(实例成员)：

在类外可以通过prototype添加原型成员，但是这中方法不推荐

                class Person{
				constructor(name,age) {
				    this.name = name;
					this.age = age;
				}
				say(word){
					console.log(`${this.name}say:${word}`);
				}
				
			}
			 //不合适的方法：
            Person.prototype.showMax = ()=>{
               console.log("在类外添加原型成员");
            }
			let person1 = new Person('zhang',10);
			console.log(person1.name,person1.age);
			person1.say('hello');

（3）类中方法重载：不同于java，在JS中，构造函数不可重载；方法不可重载否则仅最后一个生效；建议不要重载构造函数和其他方法；同时，在Es6中不能添加私有成员变量和私有成员方法；

            class Stu {
            constructor(){
                this.name = 'zhang';
                this.age = 40;
            }
            //最好的方法：
            show = ()=>{
                console.log("对象中的原型成员");
            }
        }
        let student = new Stu();
        student.show = ()=>{
            console.log("重载后进这个方法生效");
        }

（4）类中的静态方法：静态成员要在类外面添加，在静态方法中最好不要使用this，因为此时调用时不是new出来的对象而是原来的类：

         class Stu{
            constructor(name,age){
                this.name = name;
                this.age = age;
                console.log(this.name,this.age);
            }
            static show(){
                // console.log(this.name,this.age);//不推荐的方法
                console.log(Stu.max);
            }
        }
        Stu.max = 30;
        Stu.show();
        let student = new Stu('zhang',20);

3、类的继承

继承就是：子类继承父类成员，可以访问继承下来的父类成员

在JS中：

类没有写继承代码就自动继承Object
使用extends指定要继承的类

        class Person{
            show(){
                console.log("父类方法");
            }
        }
        class Teacher extends Person{ }
        let teacher_1 = new Teacher();
        teacher_1.show();//父类方法

super()：用于调用父类构造函数，使用时，super()永远放在最前面（创建子类对象时，会自动先创建父类对象）；super可以带参数；默认继承Obbject时不写super；当父类中的构造函数有参数时，子类也可以不写构造函数，但是继承下来的对象成员变量的值为undefined；

           class Person{
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
            show(){
                console.log("父类方法");
            }
        }
        class Teacher extends Person{
            constructor(name,age,sex){
                super(name,age);//要写在最前面
                this.sex = sex;
            }
         }
        let teacher_1 = new Teacher('zhang',20,'男');
        teacher_1.show();//父类方法

super也可以用于原型方法：super不可以访问父类中的实例成员（包括父类中的实例成员变量和实例成员方法）；super只能出现在原形成员方法中，不能出现在实例成员方法中；要调用被重写的父类方法时，使用super.方法名(…)；

              class Person {
				constructor(name, age) {
					this.name = name;
					this.age = age;
				}
				show() {
					console.log("父类方法");
				}
			}
			class Teacher extends Person {
				constructor(name, age, sex) {
					super(name, age);
					this.sex = sex;
				}
				show(){
					super.show();//去调用了父类中的原型方法
					console.log('子类方法还调用了父类方法');
				}
			}
			let teacher_1 = new Teacher('zhang', 20, '男');
			teacher_1.show(); //父类方法 and 子类方法还调用了父类方法

instanceof：如果对象属于父类返回true否则返回false

例如上例：

        console.log(teacher_1 instanceof Person);//true
        console.log(teacher_1 instanceof Teacher);//false

重写overwrite和重载overload：子类可以重写父类中方法(包括对象成员方法和原形成员方法)，即子类中写出的方法的名字和父类中的方法名字相同；子类中方不重写父类中方不时，子类对象调用方法只会调用到子类中的方法，父类中被重写的方法被隐藏了；

4、类与继承在实际开发中的使用：

在类的构造函数中使用this创建实例变量
不创建实例方法，只创建原型方法和静态方法
不创建静态变量
少写静态方法
每一个子类都要写构造方法
子类的构造方法中，super放在第一条