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 commonfunctionsand arrow functions inJavaScript. 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?

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

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

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?

Get all the parameters in the form, we can use the expansionoperatorto receive the parameters, for example:

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