Class的概念

　　一、简介

　　　　　　　　javaScript是面向对象的编程语言，可以说所以的能够被描述的事、物或抽象的东西，都是可以是对象。而我们记录的对象，会有具有同样的属性和行为。

　　　　　　为了节省重写相同的代码。就产生了class模板。

　　　　　　举例：

　　　　　　　　　　　　这里有一把枪, 枪的种类很多，有步枪，机关枪，阻击枪....。但是无论怎么说，这些都是枪的概念，如果把这种抽象的概念剥离出来，就是我们经常说的“类”。那么枪有什么特点呢？威力大小,型号,长度,子弹型号，能承载子弹的数量，枪口半径......ok！这些一切的一切都是为了描素枪，把这些抽象出来，就组成了“枪类”的属性。枪又能干什么呢？瞄准,开火,....这些描素都是枪的功能-----把这些抽象出来，即组成了一个类的方法。

　　　二、Class学习

　　　　　　　二 . 1 Class和function的区别；

　　　　　　　　　　二.1.1 class的特点

　　　　　　　　　　　　使用class关键字创建的组件，有自己的私有数据（this.state）和生命周期函数，有状态；

　　　　　　　　　　　　class中有默认执行函数 " constructor (){} " ,并且还有一个静态属性只属于class的"static"静态属性和静态方法；

　　　　　　　　　　　　class中的super关键字，是用来继承父类的，属性和方法，如果在子类和父类都有constructor的时候，super则是先执行父类的constructor,再执行子类的constructor。

　　　　　　　　　　　　“this”指向问题，class中的this指向实例时的对象。

　　　　　　　　　　　　“static"指向class,它是属于class的数据。

　　　　　　　　　　二.1.2 function的特点

　　　　　　　　　　　　使用function创建的组件，只有props,没有自己的私有数据和生命周期函数，无状态；

　　　　　　　　小结：组件有没有状态是根据有没有 ‘state’属性，所以class创建的组件为有状态【有状态】，而用构造函数创建的组件没有状态【无状态】。如果一个组件需要有自己的私有数据，则推荐使用：class创建的有状态组件；如果一个组件不需要私有的数据，则推荐使用，无状态组件；React 官方说：无状态组件，由于没有自己的state和生命周期函数，所以运行效率会比又状态组件稍微高一些；

　　　　　　　二 . 2 组件中的props和state、data之间的区别。

　　　　　　　　　　二.2.1 props是什么？

　　　　　　　　　　　　　props是从外部传进来的数据，并且props是只读数据，只可以读取不能重新赋值。

　　　　　　　　　　二.2.2 state和data是什么？

　　　　　　　　　　　　　state和data都属于组件的私有属性，（通过ajax获取回来的数据一般都为私有数据），并且数据是可以重新赋值。

　　　三、class的使用

// 创建一个类存放特有的属性和方法，用来实例对象。

class Student{

    // 静态属性只属于Student的属性

    static p = "静态属性";

    // 静态方法只属于Student的方法

    static m(){

        console.log("静态方法")

    }

    // 构造方法

    constructor(props){

        //实例属性

        this.name=props.name;

        this.age=props.age;

        this.sex=props.sex;

    }

    // 实例方法

    students(){

        console.log(this.name)

        console.log(this.age)

        console.log(this.sex)

    }

    xue(){

        console.log(this.name,"学习使我进步！")

    }

    wan(){

        console.log(this.name,"你真调皮~")

    }

    xiao(){

        console.log(this.name,"哈哈哈~")

    }

}

Student.m()

console.log(Student.p)

// 实例化对象

var obj={name:"小红",age:20,sex:"女"}

var S1 = new Student({...obj});

// 调用方法

S1.students()

S1.xue()

S1.xiao()


//实例化对象

var obj={name:"小明",age:22,sex:"男"}

var S2 = new Student({...obj});

S2.students()

S2.wan()

巴特西

React中Class的概念

Class的概念

一、简介

二、Class学习

三、class的使用

最新文章

热门文章