JS類之JavaScript類

阿新 • • 發佈：2022-05-05

宣告

該文部分程式碼和內容節選自菜鳥教程，僅用作個人學習，特此宣告

連結：https://www.runoob.com/

27、JS類

27.1 類的建立和使用

類是用於建立物件的模板。我們使用 class 關鍵字來建立一個類，類體在一對大括號 {} 中，我們可以在大括號 {} 中定義類成員的位置，如方法或建構函式。

每個類中包含了一個特殊的方法 constructor()，它是類的建構函式，這種方法用於建立和初始化一個由 class 建立的物件。
建立一個類的語法格式如下：
class ClassName {  constructor() { ... } }
定義好類後，我們就可以使用 new

關鍵字來建立物件，建立物件時會自動呼叫建構函式方法 constructor()。

1、類的建立和使用練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS類的建立</title>
</head>
<body>

<h2>JavaScript 類</h2>
<p>JavaScript類的使用</p>
<p id="demo" style="color:red;font-weight:bold"></p>

<script>
class Runoob {
    constructor(name,url){
        this.name = name;
        this.url = url;
    }
}
let site = new Runoob("菜鳥教程","www.runoob.com");
document.getElementById("demo").innerHTML =
site.name + " : " + site.url;
</script>

</body>
</html>

生成頁面效果

2、類表示式

類表示式是定義類的另一種方法。類表示式可以命名或不命名。命名類表示式的名稱是該類體的區域性名稱。未命名類表示式的名稱將會被自動賦值為變數名

只是說有點難理解，看一個例子就懂了
// 未命名/匿名類
let Runoob = class {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
};
console.log(Runoob.name);
// output: "Runoob"
 
// 命名類
let Runoob = class Runoob2 {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
};
console.log(Runoob.name);
// 輸出: "Runoob2"
 
構造方法

構造方法是一種特殊的方法：

構造方法名為 constructor()。

構造方法在建立新物件時會自動執行。

構造方法用於初始化物件屬性。

如果不定義構造方法，JavaScript 會自動新增一個空的構造方法。

27.2 類的方法

我們使用關鍵字 class 建立一個類，可以新增一個 constructor() 方法，然後新增任意數量的方法

可以向類的方法傳送引數

類宣告和類表示式的主體都執行在嚴格模式下。比如，建構函式，靜態方法，原型方法，getter 和 setter 都在嚴格模式下執行。如果沒有遵循嚴格模式，則會出現錯誤

練習一：類的方法新增

練習程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>類方法新增練習</title>
</head>
<body>

<h2>JavaScript 類的方法新增練習</h2>

<p>此例項展示了向Runoob類新增一個age()方法</p>

<p id="demo"></p>

<script>
class Runoob {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}

let runoob = new Runoob("菜鳥教程", 2018);
document.getElementById("demo").innerHTML =
"菜鳥教程 " + runoob.age() + " 歲了。";
</script>

</body>
</html>

生成頁面效果

練習二：向方法傳遞引數

練習程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>傳遞引數練習</title>
</head>
<body>

<h2>JavaScript 類的方法引數傳遞練習</h2>

<p>傳遞引數到 "age()" 方法。</p>

<p id="demo"></p>

<script>
class Runoob {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}

let date = new Date();
let year = date.getFullYear();

let runoob = new Runoob("菜鳥教程", 2020);
document.getElementById("demo").innerHTML=
"菜鳥教程 " + runoob.age(year) + " 歲了。";
</script>

</body>
</html>

生成頁面效果

練習三：嚴格模式下不能使用未宣告變數

練習程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嚴格模式驗證練習</title>
</head>
<body>

<h2>JavaScript 類必須遵循嚴格模式 "strict mode" 的規則 </h2>

<p>JavaScript 類不能使用沒有宣告的變數。</p>

<p id="demo"></p>

<script>
class Runoob {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // 錯誤
    let date = new Date(); // 正確
    return date.getFullYear() - this.year;
  }
}


myCar = new Runoob("菜鳥教程", 2020);
document.getElementById("demo").innerHTML =
"菜鳥教程 " + myCar.age() + " 歲了。";
</script>

</body>
</html>

如果在上邊的例項中使用了未宣告的變數date，即date = new Date();,就會出現以下錯誤