> 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/concept/execution-context/this/this-determined-on-call-site.md).

# "this" determined on call site❗️

(usually) "this" is determined on run-time

[JS](/web/js.md) ⟩ [object](/web/js/val/obj.md) ⟩ "[this](/web/js/concept/execution-context/this.md)" ⟩ determined on call site

{% hint style="danger" %} <mark style="color:yellow;">**(**</mark><mark style="color:orange;">**usually**</mark><mark style="color:yellow;">**)**</mark> the <mark style="color:yellow;">**value**</mark> of [this](/web/js/concept/execution-context/this.md) is：

* ["this" determined on call site❗️](/web/js/concept/execution-context/this/this-determined-on-call-site.md) <mark style="color:yellow;">**(**</mark>[runtime](/web/js/compile/runtime.md)<mark style="color:yellow;">**)**</mark>&#x20;
* <mark style="color:red;">**not by**</mark> function<mark style="color:yellow;">**/**</mark>method <mark style="color:yellow;">**declaration (**</mark>[compile-time](/web/js/compile/compile-time.md)<mark style="color:yellow;">**)**</mark>

but <mark style="color:yellow;">**there are**</mark> <mark style="color:red;">**exceptions**</mark>,  👉 see：arrow function [arrow function as class field❗️](/web/js/val/func/arrow/arrow-function-as-class-field.md)
{% endhint %}

{% tabs %}
{% tab title="💈範例" %}
:floppy\_disk: replit：[this determined on call site](https://replit.com/@pegasusroe/this-determined-on-call-site#index.js)

```javascript
// object
let user = {

    name: "Joe",

    sayHi() {
        
        console.log(`Hi, I am ${this.name}.`);
        //                      ╰──╯  
        //                        ↳ ⭐️ value of `this` is NOT determined here.
        
        console.log(`... (sayHi() called by ${this})`)
    }
};

// ❗assign a new name
let f = user.sayHi;    // ⭐️ the function is NOT invoked here❗

// ⭐️ call site #1
user.sayHi();          // ⭐️ this === user (object before "dot")

// Hi, I am Joe.
// ... (sayHi() called by [object Object])

// ⭐️ call site #2
f();                   // ❗this      = window / globalObject / undefined❗
                       // ❗this.name = undefined / undefined / ⛔ TypeError❗

// ❗Hi, I am undefined.
// ❗... (sayHi() called by [object global])
```

{% endtab %}

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

* [arrow function](/web/js/val/func/arrow.md) ⟩ [arrow function as class field❗️](/web/js/val/func/arrow/arrow-function-as-class-field.md) - [class](/web/js/val/class.md)'s <mark style="color:yellow;">**body**</mark> has its [this](/web/js/concept/execution-context/this.md) <mark style="color:yellow;">**context**</mark>.
* [environment record](/web/js/concept/execution-context/lexical-environment/environment-record.md) - where the value of "this" is stored.
  {% endtab %}
  {% endtabs %}