Three ways to create functions in JS and their differences

1. Function declaration

function sum1(n1,n2){
    return n1+n2;
  };

2. Function expression, also called function literal

var sum2=function(n1,n2){
    return n1+n2;
};

Both The difference: the parser will first read the function declaration and make it accessible before executing any code; while the function expression must wait until the parser reaches the line of code where it is located before it is actually interpreted and executed.

Strictly speaking, a self-executing function is also called a function expression. It is mainly used to create a new scope. The variables declared in this scope will not conflict or be confused with variables in other scopes. Most of them It exists as an anonymous function and is automatically executed immediately.

(function(n1,n2){
    console.log (n1+n2)
})(1,3);//4

Several other self-executing functions:

  //可用来传参
  (function(x,y){
    console.log(x+y);
  })(2,3);

  //带返回值
  var sum=(function(x,y){
    return x+y;
  })(2,3);
  console.log(sum);

  ~function(){
    var name='~'
    console.log(name);
  }();

  !function(){
    var name='!'
    console.log(name);
  }();

  ;(function(){
    var name=';'
    console.log(name);
  })();

  -function(){
    var name='-'
    console.log(name);
  }();

  //逗号运算符
  1,function(){
    var name=',';
    console.log(name);
  }();

  //异或
  1^function(){
    var name='^';
    console.log(name);
  }();

  //比较运算符
  1>function(){
    var name='>';
    console.log(name);
  }();

  ~+-!(function(){
    var name='~+-!';
    console.log(name);
  })();

  ~!(function(){
    var name='~!';
    console.log(name);
  })();

  (function(){
    var name='call';
    console.log(name);
  }).call();

  (function(){
    var name='apply';
    console.log(name);
  }).apply();

3. Function construction method, parameters must be quoted

var sum3=new Function('n1','n2','return n1+n2');
console.log(sum3(2,3));//5

Technically speaking, this is a function expression. It is generally not recommended to define functions in this way, because this syntax will cause the code to be parsed twice (the first time is to parse the regular ECMAScript code, and the second time is to parse the string passed into the constructor), thus affecting performance.

var name='haoxl';
  function fun(){
    var name='lili';
    return new Function('return name');//不能获取局部变量
  }
 console.log(fun()());//haoxl

The Function() constructor will parse the function body and create a new function object every time it is executed, so when calling Function in a loop or frequently executed function () constructor efficiency is very low. Function literals are not recompiled every time they are encountered. When creating a function using the Function() constructor, it does not follow the typical scope. It always executes it as a top-level function.

【Recommended related tutorials】

1. JavaScript video tutorial
2. JavaScript online manual
3. bootstrap tutorial