Detailed explanation of the difference between arrow functions and normal functions in JavaScript

This article explains the difference between arrow functions and ordinary functions in JavaScript for your reference. The specific content is as follows

Arrow functions:

let fun = () => {
    console.log('lalalala');
}

Ordinary functions:

function fun() {
    console.log('lalla');
}

Arrow functions are equivalent to anonymous functions and simplify function definitions. Arrow functions have two formats. One contains only one expression, with { ... } and return omitted. There is also a type that can contain multiple statements, in which case { ... } and return cannot be omitted.

Arrow functions are anonymous functions and cannot be used as constructors or with new.

let FunConstructor = () => {
    console.log('lll');
}

let fc = new FunConstructor();

Arrow functions do not bind arguments, but use rest parameters instead...Solution

function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8); // [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]


let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32); // Uncaught ReferenceError: arguments is not defined


let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323); // [3, 82, 32, 11323]

Arrow functions do not bind this, but capture the this value of the context in which they are located as their own this value

var obj = {
  a: 10,
  b: () => {
    console.log(this.a); // undefined
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  },
  c: function() {
    console.log(this.a); // 10
    console.log(this); // {a: 10, b: ƒ, c: ƒ}
  }
}
obj.b(); 
obj.c();

var obj = {
  a: 10,
  b: function(){
    console.log(this.a); //10
  },
  c: function() {
     return ()=>{
           console.log(this.a); //10
     }
  }
}
obj.b(); 
obj.c()();

When an arrow function calls a function through the call() or apply() method, only one parameter is passed in and it has no effect on this .

let obj2 = {
    a: 10,
    b: function(n) {
        let f = (n) => n + this.a;
        return f(n);
    },
    c: function(n) {
        let f = (n) => n + this.a;
        let m = {
            a: 20
        };
        return f.call(m,n);
    }
};
console.log(obj2.b(1)); // 11
console.log(obj2.c(1)); // 11

Arrow functions have no prototype property

var a = ()=>{
  return 1;
}

function b(){
  return 2;
}

console.log(a.prototype); // undefined
console.log(b.prototype); // {constructor: ƒ}

Arrow functions cannot be used as Generator functions and cannot use the yield keyword

Summarize

• The this of an arrow function always points to the this of its context, and no method can change its reference, such as call() , bind() , apply()
• The this of a normal function refers to the object that calls it.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.