How to alias this in JavaScript 2015 (EcmaScript 6)?

Question

In EcmaScript 5, we can alias this as var ctrl = this as shown in following snippet.

// EcmaScript 5
function BookController {
    var ctrl = this;

    ctrl.books = [];

    ctrl.getBook = getBook;

    function getBook(index) {
        return ctrl.books[index];
    }
}

Equivalent BookController in ES6 using class. I had a scenario in which getBook is called with this other than BookController. In getBook function, I want to make sure the context is always BookController so I want to alias this of BookController in ES6.

// EcmaScript 6
class BookController {

    constructor() {
        this.books = [];
    }

    getBook(index) {
        return this.books[index];
    }
}

How to alias this in JavaScript 2015 (EcmaScript 6)?

Although your question does make sense, it is usually up to the caller to ensure that functions are called in a proper context. Otherwise, you cannot use prototype inheritance the way it was designed. — Tobias, Aug 28 '16 at 10:16
I wished to not populate my page with `this`, so `function references() { countrefs++;function refs() {this.refs = [];this.citeRef = (idx) => { return(this.refs[idx] = {});};return this.refs;}return new refs();}` and to use `export default function Dependency() {const dependen = references().citeRef(countrefs);return dependen}` might work. Would like to lose that `()` as well, though. — Nick Carducci for Carface Bank, May 01 '22 at 22:56

score 7 · Accepted Answer · edited Aug 28 '16 at 13:08

Equivalent BookController in ES6 using class.

No, it's not equivalent, it's markedly different. Your class example is essentially equivalent to this ES5:

function BookController {
    this.books = [];
}
BookController.prototype.getBook = function getBook(index) {
    return this.books[index];
};

Note that getBook is defined on the prototype that will be assigned to instances when you use new BookController. But that's not what your first example does. Your first example assigns a different getBook to each instance, as an "own" (not inherited) property.

In getBook function, I want to make sure the context is always BookController so I want to alias this of BookController in ES6.

It's not an alias, it's a reference. You do it much the same way (in the constructor), but without the need of a variable:

// EcmaScript 6
class BookController {

    constructor() {
        this.books = [];
        this.getBook = index => {
            return this.books[index];
        };
    }
}

Because that's an arrow function, it closes over this.

Example:

// EcmaScript 6
class BookController {

  constructor() {
    this.books = [];
    this.getBook = index => {
      return this.books[index];
    };
  }
}

let c1 = new BookController();
c1.books.push("The Hitchhiker's Guide to the Galaxy");
let f1 = c1.getBook;

let c2 = new BookController();
c2.books.push("Do Androids Dream of Electric Sheep?");
let f2 = c2.getBook;

console.log(f1(0));
console.log(f2(0));

Note, though, that without a specific reason to do that, the normal thing is to leave management of this to the caller.

The thing to take home from this is that OP's assertion *"Equivalent BookController in ES6 using class"* wasn't quite right. They are not equivalent because the first example assigns the methods in constructor, while the second uses `prototype` behind the scenes. — noppa, Aug 28 '16 at 10:26
`this.getBook = this.getBook.bind(this);` --- just to keep code clear and separate implementation. — zerkms, Aug 28 '16 at 10:46
@zerkms: That is another option, yes. I don't think it's clearer, though, to define a function on the prototype that you're actually only going to use as an "own", bound function. — T.J. Crowder, Aug 28 '16 at 10:48
@T.J.Crowder agree that it's subjective, but when number of functions grows - I think it's clearer to declare them in a "native" way and then just rebound in constructor. — zerkms, Aug 28 '16 at 10:49

How to alias this in JavaScript 2015 (EcmaScript 6)?

1 Answers1