前端研习录（43）——ES6 Class讲解及示例分析

清风不渡

于 2022-10-14 19:40:22 发布

阅读量560

点赞数 1

分类专栏：前端研习录文章标签：前端 javascript es6

本文链接：https://blog.csdn.net/WXKKang/article/details/127325713

版权

前端研习录专栏收录该内容

44 篇文章 3 订阅

订阅专栏

前端研习录（43）——ES6 Class讲解及示例分析

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

重拾前端记忆，记录学习笔记，现在进入Class部分

一、Class类基本知识

1、ES5

JavaScript中，传统一般通过构造方法来生成实例对象，示例如下：

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

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

        const person = new Person("Tom",18);
        person.getName();

2、ES6

ES6引入了class（类）这个概念，通过class关键字可以定义一个类，这样让对象的写法变得更清晰，更像面向对象编程，示例如下：

class myMath{
            constructor(x,y){
                this.x = x;
                this.y = y;
            }

            add(){
                return this.x+"+"+this.y+"="+(this.x+this.y);
            }

        }

        const my = new myMath(1,2);
        console.log(my.add());

3、constructor方法

constructor方法是类的默认方法，通过new命令生成对象时，会自动调用该方法，如果没有显示定义，则会有一个空的constructor方法被默认添加

4、类的实例

通过new关键字来生成类的实例

注意：通过class定义的类是不存在提升的

二、Class的属性与方法

1、实例方法

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

2、实例属性

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

3、静态方法

通过static不需要声明实例，可直接通过类来调用的方法叫做“静态方法”
当然，静态方法不能被实例所继承

注意：如果静态方法中包含this，则它指向的是类，而不是实例

3、静态属性

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

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>
        class People{

            constructor(name,age){
                this.name = name;
                this.age = age;
            }
            
            eat(){
                console.log("I'm eating");
            }

            static sayHello(){
                console.log("hello");
            }

        }

        //实例方法
        const p1 = new People();
        p1.eat();
        
        //实例属性
        const p2 = new People("Tom",18);
        console.log(p2.age);

        //静态方法
        People.sayHello();
        //由于静态方法不能被继承，故此段代码会引起报错
        //p2.sayHello();

        //静态属性
        People.pass ="123";
        console.log(People.pass);

    </script>
</body>
</html>

三、Class的继承

Class可以通过extends 关键字实现继承，让子类继承父类的属性和方法
ES6规定，子类必须在constructor()方法中调佣super()；否则将会报错，这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法，如果不调用super()方法，子类就得不到自己的this对象，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    <script>
        class People{

            constructor(name,age){
                this.name = name;
                this.age = age;
            }
            
            getName(){
                console.log(this.name);
            }

            static sayHello(){
                console.log("Hello");
            }
        }

        class Man extends People{

            constructor(name,age,height){
                super(name,age);
                this.height = height;
            }

            getHeight(){
                console.log(this.height);
            }


        }

        const m1 = new Man("Tom",18,"175cm");
        m1.getName();
        Man.sayHello();
        m1.getHeight();

    </script>
</body>
</html>