# inheritance

[JS](../..) ⟩ [value](..) ⟩ [object](../obj) ⟩ [class]() ⟩ inheritance &#x20;

{% hint style="success" %}
* access <mark style="color:yellow;">**properties**</mark> on [**object literal**](../obj/create/obj) <mark style="color:yellow;">**/**</mark> [**class**]()'s [**prototype object**](../obj/proto). (<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**](../obj/create/obj) <mark style="color:yellow;">**/**</mark> [**class**]())
* 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](inheritance/derived-class-init "mention")
* [override-constructor](inheritance/override-constructor "mention")
* [override-methods](inheritance/override-methods "mention")
* [override-class-fields](inheritance/override-class-fields "mention")
* [super](inheritance/super "mention") - 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 [proto](../obj/proto "mention").
{% endtab %}
{% endtabs %}
