上一篇的博客中我们介绍了，如何设置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 声明的组件是一样的

React项目 --ES6 语法中的class （9）相关推荐

React 项目 -ES6 语法类的继承（10）
在面向对象的编程语言中,基本上都是支持继承的,比如C++,和java,在ES6 中的类也引入的继承的概念,并且和java十分的类似,初学前端的ES6语法,我们在地方就介绍一下ES6 中的继承的语法. ...
React使用ES6语法重构组件代码
首次使用react,要注意react不同版本库,是ES5还是ES6的写法,如何做到统一.下面对于ES6语法重构组件的代码如下: (1)原始代码: <script type="text/ ...
react项目---基本语法字符串数组（6）
在我们编写html代码的过程中,字符串数组是会经常遇到的,如何来正确的处理字符串数组在项目中也凸显的十分的重要,不说这些冠冕堂皇的废话了,直接来看内容字符串处理首先我们来看如何把一个字符串显示到页 ...
react ice-design ie兼容问题，由于ie浏览器不支持箭头函数，导致react项目在ie中不兼容的解决办法
解决办法:1. package.json中的ice-script更新为1.7.2-beta.1 2. 将启动脚本改为 start:ice dev --disabled-reload=true 3. ...
React开发（260）:react项目理解 dva中 console
nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案
nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案参考文章: (1)nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案 (2)https://www.cnblogs.com/jk ...
React Native中常用ES6语法
一:模块导入导出 //ES6 import React, { Component,PropTypes, } from 'react'; import {Image,Text } from 'react ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例三、四
转载地址 React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例三.四项目初始化 git clone https://github.com/durban89/we ...

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

类

构造函数

属性

方法

React项目 --ES6 语法中的class （9）相关推荐

最新文章

热门文章