ES6 - 类

作者: Hyso | 来源:发表于2019-04-12 16:15 被阅读0次

JavaScript-13 ES6和对象
深入理解JS面向对象 - JavaScript实现继承的五种方式
ES6时代的JavaScript面向对象编程
JavaScript入门——类(五)
深入es6之class
es5 es6静态方法、类、单例模式
ES6 JS 类与继承、静态方法
ES6 JS 类与继承、静态方法
深入理解ES6中class的this指向
面向对象

类的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        // 构造函数的方式
        function Person(name, age)
        {
            this.name = name;
            this.age  = age;
        }

        var person = new Person('Peter', 30);
        console.log(person);

        // 类的方式
        class Student
        {
            // 构造方法
            constructor(name, age)
            {
                this.name = name;
                this.age  = age;
            }
        }

        var student = new Student('Tom', 18);
        console.log(student);
    </script>
</body>
</html>

类中的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        // 构造函数的方式
        function Person(name, age)
        {
            this.name = name;
            this.age  = age;
        }

        Person.prototype.say = function() {
            console.log(`I am ${this.name}, I am ${this.age}`);
        }

        var person = new Person('Peter', 30);
        person.say();

        // class 形式
        class Student
        {
            // 构造方法
            constructor(name, age)
            {
                this.name = name;
                this.age  = age;
            }
            say() {
                console.log(`I am ${this.name}, I am ${this.age}`);
            }
        }

        var student = new Student('Tom', 18);
        student.say();
    </script>
</body>
</html>

类的静态方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        class Student
        {
            // 构造方法
            constructor(name, age)
            {
                this.name = name;
                this.age  = age;
            }
            static say() {
                console.log('Hellow');
            }
        }

        // 只能通过类本身访问
        Student.say();
    </script>
</body>
</html>

类的继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        class Person
        {
            // 构造方法
            constructor(name, age)
            {
                this.name = name;
                this.age  = age;
            }
            say() {
                console.log(`I am ${this.name}, I am ${this.age}`);
            }
        }

        class Student extends Person
        {

        }

        class Teacher extends Person
        {
            // 构造方法
            constructor(name, age, gender)
            {
                // 必须调用父类构造方法，否则会报错
                super(name, age);

                this.gender = gender;
            }
            // 重写父类 Person 的 say 方法
            say() {
                console.log(`I am ${this.name}, I am ${this.age}, I am a teacher`);
            }
        }

        var student = new Student('Tom', 18);
        student.say();

        var teacher = new Teacher('Peter', 30, '男');
        teacher.say();
    </script>
</body>
</html>