Let’s calculate the sum of three and five. Let’s calculate the sum of three and five.

  function sum(a.b){
    return a + b;
  }
Copy the code

Or use our ES6

  let sum = (a, b) = > a + b;
Copy the code

Congratulations, you are right. In fact, functions are usually defined in the above way without any special tricks. But today, let’s talk about the new Function, which is actually a master.

  let sum = new Function('a'.'b'.'return a + b');
Copy the code

Your first reaction might be, what kind of sick way to write this, no wonder no one uses it, ha ha, it still makes sense, next, let’s take a look at this function on the ground what is going on

What is a function

A common expression is that a function is simply a block of code that executes repeatedly. A function is a piece of JavaScript code that is defined only once, but can be executed or called any number of times.

Definition of a function

  • Function student(){} this definition elevates the function declaration to the beginning of the function’s scope, and allows you to call the function for your own use wherever you use it in the function’s smallest scope

  • Var student = function(){} A function defined in this way can only be called by fun () after the assignment code is executed in that scope, otherwise fun === undefined due to the variable declaration enhancement

  • Var student = new Function(arg1, arg2,arg3… All arguments to the, argN, body) Function constructor are strings. All arguments except the last are taken as arguments to the generator function. You can have no arguments here. The last argument represents the body of the function to be created.

Function declaration, variable declaration, function declaration, variable declaration

Variable ascension

First, forget functions, let me use a very simple example to illustrate the problem:

  console.log(foo); // undefined
  var foo = 'The Bright Moon of qin Dynasty';
  console.log(foo)  // The Bright moon of the Qin Dynasty
Copy the code

In fact, the code above is

  var foo;
  console.log(foo);
  foo = 'The Bright Moon of qin Dynasty';
  console.log(foo);
Copy the code

In this case, foo is declared first, and until assignment, foo’s value is undefined, and function declaration is the same way, that is, you declare a function

  function foo() {}
Copy the code

Delta function promotion, delta function promotion

  var foo;
  foo = function() {};
Copy the code

Here’s an example:

  console.log(foo);  // foo() {console.log(123); }
  console.log(foo());//undefined is undefined
  var foo = 456;
  function foo() {
    console.log(123);/ / 123
  }
  console.log(foo); //undefined
  foo = 789;
  console.log(foo);/ / 456
  console.log(foo());/ / 789
Copy the code

Foo foo foo foo foo foo foo foo foo foo foo foo foo

  var foo;                           // (0) declare foo and assign undefined
  foo = function() {                 // (1-1) assigns a function to foo
    console.log(123);                // (2-1) execute the function, print 123
  }
  console.log(foo);                  // (1-2) foo is a reference to the function body
  console.log(foo());                // foo(2-2); // Foo (2-2); // Foo (2-1)
  foo = 456;                         // (3) duplicate the base data type 456 again for foo
  console.log(foo);                  // (4) Print 456
  // Assign again
  foo = 789                          // (5) Duplicate the base data type 789 for foo again
  console.log(foo);                  // (6) print 789
  console.log(foo());                // (7) foo is not a function; foo is not a function
Copy the code

To analyze the order in which a function is executed:

  console.log(person)
  console.log(fun)
  var person = 'LeMing'
  console.log(person)

  function fun () {
      console.log(person)
      var person = 'The Bright Moon of qin Dynasty'
      console.log(person)
  }
  fun()
  console.log(person)
Copy the code

Is equivalent to

  var fun;
  fun = function() {
    console.log(person)
    var person = 'The Bright Moon of qin Dynasty'
    console.log(person)
  };
  console.log(person);   // undefined
  console.log(fun);     // function(){... }
  var person = 'the wind';
  console.log(person);  / / the wind
  fun();               // execute fun function // undefined // Qin Shingyue
  console.log(person); / / the wind
Copy the code

And we can see why this looks like a function like this

  var person = 'Wind moon';
  function fun(){
    console.log(person);
    var person = 'The Bright Moon of qin Dynasty';
    console.log(person);
  }
Copy the code

The first person to be typed is undefined. This is the scope of the function. When executing, the code first checks whether person is private to the function. If so, it stops looking for Person in the global variable, and the person in the function is only valid in the function body. So when detecting that person is private to fun, if the prefix, It is natural to return undefined directly.

conclusion

  • The first and second methods of Function definition are actually syntactic sugar of the third new Function. When we define a Function, we will create a Function through new Function, but the first two methods are encapsulated for us, we can’t see it. Any Function in JS is an instance of Function.
  • Ecmascript-defined functions are actually fully functional objects.
  • Function promotion has a higher priority than variable promotion and is not overridden by the declaration of the same variable, but is overridden by the assignment of the variable. That is, when the function declares the variable init, it has a higher priority than other variables and is placed at the top of the scope
  • Function private variables take precedence over global variables, and function private variables are valid only in the function body and generally do not affect the global scope