Scope of js variables:

Global scope (global variables) : variables declared outside of a function ** Life cycle (variables declared to destroyed) : page open to close. Local scope (local variable) : a variable declared in a function ** Life cycle: a function is called from the start to the end of its execution

closure

1. Introduction to closures

1. Closure

1.1 Closures: a function that can access internal variables from outside of a function * Closures are functions 1.2 Closures: A function that can access internal variables from outside of a function * Extends the life of local variables 1.3 Closures: A. We declare a closure b inside outer function closure B. A closure is a bridge between the inside of the function (local scope) and the outside of the function (global scope)Copy the code
// function fn(){// var zhangsan = {// name:' zhangsan ', // age:34 //}; // var zhangsan = {// name:' zhangsan ', // age:34 //}; / /}; // fn(); // console.log(zhangsan); // console.log(zhangsan); // 2. Return value // Disadvantages: Waste memory resources. // function fn(){// var zhangsan = {// name:' zhangsan ', // age:34 //}; // return zhangsan; / /}; // var a = fn(); // console.log(a); // var b = fn(); // console.log(b); // // are a and B the same object? // // each time the function is called, a new object is generated. Log (a == b); // console.log(a == b); Var zhangsan = {name:' zhangsan ', age:34}; var zhangsan = {name:' zhangsan ', age:34}; Function closure(){// console.log(canglaoshi); return zhangsan; }; return closure; }; Closure (0xbbbb); var bibao = fn(); var bibao = fn(); Var a = bibao(); console.log(a); var b = bibao(); console.log(b); console.log(a == b); //trueCopy the code

2. The steps and points of using closure functions

1. Review the syntax steps for closures (3 steps)

