Detailed explanation of the difference and usage between ordinary functions and arrow functions in JavaScript

This article mainly introduces the difference and usage details between ordinary functions and arrow functions in JavaScript. It is very good and has reference value. Friends who need it can refer to it.

I was asked a question recently:

What is the difference between arrow function ( => ) and ordinary function ( function ) in JavaScript?

What I was thinking at the time was: This question is very simple~ (flag), and then I gave the wrong answer...

This in the arrow function has nothing to do with the context when it is called, and It depends on the context in which it is defined

This is not quite the right answer... although it is not completely wrong either

this in arrow functions

First of all, there is no wrong part in my answer: this in the arrow function does have nothing to do with the context when it is called

function make () {
  return ()=>{
    console.log(this);
  }
}
const testFunc = make.call({ name:'foo' });
testFunc(); //=> { name:'foo' }
testFunc.call({ name:'bar' }); //=> { name:'foo' }

As you can see from this example, it is true that the arrow function is after it is defined , this will not change, no matter how it is called, this will not change;

But strictly speaking, this does not "depend on the context of definition", because the arrow function It does not bind its own this at all. When calling this in an arrow function, it simply searches upward along the scope chain to find the nearest this and use it;
In terms of effect, this is the same as mine There is not much deviation from the previous understanding, but their essence is completely different. The arrow function does not add the feature of ordinary functions that this is not affected by the calling context, but reduces many features;

Arrow functions are actually simpler functions

In fact, it is not just this that is different from ordinary functions in arrow functions. There is nothing automatic like this in arrow functions. Bound local variables include: this, arguments, super(ES6), new.target(ES6)...

Borrowing an example from others:

function foo() {
  setTimeout( () => {
   console.log("args:", arguments);
  },100);
}
foo( 2, 4, 6, 8 );
// args: [2, 4, 6, 8]

In ordinary functions , will automatically bind various local variables, and arrow functions are very simple to search upwards along the scope chain...

Arrow functions are such a simple and pure thing;

So I personally think that arrow functions are more suitable for functional programming. In addition to being shorter, using arrow functions is also more difficult to be affected by variables that are not explicitly declared, causing you to produce unexpected calculation results;

So can ordinary functions achieve the same effect as arrow functions?

If you were to simply consider fixing this volatile guy like I did back then... it would be very simple, there are some commonly used methods, such as this:

function make () {
  var self = this;
  return function () {
    console.log(self);
  }
}

or

function make () {
  return function () {
    console.log(this);
  }.bind(this);
}

However, the second method can only fix this variable. As mentioned above, variables such as arguments in arrow functions are also found from the scope chain. In order to To achieve a similar effect, we only have one way to redefine a local variable, and babel also uses this method to process arrow functions.

function make () {
  return ()=>{
    console.log(this);
    console.log(arguments);
  }
}
//babel it...
function make() {
  var _this = this,
    _arguments = arguments;
  return function () {
    console.log(_this);
    console.log(_arguments);
  };
}

So... what if I want to use arguments in an arrow function?

...I think if you have this need, it might be more appropriate to use an ordinary function...

But it doesn’t mean that you can’t use an array-like function in an arrow function to get all parameters in the form, we can use the expansion operator to receive parameters, such as this:

const testFunc = (...args)=>{
  console.log(args) //数组形式输出参数
}

There may be scenarios where this writing method is needed, but I still think that arrow functions are more suitable Those simple cases that accept fixed parameters and return a calculation result;

The above is the entire content of this chapter. I hope it will be helpful to everyone. For more related tutorials, please visit JavaScript Video Tutorial!