ES6.Class

   编程语言语言，都有关于类的定义和使用，java，C#，C++。使用class的关键字，js之前的版本，没有用。保留字，ES6启用了该关键字。

一.传统方法

通过构造函数定义，并生成对象。

 //定义传统的类，js之前的写法
        function Person(name,salary) {
            this.name=name;
            this.salary=salary;
        }
        //定义它的方法
        Person.prototype.toString=function () {
            return this.name+","+this.salary;
        }
  //如何来获取
        let p1=new Person('张晨光',90000);
        console.log(p1.toString());
        //这时候，用的是function来定义一个类。

和传统面向对象语言，写法差别很大，很难受。

接下来，看看ES6是如何写的呢？

二.ES6类的定义：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //使用ES6来定义类,启用了之前的保留字class
        class Person{
            //构造方法
            constructor(name,salary){
                this.name=name;
                this.salary=salary;
            }
            //其他方法
            toString(){
                    return `${this.name}，${this.salary}`;
             }
        }
        //使用该类
        let p2=new Person('张晨光老师',100000);
        console.log(p2.toString());
        //这种方式，看起来就是面向对象，ES6更加面向对象;
        console.log(typeof(Person));  //输出的是一个function
        //证明ES6，class对应了之前的function
        let result=(Person===Person.prototype.constructor);
        console.log(result);
        //证明类本身指向了构造方法.
    </script>
</head>
<body>

</body>
</html>

三.静态方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //class Person{}
        const Person=class{
            constructor(name,salary){
                this.name=name;
                this.salary=salary;
            }
            //自定义方法
            showName(){
                return `姓名:${this.name}`;
            }
            showSalary(){
                return `工资：${this.salary}`;
            }
            //静态方法
            static isFee(salary){
                if(salary<5000)
                    return '不用交税';
            }
        }  //类定义的结束

        //调用之
        let p3=new Person('张晨光',4500);
        console.log(p3.showName());
        console.log(p3.showSalary());

        //调用类的静态方法;类名.静态方法
        console.log(Person.isFee(4500));
    </script>
</head>
<body>

</body>
</html>

使用静态方法的时候，语法

static 方法名(参数){}

调用的时候：类名.方法名()

四.继承

基本语法

子类 extends 父类，在之前ES5通过修改原型链模式实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //人的定义
        class Person{
            //构造方法的定义
            constructor(name,salary){
                this.name=name;
                this.salary=salary;
            }
            //自定义方法
            showName(){
                return `姓名:${this.name}`;
            }
            showSalary(){
                return `工资：${this.salary}`;
            }

        }
        //定义一个子类
        class YellowPerson extends  Person{
            //子类如果没有定义construtor,则该方法会默认添加上去，即任何子类都有constructor()
            //constructor(...args){ super(...args) }
            //这时候，子类需要针对父类进行加工处理
            constructor(name,salary,skin){
                super(name,salary);//super()使用，在子类构造方法最前面;
                this.skin=skin;  //
            }
            //子类增加一个自己的方法;
            showInfo(){
                //通过super.方法，来调用父类的方法
                return super.showName()+","+super.showSalary()+",肤色："+this.skin;
            }
        }
        //调用之;
        let yp=new YellowPerson('张晨光',8888,'青铜色');
        //测试实例;
        //console.log(yp instanceof YellowPerson);  //yp是不是子类的实例
        //console.log(yp instanceof Person);  //yp是不是父类的实例
        console.log(yp.showInfo());
    </script>
</head>
<body>

</body>
</html>

总结：

1.ES6类定义的语法，使用class 类名{

	//构造方法

//自定义方法

}

2.ES6 静态方法的定义和使用

3.ES6 子类继承父类的语法和使用