Setting `this` to the caller of the function

Question

The current project I'm working on is creating a game of checkers.

I'm using the function constructor pattern, and I've set a function on a prototype of one of the constructors.

What my issue is, is that the this keyword points to the global object instead of the caller of the function.

How can I set this to be the caller of the function?

function Piece(x, y, side) {...}

Piece.prototype.getPossibleMoves = () => {

    let possibleMoves = [];

    console.log(this); // returns global object

    if (this.isKing) {
        ...
    } else {
        ...
    }
    return possibleMoves;
}

// Testing

const king = new Piece(5, 5, "bottom");
king.isKing = true;

console.log(king.getPossibleMoves());

So that my desired functionality would be

somePiece.getPossibleMoves()

Rather than

Piece.getPossibleMoves(somePiece);

Which I could implement, but would rather do option one, as it feels more elegant.

The issue was the arrow function expressions don'( refer to this the same way regular function expressions and statements do!

In the normal course of things, given your `Piece` above, in `somePiece.getPossibleMoves()`, `this` during the call will have the value `somePiece` has. So it's not clear what the problem is. Please update your question with a [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button; [here's how to do one](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-do-a-runnable-example-with-stack-snippets-how-do-i-do-tha)). — T.J. Crowder, Nov 28 '17 at 12:59
If the problem is that you're providing `somePiece.getPossibleMoves` to something as a callback, then [this question's answers](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) will show you how to deal with that. — T.J. Crowder, Nov 28 '17 at 13:00
@Kaddath: It's more about how you call `getPossibleMoves` than whether you used `new`. — T.J. Crowder, Nov 28 '17 at 13:05
Aren't you re-inventing the wheel considering this library: https://github.com/jhlywa/chess.js/ — Dexygen, Nov 28 '17 at 13:10
@PiotrAdamMilewski You can just as easily learn something by reading the source code of an existing library — Dexygen, Nov 28 '17 at 13:15

Piotr Adam Milewski · Accepted Answer · 2017-11-28T13:10:07.913

1

Lambda expressions - () => {...} don't have their this
Instead try:

Piece.prototype.getPossibleMoves = function(){ ...

Like in my fiddle, where the function works as expected.

edited Nov 28 '17 at 13:10

answered Nov 28 '17 at 13:05

Piotr Adam Milewski

10,602
2
18
36

You are the man. I forgot that the ES6 function expressions don't refer to this the same way old expressions do. Thank you so much! :) – Tyler Travis Nov 28 '17 at 13:09
@TylerTravis to be honest i did not even remembered that, just tried to reproduce the code from Your question :) if You don't have don't have further questions, feel free to mark the anwser – Piotr Adam Milewski Nov 28 '17 at 13:11
They're called "arrow functions." A lambda expression is a function that isn't bound to an identifier. Arrow functions frequently are bound to an identifier (or property) (and other times frequently aren't; but they were in the OP's code). More: https://en.wikipedia.org/wiki/Anonymous_function – T.J. Crowder Nov 28 '17 at 13:19

Setting `this` to the caller of the function

1 Answers1