這篇文章將為大家詳細(xì)講解有關(guān)JavaScript中怎么使用Class語法，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)主要從事網(wǎng)頁設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、成都響應(yīng)式網(wǎng)站建設(shè)、程序開發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、重慶小程序開發(fā)等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營銷經(jīng)驗(yàn)，集策劃、開發(fā)、設(shè)計(jì)、營銷、管理等多方位專業(yè)化運(yùn)作于一體。

一、“class” 語法

基本語法是：

class MyClass {   // class 方法   constructor() { ... }   method1() { ... }   method2() { ... }   method3() { ... }   ... }

然后使用 new MyClass() 來創(chuàng)建具有上述列出的所有方法的新對(duì)象。

new 會(huì)自動(dòng)調(diào)用 constructor() 方法，因此我們可以在 constructor() 中初始化對(duì)象。

例如：

class User {    constructor(name) {     this.name = name;   }    sayHi() {     alert(this.name);   }  }  // 用法： let user = new User("John"); user.sayHi();

當(dāng) new User("John") 被調(diào)用：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 一個(gè)新對(duì)象被創(chuàng)建。

3. constructor 使用給定的參數(shù)運(yùn)行，并為其分配 this.name。

……然后我們就可以調(diào)用對(duì)象方法了，例如 user.sayHi。

類的方法之間沒有逗號(hào)

對(duì)于新手開發(fā)人員來說，常見的陷阱是在類的方法之間放置逗號(hào)，這會(huì)導(dǎo)致語法錯(cuò)誤。

不要把這里的符號(hào)與對(duì)象字面量相混淆。在類中，不需要逗號(hào)。

二、什么是 class?

所以，class 到底是什么?正如人們可能認(rèn)為的那樣，這不是一個(gè)全新的語言級(jí)實(shí)體。

讓我們揭開其神秘面紗，看看類究竟是什么。這將有助于我們理解許多復(fù)雜的方面。

在 JavaScript 中，類是一種函數(shù)。

看看下面這段代碼：

class User {   constructor(name) { this.name = name; }   sayHi() { alert(this.name); } }  // 佐證：User 是一個(gè)函數(shù) alert(typeof User); // function

class User {...} 構(gòu)造實(shí)際上做了如下的事兒：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 創(chuàng)建一個(gè)名為 User 的函數(shù)，該函數(shù)成為類聲明的結(jié)果。該函數(shù)的代碼來自于 constructor  方法(如果我們不編寫這種方法，那么它就被假定為空)。

3. 存儲(chǔ)類中的方法，例如 User.prototype 中的 sayHi。

當(dāng) new User 對(duì)象被創(chuàng)建后，當(dāng)我們調(diào)用其方法時(shí)，它會(huì)從原型中獲取對(duì)應(yīng)的方法，正如我們?cè)?F.prototype 一章中所講的那樣。因此，對(duì)象  new User 可以訪問類中的方法。

我們可以將 class User 聲明的結(jié)果解釋為：

下面這些代碼很好地解釋了它們：

class User {   constructor(name) { this.name = name; }   sayHi() { alert(this.name); } }  // class 是一個(gè)函數(shù) alert(typeof User); // function  // ...或者，更確切地說，是 constructor 方法 alert(User === User.prototype.constructor); // true  // 方法在 User.prototype 中，例如： alert(User.prototype.sayHi); // alert(this.name);  // 在原型中實(shí)際上有兩個(gè)方法 alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi

三、不僅僅是語法糖

人們常說 class 是一個(gè)語法糖(旨在使內(nèi)容更易閱讀，但不引入任何新內(nèi)容的語法)，因?yàn)槲覀儗?shí)際上可以在沒有 class 的情況下聲明相同的內(nèi)容：

// 用純函數(shù)重寫 class User  // 1. 創(chuàng)建構(gòu)造器函數(shù) function User(name) {   this.name = name; } // 函數(shù)的原型（prototype）默認(rèn)具有 "constructor" 屬性， // 所以，我們不需要?jiǎng)?chuàng)建它  // 2. 將方法添加到原型 User.prototype.sayHi = function() {   alert(this.name); };  // 用法： let user = new User("John"); user.sayHi();

這個(gè)定義的結(jié)果與使用類得到的結(jié)果基本相同。因此，這確實(shí)是將 class 視為一種定義構(gòu)造器及其原型方法的語法糖的理由。

盡管，它們之間存在著重大差異：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 首先，通過 class 創(chuàng)建的函數(shù)具有特殊的內(nèi)部屬性標(biāo)記  [[FunctionKind]]:"classConstructor"。因此，它與手動(dòng)創(chuàng)建并不完全相同。編程語言會(huì)在許多地方檢查該屬性。例如，與普通函數(shù)不同，必須使用  new 來調(diào)用它：class User { constructor() {} } alert(typeof User); // function User();  // Error: Class constructor User cannot be invoked without 'new'此外，大多數(shù)  JavaScript 引擎中的類構(gòu)造器的字符串表示形式都以 “class…” 開頭class User {constructor() {} }  alert(User); // class User { ... }還有其他的不同之處，我們很快就會(huì)看到。

3. 類方法不可枚舉。 類定義將 "prototype" 中的所有方法的 enumerable 標(biāo)志設(shè)置為 false。這很好，因?yàn)槿绻覀儗?duì)一個(gè)對(duì)象調(diào)用  for..in 方法，我們通常不希望 class 方法出現(xiàn)。

4. 類總是使用 use strict。 在類構(gòu)造中的所有代碼都將自動(dòng)進(jìn)入嚴(yán)格模式。

