# class A vs. class A extends Object

{% tabs %}
{% tab title="💾 程式" %}
{% hint style="info" %}
<mark style="color:blue;">**class A extends Object**</mark> 與 <mark style="color:blue;">**class A**</mark> 最大的不同就是：

* 改變繼承路線，繼承了 [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) (而不是 Function.prototype)
* 變成 <mark style="color:orange;">**derived class**</mark> (而不是 base class)，因此在 <mark style="color:purple;">**constructor**</mark> (如果有的話) 內必須呼叫 [super](../../../class/inheritance/super "mention")。
{% endhint %}

![](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FHOkBaUsiOyTZBodNTvmT%2Fclass%20A%20vs%20class%20A%20extends%20Object%202.png?alt=media\&token=a59b548f-9620-43d0-aa72-7a4169597b1e)

* replit ⟩ [class A vs class A extends Object](https://replit.com/@pegasusroe/JS-class-A-vs-class-A-extends-Object#index.js)

```javascript
// -------------------------------------------
// ⭐ B can access Object's "static methods",
// ⭐ but A can't❗
// -------------------------------------------
class A {}
class B extends Object {}

const obj = { name: 'Joe', age: 21 };

// ⛔ TypeError: `A.getOwnPropertyNames` is not a function❗
A.getOwnPropertyNames(obj);

// ⭐ normally call `Object.getOwnPropertyNames(obj)` directly.
B.getOwnPropertyNames(obj),    // [ 'name', 'age' ]
```
{% endtab %}

{% tab title="📗 參考" %}
* [x] JS.info ⟩ [Class extends Object?](https://javascript.info/static-properties-methods#class-extends-object)&#x20;
{% endtab %}

{% tab title="📘 手冊" %}
* MDN ⟩ [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference) ⟩&#x20;
  * [JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide) ⟩ [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)
  * [built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) ⟩&#x20;
    * [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
    * [Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function)
{% endtab %}
{% endtabs %}
