Ways to bind instance methods in JS

README.md

Ways of binding Javascript class methods

Example of different ways to bind instance methods so they persist access to this

Run this on babeljs.io

One interesting thing to note: The autobindMethod and the constructorBuiltMethod currently transpile to the same output Javascript ([email protected]).

Methods

constructorBuiltMethod - Define and attach the method in the constructor

class MyThing {
  constructor() {
    this.constructorBuiltMethod = () => {
      console.log('myOtherMethod called', this.someProp);
    }
  }
}

manualBindMethod - Define the method on the class, but overwrite it with a bound method in the constructor

class MyThing {
  constructor() {
    this.manualBindMethod = this.manualBindMethod.bind(this);
  }
  manualBindMethod() {
    console.log('manualBindMethod called', this.someProp);
  }
}

autobindMethod - Define the method on the class as an arrow function, which takes the class this

class MyThing {
  autobindMethod = () => {
    console.log('myMethod called', this.someProp);
  }
}

instance-binding-output.js

// This is the babel output of instance-binding-src.js to show what is actually happening

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var MyThing = function () {
  function MyThing() {
    var _this = this;

    _classCallCheck(this, MyThing);

    this.autobindMethod = function () {
      console.log('myMethod called', _this.someProp);
    };

    this.someProp = 'somePropValue';
    this.constructorBuiltMethod = function () {
      console.log('myOtherMethod called', _this.someProp);
    };
    this.manualBindMethod = this.manualBindMethod.bind(this);
  }

  _createClass(MyThing, [{
    key: 'manualBindMethod',
    value: function manualBindMethod() {
      console.log('manualBindMethod called', this.someProp);
    }
  }]);

  return MyThing;
}();

var instance = new MyThing();
instance.constructorBuiltMethod();
instance.manualBindMethod();
instance.autobindMethod();

instance-binding-src.js

// Example of different ways to bind instance methods so they persist access to `this`
//
// constructorBuiltMethod - Define and attach the method in the constructor
// manualBindMethod - Define the method on the class, but overwrite it with a bound method in the constructor
// autobindMethod - Define the method on the class as an arrow function, which takes the class `this`
//
// Run this at https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Cstage-2&targets=&browsers=&builtIns=false&code=class%20MyThing%20%7B%0A%20%20%0A%20%20constructor()%20%7B%0A%20%20%20%20this.someProp%20%3D%20'somePropValue'%3B%0A%20%20%20%20this.constructorBuiltMethod%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20console.log('myOtherMethod%20called'%2C%20this.someProp)%3B%0A%20%20%20%20%7D%0A%20%20%20%20this.manualBindMethod%20%3D%20this.manualBindMethod.bind(this)%3B%0A%20%20%7D%0A%20%20%0A%20%20autobindMethod%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20console.log('myMethod%20called'%2C%20this.someProp)%3B%0A%20%20%7D%0A%20%20%0A%20%20manualBindMethod()%20%7B%0A%20%20%20%20console.log('manualBindMethod%20called'%2C%20this.someProp)%3B%0A%20%20%7D%0A%20%20%0A%7D%0A%0Aconst%20instance%20%3D%20new%20MyThing()%3B%0Ainstance.constructorBuiltMethod()%3B%0Ainstance.manualBindMethod()%3B%0Ainstance.autobindMethod()%3B

class MyThing {
  
  constructor() {
    this.someProp = 'somePropValue';
    this.constructorBuiltMethod = () => {
      console.log('myOtherMethod called', this.someProp);
    }
    this.manualBindMethod = this.manualBindMethod.bind(this);
  }
  
  autobindMethod = () => {
    console.log('myMethod called', this.someProp);
  }
  
  manualBindMethod() {
    console.log('manualBindMethod called', this.someProp);
  }
  
}

const instance = new MyThing();

instance.constructorBuiltMethod();
instance.manualBindMethod();
instance.autobindMethod();