The default refers to the object at which it is defined, not the object at which it is executed, which may be defined as window (inheriting this from its parent).

The arrow function appears to be shorthand for an anonymous function. But there are some differences. The this in the arrow function is the lexical scope determined by the text above

var obj = { birth: 1990, getAge: function () { var b = this.birth; // 1990 var fn = function () { return new Date().getFullYear() - this.birth; // this points to window or undefined}; return fn(); }};Copy the code

The arrow function fixes the pointer to this, which always points to the lexical scope, the outer caller obj:

var obj = { birth: 1990, getAge: function () { var b = this.birth; // 1990 var fn = () => new Date().getFullYear() - this.birth; // this points to obj. Return fn(); }}; obj.getAge(); / / 25Copy the code

If you use the arrow function, the old hack notation is not needed:

var that = this;

Since this is already scoped in the arrow function, this cannot be bound when a public call or apply() is applied, i.e. the first argument passed in is ignored:

var obj={ birth:2018, getAge:function(year){ var b =this.birth; Return fn. Call ({birth:200},year)}} obj.getage (2020)Copy the code

For example:

//es5 var fn= function(a, b){return a+b} const fn=(a,b) => a+b; //es5 var foo = function(){ var a=20; var b= 30; return a+b; } //es6 const foo=()=>{ const a= 20; const b=30; return a+b }Copy the code

// Note that arrow functions can replace function expressions but not function declarations

Let’s go back to this, arrow function meaning there is no this. If this is used, it must be the outer this. it does not automatically point to the window object. So you can’t use call/apply/bind to change this

var person = { name: 'tom', getName: function() { return this.name; Const person ={name:' Tom ', getName ()=>this.name} const person ={name:' Tom ', getName ()=>this.name} getName:function getName(){return undefined.name} }Copy the code

In ES6, strict mode is adopted by default, so this will not automatically point to the window object, and the arrow function itself does not have this, so this can only be undefined. This should be used carefully, otherwise you will not know where you are wrong. In this case, if you still want to use this, don’t use the arrow function.

Const person = {name: 'Tom ', getName: function() {return setTimeout(() => this.name, 1000); Var person = {name: 'Tom ', getName: function getName() {var _this = this; Return setTimeout(function () {return _this.name; }, 1000); }};Copy the code

The direction of this can be determined in the following order:

  • This in the global environment

* Browser environment: In the global execution environment (outside any function body) this refers to the global object window, whether in strict mode or not;

* Node environment: Whether in strict mode or not, in the global execution environment (outside any function body), this is the empty object {};

  • New binding: If it is a new binding and no function or object is returned from the constructor, then this refers to the new object