auto-bind

What is auto-bind?

The auto-bind npm package is used to automatically bind methods of a class to their instance. This is particularly useful in React components to avoid having to manually bind 'this' in the constructor for every method that needs it.

What are auto-bind's main functionalities?

Automatic binding of class methods

This feature automatically binds all methods of a class instance to the instance itself, ensuring that 'this' within the methods refers to the class instance even when the method is extracted and called separately.

const autoBind = require('auto-bind');

class MyClass {
  constructor() {
    autoBind(this);
  }

  myMethod() {
    // method body that uses 'this'
  }
}

const instance = new MyClass();
const { myMethod } = instance;
myMethod(); // 'this' is correctly bound to the instance

Other packages similar to auto-bind

bind-methods

bind-methods is a package that binds an object's methods to itself. It is similar to auto-bind but does not automatically exclude constructor, React lifecycle methods, or methods already bound. It requires you to specify which methods to bind.

class-autobind

class-autobind is another package that offers automatic binding of class methods to the instance. It is similar to auto-bind but is implemented as a decorator, which can be used in projects that support JavaScript decorators.

react-autobind

react-autobind is designed specifically for React components to automatically bind methods to the component instance. It is similar to auto-bind but is tailored for React and can be more convenient for React developers.

README

auto-bind

Automatically bind methods to their class instance

It also correctly binds inherited properties.

Install

$ npm install auto-bind

Usage

const autoBind = require('auto-bind');

class Unicorn {
	constructor(name) {
		this.name = name;
		autoBind(this);
	}

	message() {
		return `${this.name} is awesome!`;
	}
}

const unicorn = new Unicorn('Rainbow');

// Grab the method off the class instance
const message = unicorn.message;

// Still bound to the class instance
message();
//=> 'Rainbow is awesome!'

// Without `autoBind(this)`, the above would have resulted in
message();
//=> Error: Cannot read property 'name' of undefined

API

autoBind(self, options?)

Bind methods in self to their class instance. Returns the self object.

self

Type: object

Object with methods to bind.

options

Type: object

include

Type: Array<string | RegExp>

Bind only the given methods.

exclude

Type: Array<string | RegExp>

Bind methods except for the given methods.

autoBind.react(self, options?)

Same as autoBind, but excludes the default React component methods.

class Foo extends React.Component {
	constructor(props) {
		super(props);
		autoBind.react(this);
	}

	// …
}

Related

• bind-methods - Bind all methods in an object to itself or a specified context