iT邦幫忙

2021 iThome 鐵人賽

DAY 7
1
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 7

JS 07 - 原型方法

大家好!

昨天我們成功使用建構函式建立一個新物件,但是建立物件後能做什麼呢?
今天我們要介紹的就是,在物件原型中新增共用方法!


物件特性

如果要推入項目至陣列,我們會使用 push 方法。
那麼,物件是不是也能推入項目呢?讓我們試試看:

([]).push(0); // 1
({}).push(0); // TypeError: {}.push is not a function

怎麼會這樣?為什麼陣列能使用的方法,物件卻不能使用?
讓我們想想看,陣列的索引能直接累加,但是物件的屬性不能直接累加,這樣要怎麼推入項目呢?

簡而言之,陣列和物件的方法不能共用,是因為它們擁有不同的特性
然而,如果真的想要共用方法的話,其實不是沒有辦法,這就是接下來要實作的物件原型。


物件方法

我們接續昨天提到的鐵人賽案例吧!
還記得昨天我們建立的建構函式嗎?

發文日數少於 30 天,只要更新物件;
發文日數超過 30 天,需要對物件新增 status 屬性並賦值。

let record;
record = new Ironman('Felix', '2021-09-16', 1);

/* ... */

record = new Ironman('Felix', '2021-10-15', 30);
record.status = true;

record = new Ironman('Felix', '2021-10-16', 31);
record.status = true;

但是,如果 Felix 有餘力撰寫更多文章,那麼豈不是每次更新物件後,都要再新增 status 屬性和賦值?
是這樣沒錯,物件沒有共用方法的時候,物件的屬性和值只能手動更新。

接下來我們就要介紹如何新增物件的共用方法了!


原型方法

如果建構函式是物件模板,那麼物件原型就是共用方法:

/* 新增共用方法 */
Ironman.prototype.finish = function () {
    /* 發文日數少於 30 天不允許執行函式 */
    if (new Date(this.date) < new Date('2021-10-15')) return;
    this.status = true;
    console.log('Congratulations!');
};

如此一來,只要是 2021-10-16 之後的任何一天,都能執行 finish 共用函式。
執行 finish 後,就會自動 Log 恭喜的訊息,並自動將物件的 status 屬性設為 true

let record;

record = new Ironman('Felix', '2021-09-16', 1);
record.finish(); /* 不執行 */
record; // { name: 'Felix', date: '2021-09-16', post: 1 }

record = new Ironman('Felix', '2021-10-15', 30);
record.finish(); // Log: Congratulations!
record; // { name: 'Felix', date: '2021-10-15', post: 30, status: true }

record = new Ironman('Felix', '2021-10-16', 31);
record.finish(); // Log: Congratulations!
record; // { name: 'Felix', date: '2021-10-16', post: 30, status: true }

建構函式搭配物件原型後,不僅能省事,也能減少不必要的程式碼,是不是棒極了呢?

差不多也到尾聲了。
如果對文章有任何疑問,歡迎於下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 06 - 建構函式
下一篇
JS 08 - 靜態方法
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言