this keyword behaves differenty in arrow functions and normal functions

Question

I have the following 2 statements:

Without arrow function-

var cell = svg.selectAll("g")
    .data(nodes)
    .enter().append("svg:g")
    .attr("class", "cell")
    .on("click", (d) => {
            console.log(d);
            zoomIn(d,this);
    });

With arrow function-

var cell = svg.selectAll("g")
    .data(nodes)
    .enter().append("svg:g")
    .attr("class", "cell")
    .on("click", function(d) {
            console.log(d);
            zoomIn(d,this);
    });

The first one gives a window object in this while the second one gives the object returned by attr(). I read about it here. Is there a way to bind the object rather than the window object using arrow functions.

If you want dynamic `this`, use `function`, that's what it's for. — 1983, Jun 01 '16 at 12:01

score 3 · Accepted Answer · answered Jun 01 '16 at 11:52

No, arrow functions cannot be binded, as they simply do not define this in scope, just use this from outer scope.

Depending on what value this has in outer scope, that value will be used inside function. In your case it seems to be window object.

This does not differ greatly from using any other variable from outer scope.

this keyword behaves differenty in arrow functions and normal functions

1 Answers1