大家好!
昨天我們成功使用建構函式建立一個新物件,但是建立物件後能做什麼呢?
今天我們要介紹的就是,在物件原型中新增共用方法!
如果要推入項目至陣列,我們會使用 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,我們明天再見!