A brief discussion on the difference between arrow function and ordinary function in ES6

1. Basic syntax examples of arrow functions

In ES6, arrows => are allowed to define arrow functions. For specific syntax, let’s take a look at a simple example:

// Arrow functionlet fun1 = (name) => {
    return `Hello ${name} !`; 
};
fun1('I am an arrow function'); //Hello I'm the arrow function!"// The arrow function has only one parameter, so the parameter brackets can be omitted ()let fun2 = name => {
    return `Hello ${name} !`; 
};
fun2('I am an arrow function'); //Hello I'm the arrow function!"// If the function body has only one sentence of code, you can omit the braces of the function body { }let fun3 = name => `Hello ${name} !`;
fun3('I am an arrow function'); //Hello I'm the arrow function!"// Normal functionslet fun4 = function (name) {
    return `Hello ${name} !`;   // Function body};
fun4('I'm a normal function'); //Hello I'm a normal function !"

From the above basic syntax example, it can be seen that the definition of arrow functions is much simpler and clearer than that of ordinary functions, and is very fast.

2. The difference between arrow function and ordinary function

1. This pointing problem of arrow function (important)

Arrow functions do not have their ownthis, it will get the outer execution environment it is in when it is defined (note, it is defined, not when it is called)thisand inherit thisthisvalue. Therefore, in the arrow functionthisThe pointer of , is determined when it is defined and will never change afterwards.

var name = 'Global';
function fun1() {
    //Return a normal function     return function () {
          ();
     }
}
function fun2() {
    //Return an arrow function     return () => {
          ();
     }
}
fun1().call({name: 'Obj'});     // 'Obj'
fun2().call({name: 'Obj'});     // 'Global'

From the example above,

fun1Returns a normal function, at this time,callChanging the normal functionthisSuccessfully, normal functionthisPointed to{name: 'Obj'}So outputObj

fun2Returns an arrow function, due to the arrow functionthisIt is defined at initialization, but it inherits its outer layerfun2in the execution environmentthis ，fun2The insidethisInherited the overallthis, so outputGlobal

Look at another example

var name = 'Global';
var obj = {
  name: 'Obj',
  fun1: function(){
    ();
  },
  fun2: () => {
    ();
  }
};
obj.fun1();    // 'Obj'
obj.fun2();    // 'Global'

From this example, we can see

ObjectobjThe insidefun1is an ordinary function. When an ordinary function is called as an object's method,thisPoint to the object to which it belongs. at this timethisPoints to the current object, so returnObj

ObjectobjThe insidefun2is an arrow function, an arrow functionthisIt inherits the execution environment it is in when defining initializationthis, the current execution environment in which fun2 isWindow, so returnGlobal

2. call() apply() bind() cannot change the pointing of this in the arrow function

becausethisIt is bound when the arrow function is defined, throughcall() apply() bind()When calling, just parameters are passed, rightthisIt has no effect

var name = 'Global';
// Arrow function definition in global scopelet fun = () => {
    ()
};
fun();     // 'Global'
// This pointer will not change, always pointing to Window objects({name: 'Obj'});     // 'Global'
({name: 'Obj'});    // 'Global'
({name: 'Obj'})();   // 'Global'

Therefore, the arrow function cannot be modifiedthisPoint to

3. Indirectly modify this pointer of the arrow function

If we have to modify the arrow function in a certain scenariothisPoint to

var name = 'Global';
function fun() {
    //Return an arrow function     return () => {
          ();
     }
}
fun()() // 'Global'
({ name: 'Obj' })() // Obj

It can be seen in the example abovefunIt is a normal function, returns an arrow function, we modify the ordinary function of fun through callthis, At this time, the arrow function just inherits this ordinary functionthis, so returnObj, thereby indirectly modifying the arrow functionthisPoint to the problem

3. Arrow function cannot be new operator

When instantiating an arrow function through new, an error will be reported

var Foo = () => {};
var foo = new Foo();  //Foo is not a constructor

Reason: What does the new constructor do? Simply put, it is divided into four steps

• jsFirst, a target will be created;
• Then put the function inthisPoint to the object;
• Then execute the statement in the constructor;
• Finally, the object instance is returned.

Since the arrow function does not have its ownthis, itsthisIt inherits from the external execution environmentthis, this time passnewWhen the operator is instantiated,thisPointing will never change with where it is called and who it is called, so the arrow function cannot be used as a constructor

4. Arrow function does not have prototype prototype

let Foo = () => {
    ('Hello World !')
};
(); // undefined

5. The arrow function does not have arguments, but REST parameters are available, and the extension operator (three points) are extended...

// Normal functionsfunction fun1() { 
   (arguments) 
}
//Arrow functionlet fun2 = () => {
   (arguments) 
};
fun1(1,2); // Arguments(2) [1, 2, callee: ƒ, Symbol(): ƒ]
fun2(1,2); // arguments is not defined

It can be seen that the arrow function does not haveargumentsYes, but don't worry, the alternative method to get the arrow function is to use the extension operator (three points)...

let fun = (...args) => {
   (args) 
};
fun(1,2); // [1, 2]

6. Arrow function cannot be wrapped

let fun = ()
           => 1; // SyntaxError: expected expression, got '=>'

7. An arrow function statement returns the object literal, and requires brackets

let fun = () => { foo: 1 };
fun(); // undefined
let fun1 = () => ({ foo: 1 });
fun1(); // {foo: 1}
let fun2 = () => { foo: function() {} };   
// SyntaxError: function statement requires a name
let fun3 = () => ({ foo: function() {} });  

8. The analytical order of arrow functions is relatively ||front

let fun = false || function() {}; // ok
let fun1 = false || () => {};   // Malformed arrow function parameter list
let fun2 = false || (() => {});    // ok

9. Arrow function cannot be used as Generator function, yeild keyword cannot be used

The yield keyword cannot usually be used in arrow functions (unless it is nested within the allowed functions). Therefore, arrow functions cannot be used as function generators. .

3. Reference materials

Information 1
Information 2
Information Three

4. Conclusion

This is the end of this article about briefly discussing the difference between arrow functions and ordinary functions in ES6. For more related contents of arrow functions and ordinary functions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!