How event handlers with arrow functions achieve context binding

Question

I know about the general theory of binding this(the site of the function call, which matters, implicit, explicit binding, etc.) and methods for solving the problem of this binding in React, so it always indicates what I want to thisbe (binding to the constructor, functions of arrows, etc.), but I'm struggling to get internal mechanisms.

Take a look at these two code snippets:

class demo extends React.component {
  goToStore(event) {
    console.log(this)
  }

  render() {
    <button onClick={(e) => this.goToStore(e)}>test</button>
  }
}

against.

class demo extends React.component {
  goToStore(event) {
    console.log(this)
  }

  render() {
    <button onClick={this.goToStore}>test</button>
  }
}

I know that:

• in both versions, we successfully completed the goToStore method, since thisinside the method it is render()automatically bound (by React) to the component instance
• the first one succeeds because of this,
• , es6 , this undefined

, , :

• , , this , this ( render())
• goToStore, .
• , , (object.function()) object , this
• goToStore ( ) .

, 3. 4. , 2.

<button onClick={this.goToStore}>test</button>

this .

, ?

Answer 1

MDN

;

,

onClick={(e) => this.goToStore(e)}

,

    (e) => { 
         return this.goToStore(e) 
    }

this , , , React.

, . , , :

var obj = {
    foo: function() {
        return this;   
    }
};

obj.foo() === obj; // true

. :

function foo() {
    alert(this);
}

foo() // window
new foo() // foo

.

, , this.goToStore(), React.

, onClick={this.goToStore}, , onClick, , this undefined window.

, onClick={(e) => this.goToStore(e)} , , , . , goToStore .

goToStore = (e) => {

}

this

Answer 2

1, , . 2 , ES6 , JavaScript .

, , , :

function demo() {
   // this is the constructor
}
demo.prototype.goToStore = function() {
  // handler
};
demo.prototype.render = function() {
  return React.createElement('button', onClick: this.goToStore);
}

, onClick . , , this, window.

, , - :

function demo() {
   // this is the constructor     
   this.goToStore = this.goToStore.bind(this);
   // same for every other handler
}
demo.prototype.goToStore = function() {
   // handling code.
};
demo.prototype.render = function() {
  // this goToStore reference has the proper this binded.
  return React.createElement('button', onClick: this.goToStore);
}

, , . , :

class demo extends Anything {
  constructor() {
  }
  bindedMethod = () => {
    // my context will always be the instance!
  }
}

bindedMethod , this , .

Answer 3

When rendering code is executed, it thisbelongs to the component class, so it can refer to the correct function. This means that it element.onClickpoints to a method goToStore.

When this function is called in the browser, it is called from the context of the html element (i.e. element.onClick()). Therefore, if the method is goToStorenot associated with the context of the component class, it inherits thisfrom the context of the element.

This answer contains additional information and further reading.