No.54 ES6---class类

一、class的基本语法

• ES6 提供了更接近传统语言的写法，引入了 Class(类)这个概念，作为对象的模板。
• 通过 cass 关键字，可以定义类。
• 基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已.

   <script>
        //ES5中类的表现形式
        function Person(name,age){
            this.name=name;
            this.age=age;
        }

        Person.prototype.getName = function(){
            console.log(this.name);
        }

        var p = new Person("zhagnsan",20);
        p.getName();
    </script>

　　

    <script>
        //ES6中类的表现形式
        class Person{
            constructor(name,age){
                this.name=name;
                this.age=age;   
            }

            getName(){
                console.log(this.name);
            }
            
        }

        var p = new Person("zhagnsan",20);
        p.getName();
    </script>

　

constructor方法

• constructor() 方法是类的默认方法，通过 new 命令生成对象实例时自动调用该方法。一个类必须有 constructor()方法，如果没有显式定义，一个空的constructor()方法会被默认添加。

 

类的实例：

• 生成类的实例的写法，与 ES5 完全一样，也是使用 new 命令。

        var p = new Person("zhagnsan",20);

 

注意点：

• 不存在提升，先定义类，后使用类。
• 类不存在变量提升(hoist)，这一点与 ES5 完全不同

 

二、class属性与方法

2.1 实例方法

• 通过类的实例对象调用方法 。

    <script>
        //ES6中类的表现形式
        class Person{
            say(){
                console.log("hello");
            }
        }

        var p = new Person();
        p.say();
    </script>

　

2.2 实例属性

• 实例属性指的是类的实例对象可调用的属性。

    <script>
        //ES6中类的表现形式
        class Person{
            constructor(name,age){
                this.name;
                this.age;
            }
        }

        var p = new Person("zhagnasn",20);
        console.log(p.name);
    </script>

2.3 静态方法

• 类相当于实例的原型，所有在类中定义的方法，都会被实例继承。
• 如果在一个方法前加上 statc 关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
• 如果静态方法包含 this 关键字，这个 this 指的是类，而不是实例。

    <script>
        //ES6中类的表现形式
        class Person{
            constructor(name,age){
                this.name;
                this.age;
            }

            //静态方法,包含在类中的一种方法
            static sayhello(){
                console.log("hello")
            }
        }

        var p = new Person("zhagnasn",20);
        console.log(p.name);

        Person.sayhello();
    </script>

　　

　2.4 静态属性

• 静态属性指的是 Class 本身的属性，即 class.propName。

        Person.age = 30;
        console.log(Person.age);

 

三、类的继承

3.1 基础用法

• Class 可以通过extends 关键字实现继承，让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承，要清晰和方便很多。

 

• ES6 规定，子类必须在 constructor()方法中调用 super() ，否则就会报错，这是因为子类自己的 this 对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。如果不调用super( )方法，子类就得不到自己的 this 对象.

    <script>
        //ES6中类的表现形式
        class Person{
            constructor(name,age){
                this.name = name;
                this.age = age;
            }

            getName(){
                console.log(this.name)
            }
        }

        class Student extends Person{

        }

        var s1 = new Student("李四",20);
        s1.getName();
    </script>