此外，class 語法還帶來了許多其他功能，我們稍后將會(huì)探索它們。

四、類表達(dá)式

就像函數(shù)一樣，類可以在另外一個(gè)表達(dá)式中被定義，被傳遞，被返回，被賦值等。

這是一個(gè)類表達(dá)式的例子：

let User = class {   sayHi() {     alert("Hello");   } };

類似于命名函數(shù)表達(dá)式(Named Function Expressions)，類表達(dá)式可能也應(yīng)該有一個(gè)名字。

如果類表達(dá)式有名字，那么該名字僅在類內(nèi)部可見：

// “命名類表達(dá)式（Named Class Expression）” // (規(guī)范中沒有這樣的術(shù)語，但是它和命名函數(shù)表達(dá)式類似) let User = class MyClass {   sayHi() {     alert(MyClass); // MyClass 這個(gè)名字僅在類內(nèi)部可見   } };  new User().sayHi(); // 正常運(yùn)行，顯示 MyClass 中定義的內(nèi)容  alert(MyClass); // error，MyClass 在外部不可見

我們甚至可以動(dòng)態(tài)地“按需”創(chuàng)建類，就像這樣：

function makeClass(phrase) {   // 聲明一個(gè)類并返回它   return class {     sayHi() {       alert(phrase);     }   }; }  // 創(chuàng)建一個(gè)新的類 let User = makeClass("Hello");  new User().sayHi(); // Hello

五、Getters/setters

就像對(duì)象字面量，類可能包括 getters/setters，計(jì)算屬性(computed properties)等。

這是一個(gè)使用 get/set 實(shí)現(xiàn) user.name 的示例：

class User {    constructor(name) {     // 調(diào)用 setter     this.name = name;   }    get name() {     return this._name;   }    set name(value) {     if (value.length < 4) {       alert("Name is too short.");       return;     }     this._name = value;   }  }  let user = new User("John"); alert(user.name); // John  user = new User(""); // Name is too short.

從技術(shù)上來講，這樣的類聲明可以通過在 User.prototype 中創(chuàng)建 getters 和 setters 來實(shí)現(xiàn)。

六、計(jì)算屬性名稱 […]

這里有一個(gè)使用中括號(hào) [...] 的計(jì)算方法名稱示例：

class User {    ['say' + 'Hi']() {     alert("Hello");   }  }  new User().sayHi();

這種特性很容易記住，因?yàn)樗鼈兒蛯?duì)象字面量類似。

七、Class 字段

舊的瀏覽器可能需要 polyfill

類字段(field)是最近才添加到語言中的。

之前，我們的類僅具有方法。

“類字段”是一種允許添加任何屬性的語法。

例如，讓我們?cè)?class User 中添加一個(gè) name 屬性：

class User {   name = "John";    sayHi() {     alert(`Hello, ${this.name}!`);   } }  new User().sayHi(); // Hello, John!

所以，我們就只需在表達(dá)式中寫 " = "，就這樣。

類字段重要的不同之處在于，它們會(huì)在每個(gè)獨(dú)立對(duì)象中被設(shè)好，而不是設(shè)在 User.prototype：

class User {   name = "John"; }  let user = new User(); alert(user.name); // John alert(User.prototype.name); // undefined

我們也可以在賦值時(shí)使用更復(fù)雜的表達(dá)式和函數(shù)調(diào)用：

class User {   name = prompt("Name, please?", "John"); }  let user = new User(); alert(user.name); // John

八、使用類字段制作綁定方法

正如 函數(shù)綁定 一章中所講的，JavaScript 中的函數(shù)具有動(dòng)態(tài)的 this。它取決于調(diào)用上下文。

因此，如果一個(gè)對(duì)象方法被傳遞到某處，或者在另一個(gè)上下文中被調(diào)用，則 this 將不再是對(duì)其對(duì)象的引用。

例如，此代碼將顯示 undefined：

class Button {   constructor(value) {     this.value = value;   }    click() {     alert(this.value);   } }  let button = new Button("hello");  setTimeout(button.click, 1000); // undefined

這個(gè)問題被稱為“丟失 this”。

我們?cè)?函數(shù)綁定 一章中講過，有兩種可以修復(fù)它的方式：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 傳遞一個(gè)包裝函數(shù)，例如 setTimeout(() => button.click(), 1000)。

3. 將方法綁定到對(duì)象，例如在 constructor 中。

類字段提供了另一種非常優(yōu)雅的語法：

class Button {   constructor(value) {     this.value = value;   }   click = () => {     alert(this.value);   } }  let button = new Button("hello");  setTimeout(button.click, 1000); // hello

類字段 click = () => {...} 是基于每一個(gè)對(duì)象被創(chuàng)建的，在這里對(duì)于每一個(gè) Button  對(duì)象都有一個(gè)獨(dú)立的方法，在內(nèi)部都有一個(gè)指向此對(duì)象的 this。我們可以把 button.click 傳遞到任何地方，而且 this 的值總是正確的。

在瀏覽器環(huán)境中，它對(duì)于進(jìn)行事件監(jiān)聽尤為有用。

九、總結(jié)

基本的類語法看起來像這樣：

class MyClass {   prop = value; // 屬性    constructor(...) { // 構(gòu)造器     // ...   }    method(...) {} // method    get something(...) {} // getter 方法   set something(...) {} // setter 方法    [Symbol.iterator]() {} // 有計(jì)算名稱（computed name）的方法（此處為 symbol）   // ... }

關(guān)于JavaScript中怎么使用Class語法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。