Code examples that explain in detail the differences and usage of ordinary functions and arrow functions in JavaScript

This article mainly introduces the differences and usage details of common 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 the arrow function ( => ) and the 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 nothing wrong with my answer: this in the arrow function does have nothing to do with the context of the call

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 after the arrow function is defined, this It will not change, no matter how it is called, this will not change;

But strictly speaking, this does not "depend on the context when it is defined", because the arrow function simply does not Without binding its own this, 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 my previous one. There is not much deviation in 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 no automatic binding like this in arrow functions. Local variables, including: this, arguments, super(ES6), new.target(ES6)...

Borrow 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, various local variables will be automatically bound. Arrow functions are very simple to search upwards along the scope chain...

Arrow functions are so simple and pure Things;

So I personally think that arrow functions are more suitable for functional programmingIn addition to being shorter, using arrow functions is also more difficult to be affected by variables that are not explicitly declared, causing you Produces 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 achieve similar effects. , 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 may be more appropriate to use an ordinary function...

But it doesn’t mean that you can’t use something like # in an arrow function ##Array

Get all the parameters in the form, we can use the expansion operator to receive the parameters, for example:

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

Maybe there are scenarios where this writing method is needed , but I still think that arrow functions are more suitable for simple situations that accept fixed parameters and return a calculation result;

The above is the detailed content of Code examples that explain in detail the differences and usage of ordinary functions and arrow functions in JavaScript. For more information, please follow other related articles on the PHP Chinese website!