How to bind methods when destructuring an object in JavaScript?

Question

How to bind methods when destructuring an object in JavaScript?

const person = {
  getName: function() {
    console.log(this);
  }
};

var a = person.getName;
var b = person.getName.bind(person);
var {getName: c} = person;

person.getName(); //=> {getName: [Function]}
a();              //=> window or global
b();              //=> {getName: [Function]}
c();              //=> window or global

I want c to log in the console its "parent" object {getName: [Function]}.

Is there any way to bind all methods when destructuring an object in one destructuring line?

Answer 1

No, there is no way. Functions detached from objects lose the original context. And destructing in JavaScript has no syntax to do something with extracted values on the fly.

Answer 2

There is a simple workaround using ES6 classes. You can use bind in the class constructor to manually set the context of the function.

In the example below, getName() will "survive" the destructuring :

class Person {
  constructor() {
    this.getName = this.getName.bind(this);
  }

  getName() {
    console.log(this);
  }
}

const {
  getName
} = new Person();

getName(); // Person { getName: [Function: bound getName] }