iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0

大家好!

我們花了兩天介紹原型鏈和原型繼承的原理,今天就要介紹繼承的方法了。
我們進入今天的主題吧!


Object.create

/* 使用說明 */
Object.create(obj); // {}
Object.create(obj, properties);

如果要讓 JS 的原型繼承 Ironman 的原型:

function JS(n, d, p) {
    this.name = n;
    this.date = d;
    this.post = p;
    this.subject = 'JavaScript';
}

/* 使 JS.prototype 繼承 Ironman.prototype */
JS.prototype = Object.create(Ironman.prototype); // {}
JS.prototype.construtor = JS;

let record;

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

因為 JS 繼承了 Ironman,因此使用 JS 建立的物件也能執行 finish,但是 finish 其實是位於 Ironman 的原型。

JS.prototype; // {}
Ironman.prototype.isPrototypeOf(JS.prototype); // true

這樣就能知道,JS 的原型是空物件,但是內部屬性 __proto__ 是指向 Ironman 的原型。


Object.setPrototypeOf

Object.setPrototypeOf(obj, prototype); // obj
function JS(n, d, p) {
    this.name = n;
    this.date = d;
    this.post = p;
    this.subject = 'JavaScript';
}

Object.setPrototypeOf(JS.prototype, Ironman.prototype);

這比 Object.create 更簡單了!


extends

或者,也能使用類別函式的 extends 來繼承:

class JS extends Ironman {
    constructor() {
        this.name = n;
        this.date = d;
        this.post = p;
        this.subject = 'JavaScript';
    }
}

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


上一篇
JS 11 - 原型鏈
下一篇
JS 13 - Getter & Setter
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言