js class類

js class類是指：class（類）是ECMAScript6中新增的關鍵字，專門用于創建“類”的，“類”可被用于實現邏輯的封裝，開始增加了“類”相關的語法，使得JavaScript中的面向對象實現方式更加標準。

推薦度：

導讀js class類是指：class（類）是ECMAScript6中新增的關鍵字，專門用于創建“類”的，“類”可被用于實現邏輯的封裝，開始增加了“類”相關的語法，使得JavaScript中的面向對象實現方式更加標準。

js class類是什么呢？一起來看下吧：

class（類）是ECMAScript6中新增的關鍵字，專門用于創建“類”的，“類”可被用于實現邏輯的封裝。傳統面向對象的編程序語言都是“類”的概念，對象都是由類創建出來，然而早期JavaScript中是沒有類的，面向對象大多都是基于構造函數和原型實現的，但是ECMAScript6規范開始增加了“類”相關的語法，使得JavaScript中的面向對象實現方式更加標準。

類的聲明

定義一個類的一種方法是使用一個類聲明，即用帶有class關鍵字的類名（這里“Rectangle”）函數名和實例化構造名相同且大寫（非強制）

class?Person?{
?constructor(x,?y)?{
????this.x?=?x
????this.y?=?y
??}
}

函數聲明和類聲明之間的一個重要區別是函數聲明會提升，類聲明不會。需要先進行聲明，再去訪問，否則會報錯

var?person=?new?Person()
class?Person?{
?constructor(x,?y)?{
????this.x?=?x
????this.y?=?y
??}
}
//?Personis?not?defined

類聲明不可以重復

class?Person?{}
class?Person?{}
//?TypeError?Identifier?'Person'?has?already?been?declared

類必須使用 new 調用，否則會報錯。這是它跟普通構造函數的一個主要區別，就是后者不用 new 也可以執行

class?Person?{
?constructor(x,?y)?{
????this.x?=?x
????this.y?=?y
??}
}
Person()
//?TypeError?Class?constructor?Person?cannot?be?invoked?without?'new'

類表達式（類定義）

類表達式可以是被命名的或匿名的

/*?匿名類?*/?
let?Person?=?class?{
??constructor(x,?y)?{
????this.x?=?x
????this.y?=?y
??}
}
/*?命名的類?*/?
let?Person?=?class?Person?{
??constructor(x,?y)?{
????this.x?=?x
????this.y?=?y
??}
}

類的方法

constructor 方法

constructor 方法是類的默認方法，通過 new 命令生成對象實例時，自動調用該方法（默認返回實例對象 this）。一個類必須有 constructor 方法，如果沒有顯式定義，一個空的 constructor 方法會被默認添加。一個類只能擁有一個名為 “constructor” 的特殊方法，如果類包含多個 constructor 的方法，則將拋出一個 SyntaxError 。

class?Person?{
???constructor(x,?y)?{
????this.x?=?x????//?默認返回實例對象?this
????this.y?=?y
??}
??toString()?{
????console.log(this.x?+?',?'?+?this.y)
??}
}

注意：

1、在類中聲明方法的時候，方法前不加 function 關鍵字

2、方法之間不要用逗號分隔，否則會報錯

3、類的內部所有定義的方法，都是不可枚舉的（non-enumerable）

4、一個類中只能擁有一個constructor方法

靜態方法

靜態方法可以通過類名調用，不能通過實例對象調用，否則會報錯

class?Person?{
????static?sum(a,?b)?{
????????console.log(a?+?b)
????}
}
var?p?=?new?Person()
Person.sum(1,?2)??//?3
p.sum(1,2)?????//??TypeError?p.sum?is?not?a?function

原型方法

類的所有方法都定義在類的 prototype 屬性上面，在類的實例上面調用方法，其實就是調用原型上的方法

原型方法可以通過實例對象調用，但不能通過類名調用，會報錯

class?Person?{
?constructor()?{
??//?默認返回實例對象?this
?}
????sum()?{
?????
????}
????toString()?{
?????console.log('123456')
???}
}
//?給?Person?的原型添加方法
Person.prototype.toVal?=?function()?{
?console.log('I?am?is?toVal')
}
//?等同于
Person.prototype?=?{
??constructor()?{},
??sum()?{},
??toString()?{}
}
var?p?=?new?Person()
p.toString()???????//?123456
p.toVal()??????????//?I?am?is?toVal
Person.toString()??//?TypeError?Person.toStringis?not?a?function
Person.toVal()??//?TypeError?Person.toVal?is?not?a?function

實例方法

實例方法也可以通過實例對象調用，但同樣不能通過類名調用，會報錯

class?Person?{
????constructor()?{
????????this.sum?=?function(a,?b)?{
????????????console.log(a?+?b)
????????}
????}
}
var?p?=?new?Person()
p.sum(1,2)???????//?3
Person.sum(1,2)??//?TypeError?Person.sum?is?not?a?function