preface

No foreword today hahaha

writing

  • Common function

    1. Functional expression

    const nomalFunc1=function(){}

    const nomalFunc=function nomalFunc1(){}

    1. Function declaration

    function nomalFunc2(){}

    1. Constructor Function new(unpopular method)

    const nomalFunc3=new Function(){ }

    1. The difference between a function expression and a function declaration. Why can a function declaration be called before a function declaration

    Function expressions cannot be called before declaration, and functions declared in function declaration mode can be called before declaration

  • Const arrowFunc=function(){}

Application scenarios

  • Ordinary functions, with their own this, arguments, super or new.target

    Can be used as constructors and class functionsCopy the code

  • Arrow functions that don’t have their own this, arguments, super or new.target

    1. Can’t be used as a constructor, is new, to get arguments can be rest
    2. The syntax of arrow function expressions is more concise than that of function expressions, arrow function expressions are more suitable for places where anonymous functions would otherwise be required, and they cannot be used as constructors for the MDN interpretation of arrow functions
    3. Example:
const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];
console.log(materials.map(material => material.length));
Copy the code

This points to the

  • Common function

Make sure that this refers to you when you call it. Basically, who called this refers to whom.

  • Arrow function

    1. The function is already defined as having no this of its own

    2. This refers to the scope in which it is defined, and finds the closest this through the scope chain

//aa, bb's this is defined to refer to the nearest scope of this, Window const cc={value:'cc'} const dd=function(){console.log(this) const aa=()=>{ Console. log(' this' in aa,this) const bb =()=>{console.log(' this' in BB,this)} bb()} aa()} dd.call(cc)Copy the code

This modification

  • Common function

    You can modify this by calling, bind, and apply

Window. value=' I am a value on window 'const testObj={value:' I am a value on testObj'} const normalFuncTest=function(){window.value=' I am a value on window 'const testObj={value:' I am a value on testObj'} console.log(this.value) } normalFuncTest() normalFuncTest.call(testObj)Copy the code

  • Arrow function
    1. The this pointer will not be modified
Window. value=' I am window.value 'const cc={value:'cc'} const aa=()=>{console.log(' this' in AA,this.value) const bb = () = > {the console. The log (' this' in the bb, enclosing the value)} bb ()} aa. The call (cc)Copy the code

Shape parameter acquisition

  • Ordinary functions can take arguments via arguments (objects that are like arrays, not arrays)

  • Arrow functions don’t have arguments attributes but can get arguments directly using REST (an array of arguments retrieved via REST)

summary

So that’s the difference between a normal function and an arrow function, because the arrow doesn’t have its own this, it can’t modify this, it doesn’t have super, new so it can’t do a constructor class