What’s the difference between an arrow function and a normal function?

preface

Arrow function is a high frequency test point in the front-end interview, arrow function is ES6 API, I believe many people know, because its syntax is more concise than the general function, so deeply loved by everyone. This is the API we have been using in our daily development, but most of the students do not have enough understanding of it. Now let’s have a detailed understanding of the basic syntax of the arrow function, and the difference between the arrow function and ordinary functions.

First, basic grammar

[1.1] Define functions

Defining arrow functions is mathematically much cleaner than normal functions, and arrows are allowed in ES6

= >
= >

// Arrow function
let fun = (name) = > {
    return `Hello ${name}! `;
};

// A normal function
let fun = function (name) {
    return `Hello ${name}! `;
};Copy the code

[1.2] Parameters of arrow function

(1) If the arrow function has no arguments, write an empty parenthesis.

② If the arrow function has only one argument, the parentheses surrounding the argument can also be omitted.

③ If the arrow function has multiple arguments, separate the arguments with commas (,) and wrap them in parentheses.

// No arguments
let fun1 = (a)= > {
    console.log('dingFY');
};

// There is only one argument, leaving out the argument parentheses
let fun2 = name= > {
    console.log(`Hello ${name}! `)};// Multiple arguments, comma separated
let fun3 = (val1, val2, val3) = > {
    return [val1, val2, val3];
};Copy the code

[1.3] The body of the arrow function

If the body of the arrow function has only one line of code, which simply returns a variable or a simple JS expression, you can omit the curly braces {} in the body.

let fun = val= > val;
/ / is equivalent to
let fun = function (val) { return val };

let sum = (num1, num2) = > num1 + num2;
/ / is equivalent to
let sum = function(num1, num2) {
  return num1 + num2;
};Copy the code

② If the body of the arrow function has only one line of code, which is to return an object, it can be written as follows:

// Enclose the object to be returned with parentheses
let getTempItem = id= > ({ id: id, name: "Temp" });

// The object's curly braces are interpreted as the function's body's curly braces
let getTempItem = id= > { id: id, name: "Temp" };Copy the code

If the arrow function body has only one statement and does not need to return a value (most commonly when calling a function), we can add a void keyword to the statement

let fun = (a)= > void doesNotReturn();Copy the code

Second, the difference between arrow function and ordinary function

[2.1] The syntax is more concise and clear

As you can see from the basic syntax example of the arrow function above, the definition of the arrow function is much more concise, clear, and fast than the ordinary function definition.

[2.2] Arrow functions have no prototype, so they don’t have this

// Arrow function
let a = (a)= > {};
console.log(a.prototype); // undefined

// A normal function
function a() {};
console.log(a.prototype); // {constructor:f}Copy the code

[2.3] Arrow functions do not create their own this

The arrow function does not have its own this. The arrow function’s this refers to the this inherited from the first normal function in the outer layer when it is defined (note: defined, not called). So, the orientation of this in the arrow function is determined when it is defined and never changes.

let obj = {
  a: 10.b: (a)= > {
    console.log(this.a); // undefined
    console.log(this); // Window {ƒ : ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window,... }
  },
  c: function() {
    console.log(this.a); / / 10
    console.log(this); // {a: 10, b: ƒ, c: ƒ}
  }
}
obj.b(); 
obj.c();Copy the code

【 2.4 】 call | apply | bind cannot change the arrow point of this function

Call | apply | the bind method can be used to dynamically modify the function executes this point, but as a result of this arrow function definitions have been confirmed and will never change. So using these methods will never change the direction of the arrow function this.

var id = 10;
let fun = (a)= > {
    console.log(this.id)
};
fun();     / / 10
fun.call({ id: 20 });     / / 10
fun.apply({ id: 20 });    / / 10
fun.bind({ id: 20}) ();/ / 10Copy the code

[2.5] Arrow functions cannot be used as constructors

What does the constructor new do first? To put it simply, it is divided into four steps: ① JS internal first into an object; ② Add this to the object; ③ Execute the statement in the constructor; ④ The object instance is returned.

But!!!!! Arrow functions cannot be used as constructors, or constructors cannot be defined as arrow functions, because the arrow function does not have its own this, and its this inherits from the outer execution environment, and this never changes depending on where or by whom it is called.

let Fun = (name, age) = > {
    this.name = name;
    this.age = age;
};

/ / an error
let p = new Fun('dingFY'.24);Copy the code

[2.6] Arrow functions do not bind arguments and use rest arguments instead… Instead of the Arguments object, access the argument list of the arrow function

Arrow functions have no arguments objects of their own. Calling Arguments in the arrow function actually gets the value in the outer local (function) execution environment.

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

// Arrow function
let B = (b) = >{
  console.log(arguments);
}
B(2.92.32.32);   // Uncaught ReferenceError: arguments is not defined

// Rest parameter...
let C = (. c) = > {
  console.log(c);
}
C(3.82.32.11323);  // [3, 82, 32, 11323]Copy the code

[2.7] Arrow functions cannot be used as Generator functions and the yield keyword cannot be used

The article is updated every week. You can search “Front-end highlights” on wechat to read it in the first time, and reply to [Books] to get 200G video materials and 30 PDF books

​