Arrow function is a good thing. It is easy to write and has a clear structure. However, if you are used to this in es5, you may be disturbed when you use and understand es6. Learn from online case analysis.

Explain the process and I< On this keyword case >In the same order, comparative learning is helpful for understanding and memory.

First understand: this in arrow function is bound when defining function (es6), not when executing function (es5).

Bind when defining. This is inherited from this in the context of parent execution! So what is the execution context? Execution context is execution environment! So what is the execution environment? The execution environment is the scope in which your variables or functions can be executed, that is, scope, scope!

1. Store in object: the function form of key: value appears, which is considered to be level!

order es5  es6  Don't mess up.
var x=11;
var obj={
  x:22,
  say:function(){
    console.log(this.x)
  }
}
obj.say();  
//console.log output is 22  

var x=11;
var obj={
 x:22,
 say:()=>{
   console.log(this.x);
 }
}
obj.say();
//The output value is 11            

2. Constructor exists

es5 
function Obj(){
              this.x=1;
              this.y=2;
              this.func=function(){
                  console.log(this);
             };
         }
   var o1=new Obj();
   o1.func()                      obj object


es6 
var a=11;
function test2(){
  this.a=22;
  this.b=()=>{console.log(this.a)}
 }
var x=new test2();       
x.b()                              22

Take another look at the mode of constructor storage

es5
var a=11
function test1(){
  this.a=22;
  let b=function(){
    console.log(this.a);
  };
  b();                   Execution occurs, function points to window
}
var x=new test1();
//Output 11


es6
var a=11;
function test2(){
  this.a=22;
  let b=()=>{console.log(this.a)}
  b();                   Even if execution occurs, the function points to the parent execution environment
}
var x=new test2();
//Output 22

In the arrow function, this points to Immobilization , not because there is a mechanism to bind this inside the arrow function. The actual reason is that the arrow function does not have its own this at all, which causes the internal this to be the external code block this. Just because it does not have this, it cannot be used as a constructor. It cannot be used as a constructor. In other words, you cannot use the new command, otherwise an error will be thrown. At the same time, if there is no arguments, you cannot use the arguments object, which does not exist in the function body. If you want to use, you can use the Rest parameter instead. You can use the yield command, so arrow functions cannot be used as Generator functions.  

For the benefits of this immobilization, see the following code:

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);     Pointing to foo Instead of window
  }, 100);
}

// ES5
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log('id:', _this.id);     The original solution is troublesome
  }, 100);
}

Many examples can be learned online,

var a=100;
var b = {
    a:1000,
	d:{
	a:1,
	c:{
	  getA:()=>{
		console.log(this.a);
		}
	  }	
	}  
}
b.d.c.getA()

//Remember that key: value is a flat level, and you can find the real parent execution context smoothly   
//The answer is: 100


var x = 11;
    var obj = {
      x: 22,
      methods: {
        x: 33,
        say: function () { console.log(this.x) },
        say2: () => { console.log(this.x) }
      }
    }
 
    obj.methods.say();           33
    obj.methods.say2();          11