Concept: In JS, a function is an object, and the function name is a pointer to the function object

1. Three declarations of JS functions

1.1, function declarations, function expressions, use Fuction constructors to generate instances

  • 1. Function declaration
    / / grammar
   function sayName(name) {
    console.log(name)
   }
Copy the code
  • 2. Function expression
  / / grammar
  var  sayName = function(name){
    console.log(name)
  }
Copy the code
  • 3. Use the Fuction constructor to generate instances
  The last string argument represents the body of the function
  var sum = new Function("num1"."num2"."num1+num2")
  // Reasons not recommended:
  // 1. Two levels of parsing are required, one is function parsing, the other is internal string parsing, which consumes performance
  // 1. It is difficult to write the function body
Copy the code

1.2. The difference between function declarations and function expressions

  • Several concepts

    • Parser, is a certain rule of JS source code parsing, and then to the execution of the environment

    • Execution environment, js source code really run environment

    • The rules of the JS parser are a bit special, with two promotions (variable promotion, function declaration promotion)

      • Variable promotion: Variables declared in the source code are extracted by the parser and executed before the source code is executed line by line, in which case the variable is assigned undefined
      • Declared function promotion: The declared function is promoted to the front of the code, so calling the function before it is declared will not report an error because the function has already been promoted to the top of the execution environment

  • The difference between

    • The function expression will only promote its variable, which is undefined. The variable will only be referred to the function when the code executes the function. Therefore, any call before the function expression will cause the script to report an error
    • Declared functions are promoted, and early references do not generate errors

1.3 Properties and methods of functions

  • Internal attributes this and arguments

    • This, a reference to the object calling the function
    • Arguments, an array of classes composed of function arguments

  • Properties and methods of the function itself

    • Length, returns the number of arguments to the function
    • Apply (), call(), bind() for functions to inherit and modify the internal this reference

2, js function call four methods: method call mode, function call mode, constructor call mode, apply,call mode

1. Method invocation pattern

//, notice that this now refers to myObject
    var myobject={
            value:0.inc:function(){
                    console.log(this.value) / / 0
                }
        }
    myobject.inc()
Copy the code

2. Function call pattern


// Notice that this points to the window
    var add=function(a,b){
        console.log(this)// This is bound to window
        return a+b;
    }
    var sum=add(3.4);
    console.log(sum)
Copy the code

3. Constructor invocation pattern

JS is a prototype-based inheritance language, which means that objects can inherit properties directly from other objects. If you call a function with new in front of it, a new object will be created that hides the prototype member attached to that function, and this will be bound to that new objectCopy the code
// The Essence of the javascript language recommends abandoning this approach
    function Person(){
        this.name = "zhangsan";
        this.age = 19;
        this.sayHello = function(){
            console.log(1)}; }var p = new Person(); 
    p.sayHello(); / / 1
Copy the code

4, Call (),apply() call pattern

// The first argument to apply is the object to which the this pointer points
    var myobject={};
    var sum = function(a,b){
        console.log(this)
        return a+b;
    };
    var sum2 = sum.call(myobject,10.30);
    / / var sum2 = sum. Apply (myobject, [10, 30]);
    console.log(sum2);
Copy the code

3. Types of JS functions (ordinary functions, anonymous functions, closure functions)

Common function

// An example of a common function
    function ShowName(name) {
      console.log(name);
    }
Copy the code
  • 1. Overrides of functions with the same name in Js will only call the ones that follow
  • 2, the arguments object
    function showNames(name) {
      console.log(name);/ / zhang SAN
      for (var i = 0; i < arguments.length; i++) {
        alert(arguments[i]);// Zhang SAN, Li Si, Wang Wu
      }
    }
    showNames('Joe'.'bill'.'Cathy');
Copy the code
  • 3 If the function does not specify a return value, the default return is ‘undefined’.
// If the function does not specify a return value, the default return is 'undefined'.
    function showMsg() {}console.log(showMsg());// output: undefined
Copy the code

Anonymous functions

  • 1. Variable anonymous functions (functions can be assigned to variables, events)

    • Variable anonymous function, the left side can be variables, events, etc
    • Application scenario: Avoid function name contamination. Declaring a named function and assigning a value to a variable or event is an abuse of the function name
    var anonymousNormal = function (p1, p2) {
      console.log(p1+p2);
    }
    anonymousNormal(3.6);/ / 9
Copy the code
  • 2. Nameless anonymous functions
    • Description: that is, in the function declaration, followed by parameters. When the Js syntax parses this function, the code inside executes immediately
    • Application scenario: Perform this operation only once. A function that only needs to be executed once after the browser has loaded
    (function (p1) {
      console.log(p1); }) (1); / / 1
Copy the code

The closure function

  • Definition: function A declares A function B inside, function B refers to A variable other than function B, and function A returns A reference to function B. So function B is the closure function

  • Application scenario: Ensure the security of variables inside funA because funA variables cannot be directly accessed by outsiders

    • 1. Global and local references
    • 2. Parametric closure functions
    • 3. Variable sharing within the parent function funA

4. Js has seven data types

  • Null, undefined, Boolean, number, string, reference type (object, array, function), symbol