React项目 --ES6 语法中的class （9）

左手的ㄟ右手 2022-09-03 14:20 227阅读 0赞

上一篇的博客中我们介绍了，如何设置React项目的根目录

连接地址：[https://blog.csdn.net/datouniao1/article/details/119505562][https_blog.csdn.net_datouniao1_article_details_119505562]

要学习React 那么我们需要对ES6 类class

如果我们之前学习了java 或者是其他的面向对象的编程，我们大概了解如何去创建一个类

那么ES中也包含了类的概念

# 类 #

首先我们看如何来创建一个类：

class Person{}

是的，就是这样的简单，class 关键字， 然后className 并且首字母大写，然后一个大括号

在java的学习中我们知道，类是包含有构造函数，成员函数，以及非静态属性和静态属性

那么在ES6中规定的类是否和java类型呢，答案是肯定的

# 构造函数 #

在ES6中类中也有构造函数的概念，那么构造函数该如何写

class Person{
          
          constructor(){
    
          }
    }

java中的构造函数和类的名字是相同的，但是ES6中我们是使用关键字 constructor 这个来创建构造函数，并且可以创作无参数和有参数的，并且如果我们不写，那么会有一个默认的无参数的构造器

如何创建有参数的构造函数

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

上面我们就创造了一个带有参数的构造函数

那么我们不仅想问ES6 是否和java一样，支持多个构造器--回答是：：不支持

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

这样是不支持的

上传我们看到了如何去在ES6中声明一个类，并且创建构造函数，接下里我们看如何去调用使用这个类

# 属性 #

对于构造函数没有参数的，我们这样创建一个实例

const person=new Person();

类中的构造函数带有参数的，我们这样来声明一个实例

const person=new Person("张三",18);

带有参数的构造器，我们在实例化的时候，使用了new 这个关键字，并且传入了两个参数，分别对应构造器中的name和age 那么我们可想而知，通过实例化对象person.name 就可以输出张三

通过person.age 就可以输出 18 这个里面的name 和age 是两个属性

实例属性：我们通过new 关键字实例化的对象可以引出的参数，比如 name 和age

我们继续来看静态属性：

class Person{
          constructor(name,age){
             this.name=name;
             this.age=age;
          }
          static address="中国河南郑州"
    }

这个里面有address 这个属性，这个属性是使用了关键字static ，并且和构造函数 constructor 是同级的

class Person{
          constructor(name,age){
             this.name=name;
             this.age=age;
          }
          static address="中国河南郑州"
    }
    const person=new Person("张三",18);
    console.log(person.name);
    console.log(Person.address);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

对于这样的通过类名引出的，这样的属性我们称为 是静态属性

# 方法 #

上面我们介绍了在类中创建实例属性，和静态是属性，在java类中，除了包含属性还包括相关的方法，那么如何来在在ES6 中我们不禁要问，如何来创建方法

首先我们创建实例方法，那么实例方法就是我们通过new 出来的实例化对象可以引出的方法。比如我们给Person创建一个walk

class Person{
          constructor(name,age){
             this.name=name;
             this.age=age;
          }
          static address="中国河南郑州"
          walk(){
            console.log(this.name+"今天走了18000步，厉害吧")
          }
    }

那么我们通过对象来调用：

const person=new Person("张三",18);
    console.log(person.walk());

我们看控制台输出结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

那么上面的方式是实例方法，下面我们创建一个静态的方法：

class Person{
          constructor(name,age){
             this.name=name;
             this.age=age;
          }
          static address="中国河南郑州"
          walk(){
            console.log(this.name+"今天走了18000步，厉害吧")
          }
          static work(){
            console.log("在不停的工作着");
          }
    }

work 就是一个静态的方法，这个方法的前面是用关键字static 声明的

那么我们如何调用这个的静态的方法

Person.work()

是的

上面介绍了ES6语法中的class ，在使用的时候我们需要注意的是：

1.class 大括号内部只能写 构造器，静态属性，和 静态方法，实例方法

2.class 的本质和function 声明的组件是一样的

[https_blog.csdn.net_datouniao1_article_details_119505562]: https://blog.csdn.net/datouniao1/article/details/119505562
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20220829/c9dbd47a1a2c4583bdb29c603c42643b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20220829/b3a79ee943e943f9a393758f0277ffbe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20220829/a452bbbfbb2241f4a8e9d14031806832.png