A. Declare a function closure B in outer. Return the desired variable c in closure. A. External functions can only be called once if you want to access the same variable. B. If you want to access different variables, external functions can be called multiple times * each call generates a new local variable and a new closure functionCopy the code
function outer(){ var num = Math.floor(Math.random()*100); console.log(num); Function closure(){console.log(num); function closure(){console.log(num); //2. Return the desired variable in the closure function. }; //3. Return closure; }; // First note: external functions can only be called //1 once if you want the closure to access the same variable. Var bibao = outer(); var bibao = outer(); //2. Call the closure bibao(); bibao(); bibao(); Var bibao1 = outer(); var bibao1 = outer(); // bibao1(); outer()(); // var bibao2 = outer(); // bibao2(); outer()(); // var bibao3 = outer(); // bibao3(); outer()(); / / 2. Function vouter(){var num = 10; function closure(){ num++; console.log(num); return num; }; return closure; }; Var bb = vouter(); bb(); //11 bb(); //12 bb(); Var bb1 = vouter(); bb1(); //11 // var bb2 = vouter(); // bb2(); //11 vouter()(); // var bb3 = vouter(); // bb3(); //11 vouter()();Copy the code

3. See the nature of closures from an exercise

//1. var name = 'My Window'; var obj = { name:'My Object', getFunction:function(){ return function(){ console.log(this.name); }; }}; //(1) var fn = obj.getFunction() (2) var fn() // window.fn() //(2) var fn = obj.getFunction() (2) var fn() // window.fn() The function refers to window obj.getFunction()() because it is global; //'My Window'; //2. var name = 'My Window'; var obj = { name:'My Object', getFunction:function(){ var that = this; return function(){ console.log(that.name); }; }}; //(1) call obj.getFunction() : This is obj, which declares a local variable that stores this //(2). The closure extends the life of that, so it prints console.log(obj.getFunction()); //My ObjectCopy the code

4. Classic use scenarios for closures

/* 1. Sandbox mode: is a design mode of JS. A separate scope performs separate functions, usually an anonymous function that calls itself 2. Function (w){var person = {name:' name ', age:18}; function(w){name:' name ', age:18}; Person. Eat = function(){console.log(' eat rice today '); }; Person. Play = function(){console.log(' good luck, chicken tonight '); }; /* 1. How can variables in the sandbox be accessed externally? 2. Use parameters why not just use Window? A. The sandbox cannot access external variables directly, which destroys encapsulation. B. The actual development code in the future will be compressed, and the window may be compressed into W. */ w.erson = person; })(window); console.log(person); person.eat();Copy the code

recursive

1. Recursive functions: Functions call themselves

2. Features of recursive functions a. Functions that can be implemented recursively can be implemented by circular calling functions, but the syntax is concise and performance is different b. It is important to have an end condition, otherwise it will lead to an infinite loop. Note: Recursion should not be used arbitrarily, because it will not perform well in some cases

1. Simple use of recursion

Var I = 1; Function fn(){console.log(); i++; if(i<=3){ fn(); }; }; fn(); // loop for(var I = 1; i<=3; i++){ fn(); } function fn(){console.log();} function fn(){console.log(); };Copy the code

2. Recursion usage scenarios

Function getSum(n) {if (n == 1) {return 1; } else { return getSum(n - 1) + n; }; // if(n == 1){// return 1; // }else if(n == 2){ // return getSum(n-1) + n; // }else if(n == 3){ // return getSum(2) + 3; // }else if(n == 4){ // return getSum(3) + 4; // }else if(n == 5){ // return getSum(4) + 5; // } // *** // else if(n == n){ // return getSum(n-1) + n // } }; console.log(getSum(5)); Function getSum(n){// // sum = 0; // for(var i = 1; i<=n; i++){ // sum+=i; / /}; // return sum; / /}; // console.log(getSum(100)); //2. Find (*) /* 1! = 5 * 4 * 3 * 2 * 1 6! Function jieChen(n) {return n == 1? 1 : jieChen(n - 1) * n; // if(n == 1){ // return 1; // }else{ // return jieChen(n-1) * n; / /}; // if(n == 1){// return 1; // }else if(n == 2){ // return jieChen(1) * 2; // }else if(n == 3){ // return jieChen(2) * 3 // }else if(n == n){ // return jieChen(n-1) * n; / /}}; console.log(jieChen(5)); Var num = (function (n) {return n == 1? Var num = (function (n) {return n == 1? 1 : arguments.callee(n - 1) * n })(6); console.log(num); Function jieChen(n){// var sum = 1; // for(var i = 1 ; i<=n; i++){ // sum *= i; / /}; // return sum; / /}; // console.log(jieChen(6)); // 5 * 4 * 3 * 2 * 1 = 120 //3 Console.time (); console.time(); console.time(); / / the recursive implementation function fib (n) {if (n = = 1 | | n = = 2) {return 1; }else{ return fib(n-2) + fib(n-1); }; // if(n == 1 || n == 2){ // return 1; // }else if(n == 3){ // return fib(3-2) + fib(3-1); // }else if(n == 4){ // return fib(4-1) + fib(4-2) // } }; console.log(fib(10)); console.timeEnd(); / * requirements: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233,377,610,987,1597,2584,4181,6765,10946,17711,28657, 46368... Function fib(n) {var arr = [1, 1]; function fib(n) {var arr = [1, 1]; for (var i = 2; i < n; i++) { arr[i] = arr[i - 2] + arr[i - 1]; }; return arr[arr.length-1]; }; console.log(fib(100)); // arr[2] = arr[2-2] + arr[2-1]; // arr[3] = arr[3-2] + arr[3-1]; // arr[4] = arr[4-2] + arr[4-1];Copy the code

3. Use recursion to iterate over DOM numbers

/* Recursive application scenario: traversing the DOM tree 1. Requirement: Get all descendants of the father element 2. No. 3. Father b. Walk through each child element to find the child element. / var father = document.getelementByid ('father'); / var father = document.getelementByid ('father'); var list = []; Function houDai(ele){for(var I = 0; i<ele.children.length; i++){ list.push(ele.children[i]); HouDai (ele. Children [I]); }; }; // houDai(father); // console.log(list); HouDai (document); console.log(list);Copy the code