Suggest an edit

Improve this article

Refine the answer for “Function context”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What is the function context

> **Function context** is the object referenced by the `this` keyword inside a function **during its execution**.

The context is determined **at the moment the function is called**, not at the moment it is declared.

---

## Example

```javascript
function showThis() {
  console.log(this);
}

showThis(); // In a regular call - context = global object
```

In a browser:

```javascript
this === window
```

In Node.js:

```javascript
this === undefined (in strict mode)
```

---

## Context depends on the way the function is called

| How we call the function | What `this` will be |
|---|---|
| Regular call `func()` | Global object (`window` or `undefined` in strict mode) |
| Call as a method `obj.method()` | The `obj` object |
| Via `new` | The newly created object |
| Via `call` / `apply` / `bind` | The manually specified object |
| In an arrow function | `this` is taken from the outer context (lexical) |

---

## 1. Regular call (global context)

```javascript
function test() {
  console.log(this);
}

test(); // window (or undefined in strict mode)
```

---

## 2. Object method

```javascript
const user = {
  name: "Alice",
  sayHi() {
    console.log(this.name);
  },
};

user.sayHi(); // "Alice"
```

Here `this` refers to the **user** object, because the function is called as `user.sayHi()`.

---

## 3. Losing context

```javascript
const user = {
  name: "Alice",
  sayHi() {
    console.log(this.name);
  },
};

const hi = user.sayHi;
hi(); // undefined (this is lost)
```

Why:

- We passed a **reference to the function**, not the object itself.
- Calling `hi()` is a regular call, without the `user` context.

Fix:

```javascript
const hi = user.sayHi.bind(user);
hi(); // "Alice"
```

---

## 4. Context with `new`

```javascript
function User(name) {
  this.name = name;
}

const u = new User("Alice");
console.log(u.name); // "Alice"
```

Here `this` points to the **newly created object** (`u`).

---

## 5. call / apply / bind

```javascript
function greet() {
  console.log(this.name);
}

const user = { name: "Tim" };

greet.call(user);  // "Tim"
greet.apply(user); // "Tim"

const boundGreet = greet.bind(user);
boundGreet();      // "Tim"
```

| Method | What it does |
|---|---|
| `call(thisArg, arg1, arg2, …)` | calls the function with the given `this` and arguments |
| `apply(thisArg, [args])` | the same, but arguments are passed as an array |
| `bind(thisArg)` | returns a new function with a fixed `this` |

---

## 6. Arrow functions - a special case

```javascript
const obj = {
  name: "Alice",
  arrow: () => console.log(this.name),
  regular() {
    console.log(this.name);
  },
};

obj.arrow();   // undefined (this - outer context, not obj)
obj.regular(); // "Alice"
```

Important:

- Arrow functions **have no own** `this`.
- They "take" `this` from the outer lexical environment - where they were created.

---

## Key takeaway

| Situation | What `this` will be |
|---|---|
| Regular call | `window` / `undefined` |
| Object method | The object itself |
| `new` | The new instance |
| `call`, `apply`, `bind` | The manually specified object |
| Arrow function | Inherits `this` from outside |

---

## A simple analogy

> Function context is **"the owner of the call"**.
> Whoever calls the function becomes `this`.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts538 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.