[Javascript Basics] Functions

Preface I have introduced some basic concepts of javascript in the previous article [basic concepts of javascript]. Thanks for your reading and comments, I am very happy that you can read your own things, at the beginning of the release, I kept staring at the number of students. Although you may just click it, I still have some confidence to continue writing. Today I will write some knowledge about javascript Functions to help you familiarize yourself with or review some basic functions. PS: Recently, the jQuery source code exchange group (239147101) has added a lot of new people. I hope you will continue to focus on learning and try to improve your environment as little as possible. Function functions are an important structure or component in any programming language. complex structures and functions in programming involve functions. A Function in javascript is an object. When a Function object is a Function type instance, because the Function type is a reference type, the Function can have its own methods and attributes, at the same time, because a function is an object, the function name is a pointer to the function object and can be assigned a value. The following describes the functions in detail. There are three ways to create a Function: using the Function constructor, Function declaration, and Function expression. The three methods are described below. Function constructor is used to create a Function instance by using the Function constructor. The Function constructor can receive any number of parameters, but the last parameter is considered as the Function body. The preceding parameter is used as the parameter of the created Function. Var test = new Function ("a", "B", "return a + B"); // parameters a and B, Function body return a + bconsole. log (test (); // 3 we can see that it is difficult, and we do not recommend this method in javascript advanced programming, this is mainly because the browser needs to parse the passed parameter strings in addition to the regular javascript code. This is similar to the eval () interpretation, which affects the performance. Function expressions are one of the common creation methods. For details, see var test = function (a, B) {return a + B;} console. log (test (); the Code above creates a function and calls it using test. In fact, the above Code first creates an anonymous function, and then assigns this anonymous function to the test variable. Each function has a name attribute, which is not part of the ECMA standard, but can be used in many places. We can name the above function. Copy the code below // function name newNamevar test = function newName (a, B) {return a + B;} console. log (test. name); // newName // anonymous function var nTest = function (a, B) {return a + B;} console. log (nTest. name); // The undefined copy code attribute will be explained in detail later. Function declaration is similar to the C language. This is the most common method for creating a function. Is directly declared through the function keyword, see function test (a, B) {return a + B;} console. log (test (1, 2); // 3console. log (test. name); // test difference the above describes the three methods for creating functions. Now we introduce the three differences, specifically the latter two, because functions are not recommended, performance is a major cause. The difference is that using the function declaration method will advance the function declaration, similar to the variable declaration mentioned above. That is to say, using the function declaration method, we can put the function declaration behind the calling function code, because the parser will upgrade the function declaration before code execution, referring to the top of the source code tree, the function expression method reports an error. For details, refer to the copy code // call the function console. log (test (1, 2); // 3 // create a function (function declaration method) function test (a, B) {return a + B ;} // The above function is equal to // create a function (function declaration method) // function test (a, B) {// return a + B; //} // console. log (test (1, 2); // 3 // call the function console. log (ntest (1, 2); // TypeError: undefined is not a function // create a function (function expression mode) var ntest = function (a, B) {return a + B;} duplicate code not heavy Unlike java, which has the concept of Function overloading, the loaded javascript language is actually a pointer pointing to the address of a Function instance. Of course, it can only point to one Function, of course, there is no concept of overloading, only overwriting. The function defined later overwrites the previously defined function. For details, see copy the code function test (a, B) {return a + B ;} // The following function overwrites the preceding function test (a, B) {return a + B + 100;} console. log (test (100); // copy the code. That is to say, if a function expression with the same name is with the function declared by the function, regardless of the position, the final function will be a function created using a function expression, because the function declaration will be promoted to the top. Let's take a look at the code below to copy the code var test = function (a, B) {return a + B-100;} function test (a, B) {// will be overwritten by the following function Return a + B;} function test (a, B) {// return a + B + 100;} console. log (test (100); //-the internal attribute function of the Code contains two important objects: arguments and this. Arguments is a similar group object that contains all the parameters for passing in the function. What is frequently asked during programming or interviews is how to convert arguments into an Array. See Array. prototype. slice. call (arguments); Array. prototype. slice. call (arguments, 0); Array. prototype. slice. call (arguments, 0, arguments. length); Array. apply (this, arguments); // Array is not used. apply (null, arguments); // no arguments has a length attribute, indicating the number of parameters passed in by the function, and a callee attribute. This is a pointer pointing to the function with this arguments, this is mainly used when the function calls itself, that is, recursion. Take a look at the example to understand the copy code function test (count) {console. log ("parameter:" + arguments [0] + "count:" + arguments. length); if (count <= 0) {console. log ("recursion" + count + "ended");} else {console. log ("recursion" + count); arguments. callee (-- count); // call yourself} test (3);/* parameter: 3 Number: 1 recursion 3 parameter: 2 Number: 1 recursion 2 parameter: 1 Number: 1 recursion 1 parameter: 0 count: 1 recursion 0 ends */copy the code this in javascript and this in java. this references the execution environment of the function, that is, this references different objects in different execution environments. The execution environment is not mentioned here. It will be described in detail later. this is also a brief introduction here, I will sort out some interview questions in the future to help you Understanding. For example, copy the code // global variable var color = "red"; // equivalent to window. color = "red" // defines an object var obj = {color: "blue"}; function pop (color) {alert (this. color);} pop (); // equivalent to window. pop (); input "red" // Add a method to the obj object and assign the pop value to it. pop = pop; obj. pop (); // output the "blue" Copy code to explain that this object is bound only when the function is executed. It can be said that this object is dynamic. A pop function is a function defined in the window, that is, a function in the global scope. When the pop function is directly executed, it is called in the global scope. This references window. this. color indicates window. color, and red is output. When we assign the pop function to the object obj and call pop, this references the object obj, this. color is obj. color, and blue is output. Here we will talk about the Function Attributes and methods, including length, name, prototype, apply, and call. The length attribute is relatively simple. It indicates the number of parameters defined when the function is defined. It must be consistent with arguments. length is separated, arguments. length indicates the number of actually entered parameters. For example, copy the code function test (a, B) {console. log ("Number of input parameters:" + arguments. length); console. log ("number of defined parameters:" + test. length);} test (); // 2 test (1); // test () // test (, 3) // 3, 2 // you can use arguments [I] to obtain the input parameter. If you define a parameter, enter two parameters, how can we obtain the second parameter? function testA (c) {console. log ("Number of input parameters:" + arguments. length); console. log ("number of defined parameters:" + test. leng Th); console. log ("second parameter:" + arguments [1]);} testA (1,100); 100, // All parameters can be obtained through traversal, no, the copy code name attribute is mentioned above. This is the name of the function. We mentioned this attribute when creating a function. This attribute is not a standard attribute, however, this attribute is used in many places, mainly for recursive calls. The name attribute is a read-only attribute and cannot be modified. Take a look at the example to copy the code // modify the name attribute function test () {console. log (test. name); // modify the name attribute test. name = "newName"; console. log (test. name);} test (); // test, test // use the name attribute inside the function to recursively call function testD (count) {console. log ("parameter:" + arguments [0] + "count:" + arguments. length); if (count <= 0) {console. log ("recursion" + count + "ended");} else {console. log ("recursion" + count); testD (-- count); // call yourself} testD (3);/* parameter: 3 count: 1 recursion 3 parameter: number 2: 1 recursion 2 parameter: 1 Number: 1 recursion 1 parameter: 0 Number: 1 recursion 0 ended */The use of the copy code name attribute is the same as that of arguments. callee (), but arguments. callee () is more convenient. The program does not need to change the function name when it is changed. The prototype attribute of the prototype function is a very important attribute, especially when customizing the reference type and implementing inheritance. Here we will briefly introduce it, because this attribute is sufficient to write an article separately. We can think that prototype is a template. When a new object is added, we will refer to this template to copy the attributes and methods in the template to the object. Of course, you do not define this template, this template does not have methods and attributes. Copy the code function People (name) {this. name = name;} // attribute People in prototype. prototype. home = "jilin"; var hainan = new People ("hainan"); console. log (hainan. home); // The jilin copy code is briefly introduced here, which will be detailed later. The call and apply methods have the same effect, that is, to change the value of this scope, to call itself in a specific scope, that is, to set the point of this, the difference is that the parameter receiving method is different. The apply method requires two parameters. The first parameter is the specified scope, which is the object to which this is to be pointed. The second parameter is the parameter array, and the parameters required for function calls, this parameter array can also be a pseudo array of arguments. The first parameter of call is the value bound to this. The number of other parameters is not fixed. Other parameters are the parameters required for function calling. Unlike apply, you must list them one by one. Let's take a look at the example of copying the code function sum (a, B) {return a + B;} // The arguments Parameter function callSum1 (a, B) {return sum. apply (this, arguments);} // array parameter function callSum2 (a, B) {return sum. apply (this, [a, B]);} // lists all function callSum3 (a, B) {return sum. call (this, a, B);} console. log (callSum1 (1, 2); console. log (callSum2 (1, 2); console. log (callSum3 (); copy the code. The above is an example of passing parameters. Then, let's look at the example of changing this to copy the code // global variable var color = "red "; // It is equivalent to window. color = "red "// Defines an object var obj = {color: "blue"}; function pop (color) {alert (this. color);} pop (); // equivalent to window. pop (); enter "red" pop. call (this); // redpop. call (obj); // copy the code to explain it, pop. the call (this) code changes the point of this, because it is a function called globally. this points to window and outputs window. color. The code pop. call (obj) points this to obj, so obj. color is output.