JavaScript類的定義和使用
阿新 • • 發佈：2022-03-29
JavaScript 類(class)
類是用於建立物件的模板。
我們使用 class 關鍵字來建立一個類，類體在一對大括號 {} 中，我們可以在大括號 {} 中定義類成員的位置，如方法或建構函式。
每個類中包含了一個特殊的方法 constructor()，它是類的建構函式，這種方法用於建立和初始化一個由 class 建立的物件。
建立一個類的語法格式如下：
class ClassName { constructor() { ... } }例項：
例項
class Runoob { constructor(name, url) { this.name = name; this.url = url; } }
使用類
定義好類後，我們就可以使用 new 關鍵字來建立物件：
例項
class Runoob { constructor(name, url) { this.name = name; this.url = url; } } let site = new Runoob("菜鳥教程", "https://www.runoob.com");
定義person類
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> class Person{ constructor(name,age){ this.age = age;this.name = name; } show(){ document.write(this.name+","+this.age+"<br>"); } eat(){ document.write("吃飯..."); } } let p = new Person("張三",23); p.show(); p.eat(); </script> </body> </html>
輸出結果為：
字面量類的定義和使用（常用）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let person = { name : "張三" , age : 23 , hobby : ["聽課","學習"], eat : function(){ document.write("吃飯..."); } } document.write(person.name + "," + person.age +"," +person.hobby[0]+person.hobby[1]); person.eat(); </script> </body> </html>