# \[\[HomeObject]]

[JS](/web/js.md) ⟩ [types](/web/js/val/type.md) ⟩ [object](broken://pages/c3kdqarPVmCRDuMeH3s5) ⟩ [method](/web/js/val/obj/method.md) ⟩ HomeObject

{% hint style="info" %}
🚧
{% endhint %}

![](/files/a4pJy2C0wG8s7p2oJc6f)

{% tabs %}
{% tab title="🗺️ 圖表" %}

{% endtab %}

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

* [replit](https://replit.com/@pegasusroe/JS-method-HomeObject#index.js)

```javascript
 const { log } = console;

let animal = {
    sayHi() { log(`I'm a 🐶`) }    // [[HomeObject]] === animal
};

let rabbit = {
    __proto__: animal,
    sayHi() { super.sayHi() }      // [[HomeObject]] === rabbit
};

let plant = {
    sayHi() { log("I'm a ☘️") }    // [[HomeObject]] === plant
};

let tree = {
    __proto__: plant,

    // (non-method syntax for objects❗)
    // ----------------------------------------------------------------
    // ⭐ `rabbit.sayHi` method remembers its [[HomeObject]]❗
    // ⭐ `tree.sayHi` is NOT a method❗
    //    (just a "reference" to another method)
    sayHi: rabbit.sayHi            // [[HomeObject]] === rabbit
    // ----------------------------------------------------------------
};

tree.sayHi();
// super.sayHi()                   // ⭐ in `rabbit.sayHi` method
//
//     super === [[HomeObject]].[[Prototype]]
//           === rabbit.[[Prototype]]
//           === animal
//
// animal.sayHi()                  // "I'm a 🐶"
```

{% endtab %}

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

* only <mark style="color:yellow;">**methods**</mark> have <mark style="color:purple;">**`[[HomeObject]]`**</mark>.
* <mark style="color:purple;">**`[[HomeObject]]`**</mark> <mark style="color:red;">**can’t be changed**</mark>.
* [super](/web/js/val/class/inheritance/super.md) can only be used <mark style="color:yellow;">**within methods**</mark>.
* [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;
  {% endhint %}

{% hint style="success" %}

* 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 %}

{% hint style="danger" %}
for <mark style="color:red;">**objects**</mark>, **methods** must be specified：&#x20;

* as <mark style="color:blue;">`method()`</mark>(**method** syntax)
* <mark style="color:red;">**not**</mark> as <mark style="color:blue;">`nonMethod: function()`</mark> (**non-method** syntax)
  {% endhint %}

```javascript
const { log } = console;

// -------------------------------------------------------------
// ⭐️ only methods have [[HomeObject]].
// ⭐️ `super` can only be used in a method (with [[HomeObject]])
// ⭐️ super === [[HomeObject]].[[Prototype]]
// -------------------------------------------------------------

// ❌ regular function
// --------------------
function f1(){ super.method() }
//             ^^^^^                // ⛔️ SyntaxError: 'super' unexpected here.

// ❌ arrow function (not in a method)
// ------------------------------------
let f2 = () => super.method();
//             ^^^^^                // ⛔️ SyntaxError: 'super' unexpected here.

const a = {
    // ❌ object property (function as property value)
    // ------------------------------------------------
    nonMethod: function(){ super.method() }
    //                     ^^^^^    // ⛔️ SyntaxError: 'super' unexpected here.
}

const b = {
    // ✅ object method:
    // ------------------
    // • [[HomeObject]] === b
    // • super === [[HomeObject]].[[Prototype]]
    //         === b.[[Prototype]]
    //         === Object.prototype
    method(){ log(`${super.constructor.name}`) }
}

b.method();    // Object
```

{% endtab %}

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

* [ ] JS.info ⟩&#x20;
  * [x] [\[\[HomeObject\]\]](https://javascript.info/class-inheritance#homeobject) - every **method** remembers its [HomeObject](https://javascript.info/class-inheritance#homeobject).
  * [ ] [Mixins](https://javascript.info/mixins#a-mixin-example)
    {% endtab %}

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

* 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).
* [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;
* [mixin inheritance](/web/js/val/obj/extend/mixin/mixin-inheritance.md) is possible through <mark style="color:purple;">\[\[HomeObject]]</mark>.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/js/val/obj/method/home-object.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.