> 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.md).

# inheritance

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

{% 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)

// ⭐️ subclass
class B extends A { 

    // ⭐️ subclass constructor
    // (if omitted, a default constructor is created automatically)
    constructor(...args) {
        // ⭐️ must call super() before referencing `this`
        super(...args)    // ⭐️ superclass constructor
        // intialize `this` ...
    }
    
    // override method
    method() {
        super.method()        // ⭐️ call parent's method (optional)
        // ...
    }
}
```

{% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}

* [derived class init](/web/js/val/class/inheritance/derived-class-init.md)
* [override constructor](/web/js/val/class/inheritance/override-constructor.md)
* [override methods](/web/js/val/class/inheritance/override-methods.md)
* [override class fields](/web/js/val/class/inheritance/override-class-fields.md)
* [super](/web/js/val/class/inheritance/super.md) - invoke/access superclass/parent's constructor/method/properties.
  {% endtab %}

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

* [ ] JS.info ⟩&#x20;
  * [ ] [Class inheritance](https://javascript.info/class-inheritance)
  * [ ] [Prototypal inheritance](https://javascript.info/prototype-inheritance)
  * [ ] [Class extends Object?](https://javascript.info/static-properties-methods#class-extends-object) - 說明 <mark style="color:orange;">class A</mark> 與 <mark style="color:orange;">class A extends Object</mark> 有何不同 ⭐️
    {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
if a class <mark style="color:orange;">**extends**</mark> another class and has <mark style="color:red;">**no**</mark> <mark style="color:purple;">**constructor()**</mark>, then the following “<mark style="color:orange;">**default**</mark>” <mark style="color:purple;">**`constructor()`**</mark> is generated:

```javascript
class B extends A {
  constructor(...args) { super(...args) }  // ⭐️ auto-generated
}
```

{% endhint %}

{% hint style="danger" %}
**differences** between <mark style="color:orange;">class A</mark> and class <mark style="color:orange;">A extends Object</mark>

```
                       class A          class A extends Object
---------------------------------------------------------------
must call super()         No                    Yes
in constructor
---------------------------------------------------------------
A.__proto__         Function.prototype         Object
---------------------------------------------------------------
```

👉 See: JS.info ⟩ [Class extends Object?](https://javascript.info/static-properties-methods#class-extends-object)
{% endhint %}
{% endtab %}

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

* use [prototype](/web/js/val/obj/proto.md).
  {% endtab %}
  {% endtabs %}