JavaScript Class

閱讀時間約 3 分鐘

類別 (class) 是在 ES6 中引入,用來作為建立新物件的模板。它可以將程式碼封裝起來。

為什麼要創建模板? 以 Notion 舉例,假如你每天都要寫行程表+感恩日記,每個頁面都要有代辦清單、行事曆和感恩的三個問題,每次寫每次都要把全部內容重新輸入一次,非常的浪費時間。這時候就可以創建模板,先設計好必要的架構,每天只需要填入內容就 ok 囉。

class 是一種幫助我們建立物件模板的語法糖,我們就可以【避免重複】書寫相同的程式碼來節省時間。在 class 中我們會建立好物件的屬性和它可以執行的函式。

開頭用 class 來宣告,名稱用大寫開頭,後面接 { },基本屬性架構用 constructor 函式傳入參數並賦予值 (2~4行),後面加上所需的函式 (7~16行),可以傳入參數也可以回傳值 (就是一般的函式),往下看範例程式碼會更清楚。

class Classname{
constructor(參數1, 參數2) {
this.屬性名​1 = 參數1,
this.​屬姓名2 = 參數2,
}

函式1 () {
// 取用屬性 this.屬姓名
console.log(this.屬姓名1)
}

函式2 (參數a) {
// 可以 傳入參數
// 可以 回傳值
return this.參數1 * 參數a
}
}

const objName = new Classname(傳入值1, 傳入值2);

const total = objName.函式2(5)

範例程式碼

  • 原寫法
const product1 = {
name: '上衣',
price: 599,
displayProduct: function() {
console.log(this.name);
console.log(this.price);
},
calculateTotal: function(amount) {
return this.price * amount
}
}

const product2 = {
name: '上衣',
price: 599,
displayProduct: function() {
console.log(this.name);
console.log(this.price);
},
calculateTotal: function(amount) {
return this.price * amount
}
}
  • class 寫法
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}

displayProduct() {
console.log(this.name);
console.log(this.price);
}

calculateTotal(amount) {
return this.price * amount
}
}

const product1 = new Product("上衣", 599);
const product2 = new Product("外套", 1300);

const total = product1.calculateTotal(5); // 有回傳值,可存入​變數中


其他範例


參考資料

主要放程式學習筆記,分享 Creative Coding 相關內容、作品
留言0
查看全部
發表第一個留言支持創作者!
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
npm(全名 Node Package Manager,node套件管理器)
透過 node 的 http 模組來建立 web 伺服器範例
Global 物件和 node 模組特性的介紹
在終端機試玩 或 VS Code 執行 JS 檔
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
npm(全名 Node Package Manager,node套件管理器)
透過 node 的 http 模組來建立 web 伺服器範例
Global 物件和 node 模組特性的介紹
在終端機試玩 或 VS Code 執行 JS 檔
你可能也想看
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
前言 這是第一次寫技術文章,但其實應該也只能說是蒐集很多資料並學習如何透過自己的話解釋的內容,並不能像其他大神可能分享一些很酷的技術,目標就單純是為了完成最後一週的作業(如下)。 走入非同步之前 執行環境(Execution Context) 執行環境堆疊 (Execution stack)
Java script 中有其中兩種宣告分別是 var 跟 let var 結果: let 結果: ** let 是一種區塊的變數宣告像是 if else while for 即跳出區塊時就無法取得資料
Thumbnail
在一開始學習前端開發的時候,一直遇到講師在課程內容中提到 ES5、ES6 等關鍵字,當初的我,單純認為 ES5、ES6 是講述 JavaScript 的版本,所以在使用上就沒有想太多,反正就是 JavaScript 1.0 、2.0 的感覺吧?
Thumbnail
上篇介紹的promise chain的寫法,是已經比原本好維護了沒錯,但是可讀性似乎還是有點不足,其實還可以改成用async/await的寫法,如下: E 其中,async是非同步的意思,等於是把getData()這個function定義為非同步,因此從console可以看到,test是最先被pri
Thumbnail
輸入畫面 為什麼要做驗證? 因為作為設計者,永遠不該預設使用者會乖乖照設計者的意思輸入。
Thumbnail
本系列文為節選第 468 期 JavaScript Weekly 文章的讀後整理心得。 本文為「下」,收錄內容: Vue 3.0 的設計概念 TypeScript 的 const assertion Preact 華麗復活 阿 Svelte 不是很邱?
Thumbnail
本系列文為節選第 468 期 JavaScript Weekly 文章的整理心得。 本文為「上」,收錄內容: Tesseract.js 2.0 颯爽登場 State of JavaScript 2019 問卷結果 CNDJS 維護團隊(Cloudflare)的真情告白 ...
Thumbnail
JavaScript在ES6新增了let, const等宣告變數的方式,其中let, const是block scope的,而var則是function scope。
Thumbnail
promise是ES6才有的,它是一種非同步的技術,使用它除了可以在background處理一些事情以外,還可以增加程式碼的可維護性。
Thumbnail
你可能已經看過 “ES6” 或 “JavaScript ES6” 一詞,並想知道它實際意味著什麼。別再想了,因為我們將深入研究 ES6 究竟是什麼,以及它與 JavaScript 的關係!
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
前言 這是第一次寫技術文章,但其實應該也只能說是蒐集很多資料並學習如何透過自己的話解釋的內容,並不能像其他大神可能分享一些很酷的技術,目標就單純是為了完成最後一週的作業(如下)。 走入非同步之前 執行環境(Execution Context) 執行環境堆疊 (Execution stack)
Java script 中有其中兩種宣告分別是 var 跟 let var 結果: let 結果: ** let 是一種區塊的變數宣告像是 if else while for 即跳出區塊時就無法取得資料
Thumbnail
在一開始學習前端開發的時候,一直遇到講師在課程內容中提到 ES5、ES6 等關鍵字,當初的我,單純認為 ES5、ES6 是講述 JavaScript 的版本,所以在使用上就沒有想太多,反正就是 JavaScript 1.0 、2.0 的感覺吧?
Thumbnail
上篇介紹的promise chain的寫法,是已經比原本好維護了沒錯,但是可讀性似乎還是有點不足,其實還可以改成用async/await的寫法,如下: E 其中,async是非同步的意思,等於是把getData()這個function定義為非同步,因此從console可以看到,test是最先被pri
Thumbnail
輸入畫面 為什麼要做驗證? 因為作為設計者,永遠不該預設使用者會乖乖照設計者的意思輸入。
Thumbnail
本系列文為節選第 468 期 JavaScript Weekly 文章的讀後整理心得。 本文為「下」,收錄內容: Vue 3.0 的設計概念 TypeScript 的 const assertion Preact 華麗復活 阿 Svelte 不是很邱?
Thumbnail
本系列文為節選第 468 期 JavaScript Weekly 文章的整理心得。 本文為「上」,收錄內容: Tesseract.js 2.0 颯爽登場 State of JavaScript 2019 問卷結果 CNDJS 維護團隊(Cloudflare)的真情告白 ...
Thumbnail
JavaScript在ES6新增了let, const等宣告變數的方式,其中let, const是block scope的,而var則是function scope。
Thumbnail
promise是ES6才有的,它是一種非同步的技術,使用它除了可以在background處理一些事情以外,還可以增加程式碼的可維護性。
Thumbnail
你可能已經看過 “ES6” 或 “JavaScript ES6” 一詞,並想知道它實際意味著什麼。別再想了,因為我們將深入研究 ES6 究竟是什麼,以及它與 JavaScript 的關係!