<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>051-060 Chapter summary</title> </head> <body> <pre> 051. Function introduction - Function is also an object - Functions can encapsulate some functions (codes) and execute them when necessary - Function can save some code to call when needed - Use typeof When checking a function object, it returns function </pre> <script type="text/javascript"> console.log("051"); //We seldom use constructors to create a function object in actual development //The code to be encapsulated can be passed to the constructor as a string var fun11 = new Function("console.log('this is a first code')") //The code in the function will execute when the function is called,Call function syntax: function object() //When a function is called, the encapsulated code in the function executes in order fun11(); /* * Using function declarations to create a function * Syntax: * function Function name ([parameter 1, parameter 2... Parameter N]){ * Sentence... * } */ function fun12(){ console.log("This is my second function~~~"); document.write("~~~~(>_<)~~~~"); } fun12(); /* * Using function expressions to create a function * var Function name = function([parameter 1, parameter 2... Parameter N]){ * Sentence.... * } */ var fun13 = function(){ console.log("I am the code encapsulated in anonymous functions"); }; fun13(); </script> <pre> 052. Parameters of function //One or more parameters (formal parameters) can be specified in () of the function //Multiple parameters are used and separated. Declaring a parameter is equivalent to declaring a corresponding variable inside a function //But not assigned </pre> <script type="text/javascript"> console.log("052"); // Define a function to find the sum of two numbers function sum21(a,b){ console.log("a = "+a); console.log("b = "+b); console.log(a+b); } //When you call a function, you can()Arguments specified in (actual arguments) //The argument will be assigned to the corresponding parameter in the function sum21(123,456); /* * When a function is called, the parser does not check the type of the argument, * Therefore, it should be noted that it is possible to receive illegal parameters. If possible, it is necessary to check the type of parameters * The argument of a function can be any data type */ sum21(123,"hello"); sum21(true , false); /* * When a function is called, the parser does not check the number of arguments * Extra arguments will not be assigned * If the number of arguments is less than the number of parameters, the parameters without corresponding arguments will be undefined * */ //sum(123,456,"hello",true,null); sum21(123); </script> <pre> 053. Return value of function //You can use return to set the return value of a function //Syntax: return value return The latter value will be returned as the result of function execution, //You can define a variable to receive the result //The statement after return will not execute in the function //If the return statement is not followed by any value, it is equivalent to returning an undefined, //If return is not written in the function, undefined will also be returned return Can be followed by any type of value </pre> <script type="text/javascript"> console.log("053"); // Define a function to find the sum of two numbers function sum3(arg1,arg2){ var sum = arg1 + arg2 return sum } var result = sum3(5,3) console.log(result) </script> <pre> 054. Arguments can be any value </pre> <script type="text/javascript"> console.log("054"); // Define a function to determine whether a number is even or not, and return true，Otherwise return false function isOu(num){ return num%2 ==0 } var result = isOu(15) console.log(result) // An argument can be any data type or an object // When we have too many parameters, we can encapsulate them into an object and pass them through the object function sayhello(obj){ var say = "My name is"+obj.name+"I am this year"+obj.age return say } var person = { name:'Waiter', age: 18 } var result = sayhello(person) console.log(result) // An argument can be an object or a function function fun4(a){ console.log("a ="+ a); } fun4(sayhello(person)) /* * sayhello() * - Calling function * - Equivalent to the return value of the function used * * sayhello * - Function object * - Equivalent to using function objects directly */ </script> <pre> 055. Type of return value //The return value can be any data type //It can also be an object or a function </pre> <script type="text/javascript"> console.log("055"); function fun51(){ alert("Function is about to execute~~~~"); for(var i=0 ; i<5 ; i++){ if(i == 2){ //Use break You can exit the current loop //break; //continue Used to skip the current cycle continue; //Use return You can end the entire function //return; } console.log(i); } alert("Function completed~~~~"); } fun51(); function fun52(){ //Return an object return {name:"Sand monk"}; } var a = fun52(); console.log("a = "+a); function fun53(){ //Declare another function inside the function function fun54(){ console.log("I am fun54"); } //take fun4 Function object as return value return fun54; } a = fun53(); console.log(a); a(); fun53()(); </script> <pre> 056. Execute function now //After the function is defined, it is called immediately. This function is called immediate execution function //Functions executed immediately are often executed only once </pre> <script type="text/javascript"> console.log("056"); /*(function(){ alert("I am an anonymous function; })();*/ (function(a,b){ console.log("a = "+a); console.log("b = "+b); })(123,456); </script> <pre> 057. Methods and enumeration properties </pre> <script type="text/javascript"> console.log("057"); var obj7 = { name:"Sun WuKong", age:18, gender:"male", address:"Flower and fruit hill" }; //Enumerating properties in objects //Use for ... in Sentence /* * Syntax: * for(var Variable in object){ * * } * * for...in If there are several properties in the statement object, the loop body will execute several times * Each time it executes, it assigns the name of a property in the object to the variable */ for (var n in obj7){ console.log("Attribute name:"+n) console.log("Attribute value:"+obj7[n]) } </script> <pre> 058. global scope - Scope refers to the scope of a variable - stay JS There are two scopes in: 1.global scope - Written directly in script Label JS Code, all in global scope - Global scopes are created when the page is open and destroyed when the page is closed - There is a global object in the global scope window， //It represents a browser window, which is created by the browser and can be used directly - In the global scope: //The created variables will be saved as properties of the window object //All functions created will be saved as methods of window objects - Variables in the global scope are global variables, //Accessible from any part of the page //Variable declaration ahead - Use var The variables declared by the keyword will be declared (but will not be assigned) before all code execution, //However, if the var keyword is not applicable when declaring variables, the variables will not be declared in advance //Function declaration ahead of time - Functions created using function declarations function function(){} //It will be created before all code is executed, so we can call the function before the function declaration //Functions created using function expressions are not declared ahead of schedule, so they cannot be called before declarations. </pre> <script type="text/javascript"> console.log("058"); var a = 10; var c = "hello"; console.log(window.c); function fun(){ console.log("I am fun function"); } window.fun(); //window.alert("hello"); // Variable declaration ahead console.log("a2 = "+a2); var a2 = 123; fun81(); //Function declaration, which will be created in advance function fun81(){ console.log("I am a fun function"); } //fun82(); //Function expression, not created in advance var fun82 = function(){ console.log("I am fun2 function"); }; fun82(); </script> <pre> 059. Function scope - The function scope is created when the function is called. After the function is executed, the function scope is destroyed - Each time a function is called, a new function scope is created, and they are independent of each other - Variables in the global scope can be accessed in the function scope //Function scope variables are not accessible in the global scope - When a variable is operated in the function scope, it will first look for it in its own scope and use it directly if there is one //If not, look up the scope until you find the global scope, //If it is still not found in the global scope, an error ReferenceError will be reported - To access global variables in a function, you can use the window object </pre> <script type="text/javascript"> console.log("059"); var a01 = "Overall situation a" function fun91(){ var a01 = "I am fun91 Of a" var b01 = "I am fun91 Of b" console.log(a01) function fun92(){ console.log(window.a01) } fun92() } fun91(); //console.log(b01) /* * There is also a declaration advance feature in the function scope, * Variables declared with the var keyword are declared before all code in the function executes * Function declarations are also executed before all code in the function is executed */ function fun93(){ fun94() function fun94(){ console.log(a02) } var a02 = "I am a" } fun93() //In functions, not applicable var Declared variables become global variables function fun95(){ d01 = "d01" } fun95() console.log(d01) //Defining a parameter is equivalent to declaring a variable in a function scope var e = 23 function fun96(e){ console.log(e) } fun96() //undefined </script> <pre> 060. debug(Debugging) </pre> <script type="text/javascript"> console.log("060"); var a60 = 123 function fun60(a60){ console.log(a60) a60=456 } fun60() //undefined console.log(a60) // 123 // var a61 = 123 function fun61(a61){ console.log(a61) a61=456 } fun61(789) //789 console.log(a61) //123 alert(d60) var a62 = 10 var b60 = 20 c60 = true function fun62(){ console.log("hello") } var d60 = 30 </script> </body> </html>
All basic course links:
1. Summary of JavaScript basic video tutorial (Chapter 001-010) 2. Summary of JavaScript basic video tutorial (Chapter 011-020) 3. Summary of JavaScript basic video tutorial (Chapter 021-030) 4. Summary of JavaScript basic video tutorial (Chapter 031-040)
5. Summary of JavaScript basic video tutorial (Chapter 041-050) 6. Summary of JavaScript basic video tutorial (Chapter 051-060) 7. JavaScript basic video tutorial summary (Chapter 061-070) 8. JavaScript basic video tutorial summary (Chapter 071-080)
9. JavaScript basic video tutorial summary (Chapter 081-090) · 10. JavaScript basic video tutorial summary (Chapter 091-100) · 11. JavaScript basic video tutorial summary (Chapter 101-110) · 12. JavaScript basic video tutorial summary (Chapter 111-120)
13. JavaScript basic video tutorial summary (chapters 121-130) · 14. JavaScript basic video tutorial summary (chapters 131-140)
In addition, please pay attention to my Sina micro-blog