---
title: "Autobind Decorator"
description: "The @autobind decorator binds a class method to its instance so it keeps the correct this context when passed as a callback, caching the bound function."
metadata:
  - name: keywords
    content: "jodit autobind, decorator, this binding, callback, class method, event handler"
---
# @autobind

This decorator is used to bind class methods to the class instance. This is useful when you want to pass class methods as callbacks and preserve the correct `this` context.

```typescript
import { autobind } from 'jodit/core/decorators';

class UIComponent {
  @autobind
  onClick() {
    console.log(this); // UIComponent instance
  }
}

const elm = new UIComponent();
const button = document.createElement('button');
button.addEventListener('click', elm.onClick);
button.click(); // UIComponent instance
```

## Important Notes

- This decorator can only be applied to **individual methods**, not to entire classes
- The bound method is cached on the instance for performance
- The decorator throws a `TypeError` if applied to a non-method property


### autobind()

**autobind**(`_target`, `propertyKey`, `descriptor`): `PropertyDescriptor`

Defined in: [src/core/decorators/autobind/autobind.ts:33](https://github.com/xdan/jodit/blob/main/src/core/decorators/autobind/autobind.ts#L33)

Decorator that automatically binds a method to its class instance.
This is useful when passing methods as callbacks to preserve the correct `this` context.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `_target` | `object` |
| `propertyKey` | `string` |
| `descriptor` | `PropertyDescriptor` |

#### Returns

`PropertyDescriptor`

#### Example

```typescript
class MyComponent {
  @autobind
  handleClick() {
    console.log(this); // Always refers to MyComponent instance
  }
}

const component = new MyComponent();
const button = document.createElement('button');
button.addEventListener('click', component.handleClick); // `this` is correctly bound
```