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()