1. auto-bind
Automatically bind methods to their class instance
auto-bind
Package: auto-bind
Created by: sindresorhus
Last modified: Sat, 17 Jun 2023 00:11:31 GMT
Version: 5.0.1
License: MIT
Downloads: 13,689,793
Repository: https://github.com/sindresorhus/auto-bind

Install

npm install auto-bind
yarn add auto-bind

auto-bind

Automatically bind methods to their class instance

It also correctly binds inherited properties.

Install

 npm install auto-bind

Usage

 import autoBind from '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

An 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.

React

Same as autoBind but excludes the default React component methods.

 import autoBindReact from 'auto-bind/react';

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

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

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin