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

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

连接地址：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一样，支持多个构造器--回答是：：不支持

 这样是不支持的

上传我们看到了如何去在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);

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

方法

上面我们介绍了在类中创建实例属性，和静态是属性，在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());

我们看控制台输出结果：

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

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 声明的组件是一样的