> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/val/class/inheritance/super.md).

# super

[JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ [object](/web/js/val/obj.md) ⟩ [class](/web/js/val/class.md) ⟩ [inheritance](/web/js/val/class/inheritance.md) ⟩ super 

{% hint style="success" %}

* access <mark style="color:yellow;">**properties**</mark> on [**object literal**](/web/js/val/obj/create/obj.md) <mark style="color:yellow;">**/**</mark> [**class**](/web/js/val/class.md)'s [**prototype object**](/web/js/val/obj/proto.md). (<mark style="color:purple;">`super.prop`</mark> <mark style="color:yellow;">**/**</mark> <mark style="color:purple;">`super[expr]`</mark> are <mark style="color:yellow;">**valid**</mark> in any [method definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions) in [**object literal**](/web/js/val/obj/create/obj.md) <mark style="color:yellow;">**/**</mark> [**class**](/web/js/val/class.md))
* invoke <mark style="color:yellow;">**superclass constructor**</mark>. (<mark style="color:purple;">`super(...args)`</mark> is valid in class constructors)

```javascript
// in any method definition
super.prop        // parent's property
super[expr]       // (same)

// in subclass constructor
super(...args)    // superclass constructor
```

{% endhint %}

{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="danger" %} <mark style="color:purple;">**`super`**</mark>&#x20;

* <mark style="color:yellow;">**is**</mark>**&#x20;**<mark style="color:red;">**not**</mark> a variable that points to the [**prototype object**](/web/js/val/obj/proto.md):exclamation:
* attempting to <mark style="color:yellow;">**read**</mark> <mark style="color:purple;">**super**</mark> <mark style="color:red;">**itself**</mark> is a [`SyntaxError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError):exclamation:
  {% endhint %}

{% hint style="danger" %}

* <mark style="color:red;">**arrow functions**</mark> do <mark style="color:red;">**not**</mark> have <mark style="color:purple;">**`super`**</mark>. (👉 see:  [Arrow functions revisited](https://javascript.info/arrow-functions))&#x20;
* If accessed, it’s taken from the <mark style="color:orange;">**outer function**</mark>.

👉 see: [JavaScript.info](https://javascript.info/class-inheritance#overriding-a-method)
{% endhint %}

💾 程式： [replit](https://replit.com/@pegasusroe/JS-arrow-functions-dont-have-super#index.js)

```javascript
// superclass
class A {

    constructor(name) {
        this.speed = 0;
        this.name = name;
    }

    // ⭐ super.stop()
    stop() {
        this.speed = 0;
        log(`${this.name} stands still.`);
    }

}


class B extends A {
    
    // ✅ OK
    stop() {
        // ---------------------------------------------------
        // • arrow function doesn't have its own `super`.
        // • if accessed, it’s taken from the outer function.
        // ---------------------------------------------------
        // ⭐ call `super.stop()` after 1 sec
        //         ╭── arrow func ──╮
        setTimeout(() => super.stop(), 1000);    
    }
    
    // ❌ doesn't work
    stop2() {
        //          ╭──── ❌ regular func ───╮
        setTimeout( function(){ super.stop() }, 1000);
        //                      ^^^^^
        // ⛔ SyntaxError: 'super' keyword unexpected here.
    }
}

new B("Bunny").stop();    // "Bunny stands still." (after 1 sec)
```

{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
⭐️ 非常重要：

* [super](/web/js/val/class/inheritance/super.md) can only be used <mark style="color:yellow;">**within**</mark> [<mark style="color:yellow;">**methods**</mark>](/web/js/val/obj/method.md).
* [super](/web/js/val/class/inheritance/super.md) === <mark style="color:purple;">**`[[HomeObject]].[[Prototype]]`**</mark>⭐️&#x20;
* a method's <mark style="color:orange;">**HomeObject**</mark> is <mark style="color:yellow;">**only**</mark> used when calling [super](/web/js/val/class/inheritance/super.md).
* if a **method** <mark style="color:yellow;">**does not**</mark> use [super](/web/js/val/class/inheritance/super.md), then we can still consider it "<mark style="color:orange;">**free**</mark>" (like a free [function](/web/js/val/func.md))
  {% endhint %}

⭐️ <mark style="color:red;">**derived class**</mark>**&#x20;**<mark style="color:orange;">**initialization**</mark> 的過程：

{% hint style="success" %}

1. 先執行 <mark style="color:purple;">**super()**</mark>。若 <mark style="color:orange;">**parent class**</mark> 為：
   * <mark style="color:yellow;">**base**</mark>**&#x20;class**：
     1. 新增 <mark style="color:purple;">**this**</mark> 物件，並初始化 <mark style="color:yellow;">**base class fields**</mark>。
     2. 執行 <mark style="color:red;">**base constructor**</mark>。
   * <mark style="color:red;">**derived**</mark>**&#x20;class**：\
     (recursive) 過程 1. 2. 3. 再跑一遍。
2. 初始化 <mark style="color:green;">**derived class fields**</mark>。
3. 執行 <mark style="color:red;">**derived constructor**</mark> 裡面 <mark style="color:blue;">**super()**</mark> <mark style="color:red;">**以下**</mark>的初始化動作。
   {% endhint %}

👉 see： [override class fields](/web/js/val/class/inheritance/override-class-fields.md)

{% hint style="warning" %}

* if a **method** <mark style="color:yellow;">**does not**</mark> use <mark style="color:purple;">**`super`**</mark>, then we can still consider it "<mark style="color:orange;">**free**</mark>" (like a free [function](/web/js/val/func.md)).
* it’s <mark style="color:red;">**not safe**</mark> to <mark style="color:yellow;">**copy**</mark> a **method** with <mark style="color:purple;">**super**</mark> from one object to another. (a method remembers its [\[\[HomeObject\]\]](/web/js/val/obj/method/home-object.md))

👉 See： [\[\[HomeObject\]\]](/web/js/val/obj/method/home-object.md)
{% endhint %}
{% endtab %}

{% tab title="👥 相關" %}

* [this](/web/js/concept/execution-context/this.md)
* [super](/web/js/val/class/inheritance/super.md) === [<mark style="color:purple;">**`[[HomeObject]]`**</mark>](/web/js/val/obj/method/home-object.md)<mark style="color:purple;">**`.`**</mark>[<mark style="color:purple;">**`[[Prototype]]`**</mark>](/web/js/val/obj/proto.md)⭐️&#x20;
* <mark style="color:yellow;">**must**</mark> call <mark style="color:purple;">**super**</mark> in [override constructor](/web/js/val/class/inheritance/override-constructor.md).
* [override methods](/web/js/val/class/inheritance/override-methods.md) can call <mark style="color:purple;">**super**</mark>.
* [<mark style="color:orange;">**derived class fields**</mark>](/web/js/val/class/inheritance/override-class-fields.md) are initialized <mark style="color:yellow;">**immediately**</mark> after <mark style="color:purple;">**super()**</mark>.
* a method's [<mark style="color:orange;">**HomeObject**</mark>](/web/js/val/obj/method/home-object.md) is <mark style="color:yellow;">**only**</mark> used when calling <mark style="color:purple;">**super**</mark>.
* [arrow function](/web/js/val/func/arrow.md) <mark style="color:red;">**doesn’t have own**</mark> <mark style="color:purple;">**this**</mark> or <mark style="color:purple;">**super**</mark>.
* question [class A vs. class A extends Object](/web/js/val/obj/extend/inheritance/class-a-vs.-class-a-extends-object.md) relates to <mark style="color:purple;">**super**</mark>.
* <mark style="color:purple;">**super**</mark> is used in [mixin inheritance](/web/js/val/obj/extend/mixin/mixin-inheritance.md).
  {% endtab %}

{% tab title="✨ 範例" %}

* [TypedMap](/web/js/val/class/example/typedmap.md) - subclass of Map that checks key/value types.
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] JS.info ⟩&#x20;
  * [x] [overriding constructor](https://javascript.info/class-inheritance#overriding-constructor)
  * [ ] [super: internals, \[\[HomeObject\]\]](https://javascript.info/class-inheritance#super-internals-homeobject) ⭐️
  * [ ] [Mixins](https://javascript.info/mixins#a-mixin-example)
    {% endtab %}

{% tab title="📘 手冊" %}

* [super](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super)
  {% endtab %}
  {% endtabs %}