The knowledge point combing of JS function

To learn JavaScript in addition to the basic JavaScript knowledge points, as JavaScript's first-class citizens-function, we need to understand deeply. The variability of functions comes from the flexibility of parameters and the variability of return values. If the argument is a generic data type or generic object, such a function is a normal function, and if the function's arguments are functions, this is the advanced function we want to know, and if the other part of the function call (the variable and the parameter has been preset), such a function is the partial function.

Also, there is the use of optional parameters (optional parameter).

Classification of functions

1. Common functions

There is a function name, parameter, return value, overwrite with the same name. The sample code is as follows:

function Add (A, b) {    return a + b;}

1. anonymous functions

Without a function name, you can assign a function to a variable or function, or use it as a callback function. Very special is the immediate execution of functions and closures.

The example code for executing the function immediately is as follows:

(function () {    console.log (1)}) ()

The closure sample code is as follows:

var func = (function () {    var1;     return function () {        console.log (i);    }}) ()

1. Advanced functions

Advanced functions are functions that can take functions as parameters and return values. such as the closure above. ECMAScript also offers a number of advanced functions such as foreach (), every (), some (), reduce (), and so on.

1. Partial function

   function Istype (type) {    return  function (obj) {        return]   "]"    }}var isstring = Istype (' String ' ); var isfunction = Istype ('Function');

   Believe that the study of vue.js and other common library source code students will not be unfamiliar with it.

   1. Arrow functions

   The arrow function does not bind its own this,arguments,super. So it's not appropriate to do a method function, a constructor, or a call,apply change this. But it is characterized by shorter, and solves the problem of this in the anonymous function that points to the global scope

   Window.name ='window';varRobot ={name:'QQ', Print:function () {setTimeout (function () {Console.log ( This. Name); },  -)    } };//Modify 1, modify this point with bindvarRobot ={name:'QQ', Print:function () {setTimeout (function () {Console.log ( This. Name); }.bind ( This), -)    } };//Modify 2, use the arrow functionvarRobot ={name:'QQ', Print:function () {setTimeout ()={Console.log ( This. Name); },  -)    } };

   To learn more about the arrow functions you can see MDN

   Parameters of the function
   1. Pass in explicit parameters

      function Add (A, b) {    + b;}

      1. Using the Arguments object

         function Add () {    var argv = Array.prototype.slice.apply (arguments);     return 0 return "' ;}

         1. Omit parameter, parameter default value

            function Sub (A, b) {    0;     0 ;     return A- b;}

            1. Object parameters

               var option = {    ten,    ten}function area (opt) {      this1;      This 1 ;     return  This  This . Height}

               Object parameters are common, often appear in jquery plug-ins, Vue plug-ins and so on.

               1. Optional parameters

               ES5 Implement optional parameters, we need to use arguments. Use optional parameters of the specified range we generally use the Hair object parameters, write the jquery and other plugins should be impressed.

               1. function parameters in the ES6

               In ES6, the default value of the parameter, omitting the operation of the parameter is relatively easy to use. The sample code is as follows:

               var area = (width=1, height=1) = Width*height

               In ES6, an optional parameter is used. The sample code is as follows:

               var add = (... nums) + =    {var numarr = [].concat (nums)    return Numarr.reduce (ACC, v) = acc + = V)}

               1. Deconstructed parameters

                  5 8 = {x:1, y:2, Z:3}) {    //1 2 3  (default is Object literal) // 5 8   (The default value is the object itself)

                  return value of the function
                  1. The return value of the function is the base data type, such as String, number, boolean,null,undefined. The sample code is as follows:

                     function Add (A, b) {    return A + B}

                     1. The return value of the function is the object. The sample code is as follows:

                        function Robot (name) { This. Name =name} Robot.prototype.init=function () {return{say:function () {Console.log ('My name is'+ This. Name)}. Bind ( This), Dance:function (dancename) {Console.log ('My Dance Name is'+dancename)} };}varRobota =NewRobot ('A'); Robota.init (). Say (); //"My name is A"varROBOTB =NewRobot ('B'); Robotb.init (). Say (); //"My name is B"

                        Whether it's writing native or jquery plugins, or other plugins, this is not uncommon. More in-depth understanding can refer to jquery source code.

                        1. return value is function

                        We are most familiar with the closure of the package. For details, refer to the closure of the cliché

                        Reference articles

                        Js:how can you accept optional parameters?

                        Named and Optional Arguments in JavaScript

                        How to use optional arguments in functions (with optional callback)

                        The follow-up may continue to be revised, and you are welcome to criticize. There are problems or other ideas that can be PR on my github.

The knowledge point combing of JS function