• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

Hello, I’m zz, I believe that everyone in the code in the code at ordinary times, all know arrow function usage, but during the interview, let him tell me about the arrow function usage, speak very one-sided, by reading this article, we take you system summarizes the down arrow function, form their own arrow function of knowledge structure, so is the interview the interviewer asked a piece of cake.

Definition of arrow function

Arrow function definitions include a list of arguments (zero or more arguments, or (..) if there is more than one argument). Enclosing), followed by the identifier =>, and the function body comes last.

The difference between arrow functions and ordinary functions

Arrow function

let arrowSum = (a, b) => { 
   return a + b
}
Copy the code

Common function

let zz = function(a, b) => {
    return a + b
}
Copy the code

The use of arrow functions

If we print the prototype of the fn function, we’ll see that the arrow function itself doesn’t have this;

var fn = (a, b) => { console.log(this, fn.prototype); //window, undefined var fn2 = () => {console.log(this, 'test '); // window }; fn2(); } fn()Copy the code

Arguments for arrow functions We can see that this would give syntax errors

var fn = (a) => {
    console.log(a.arguments)
}
fn();
//ReferenceError: arguments is not defined
Copy the code

Instead, we look at the code and see that the arrow function argemnets points to the previous function

The arrow function does not create its own this; it only inherits this from the upper level of its scope chain.

var z = function(a){ console.log(arguments); bb(); function bb() { console.log(arguments); let ac = () => { console.log(arguments); //arguments point to the second function}; ac(); } } z()Copy the code

When can I not use arrow functions

1. Call by constructor

let Foo = () =>  {
		
}
let result  = new Foo();
//TypeError: Foo is not a constructor
Copy the code

2. 需要使用prototype

let foo = () =>  {
		
}
console.log(foo.prototype)
//underfind
Copy the code

3. No super

There is no super for arrow functions, but just like this, arguments, and new.target, these values are determined by the nearest non-arrow function

conclusion

  • If you have a simple statement online function, of which only the statement is the return of a calculated value, and this function inside have no this reference, and not their own reference (such as recursion, event binding binding/solution), and will not require function performs these, then we can safely to reconstruct it as = > arrow function

  • If your inner function expression depends on its function calling let self= this or.bind(this) to ensure proper this binding, then the inner function expression can be converted to the => arrow function

  • If your inner function expression depends on packaging function like let the args = Array. The prototype. Slice. The call (the arguments) lexical replication, and then the inner function conversion should be safe = > arrow function

  • All other situations — function declarations, long multi-function expressions, functions that require lexical name identifiers (such as recursion, constructors), and any functions that do not conform to these characteristics should generally be avoided

About lexical binding of this arguments and super. This is to use es6 features to fix common problems, not bugs or bugs.