• call(), apply(), bind() three methods

1. Both call() and apply() methods can change the direction of this.
2. call() usage:

   Function name. call (object, parameter 1, parameter 2,...);
   Method name. call (object, parameter 1, parameter 2,...);

3. apply() usage:

   Function name. apply (object, [parameter 1, parameter 2,...]);
   Method name. apply (object, [parameter 1, parameter 2,...]);

4. Code:

       function Person(age,name) {
           this.age=age;
           this.name=name;
       }
       Person.prototype.sayHi=function (x,y) {
         console.log("Ha-ha"+(x+y)+"===========>"+this.sex);
       };
       function Student(sex,age,name) {
           this.sex=sex;
           Person.apply(this,[age,name]);
       }
       var per=new Person(10,"Xiao Ming");
       var stu=new Student("male",100,"Xiao Wang");
       per.sayHi.apply(stu,[10,20]);//Haha 30==================> Male
       per.sayHi.call(stu,10,20);//Haha 30==================> Male
       console.log("===========");
       console.log(stu);

    

5. bind() method:

   When duplicated, the parameters are passed into the f1 function, x===> 10, y===> 20, null is this, the default is window.
   The bind method means replication. Parameters can be passed in at the time of replication or at the time of call after replication.
   apply and call change this pointing when calling
    The bind method, when you copy a copy, changes the direction of this
   
   Function name. bind (object, parameter 1, parameter 2,...); --> Return value is the function after replication. 
   Method name. bind (object, parameter 1, parameter 2,...); --> Return value is the method after replication

Code:

 // function Person(age) {
    //     this.age=age;
    // }
    // Person.prototype.eat=function () {
    //   console.log("eaten"+"=============>"+this. age);
    // };
    // function Student(age) {
    //     this.age=age;
    // }
    // var per=new Person(10);
    // var stu=new Student(100);
    // var ff=per.eat.bind(stu);
    // ff();
    function ShowRandom() {
        this.numeber=parseInt(Math.random()*10+1);
    }
    ShowRandom.prototype.show1=function () {
        var that=this;
        window.setInterval(function () {
            this.show2();
        }.bind(that),1000);
    };
    ShowRandom.prototype.show2=function () {
      console.log(this.numeber);
    };
    var num=new ShowRandom();
    num.show1();//Cyclic Display Random Number 7
    num.show2();//7

• Several members of a function

There is a name attribute in the function - --> the name of the function. The name attribute is read-only and cannot be modified.
There is an arguments attribute in the function - > the number of arguments
 There is a len gt h attribute in a function - --> the number of parameters when a function is defined
 There is a caller attribute in the function - > call (f1 function is called in f2 function, so the caller is f2 at this time)

• High-order function as parameter

 var arr = [1, 100, 20, 200, 40, 50, 120, 10];
    //Sorting - Functions are used as parameters and anonymous functions are used as parameters of sort method. Then there are two parameters in anonymous functions.
    arr.sort(function (obj1,obj2) {
      if(obj1>obj2){
        return -1;
      }else if(obj1==obj2){
        return 0;
      }else{
        return 1;
      }
    });
    console.log(arr);//[1,10,20,40,50,100,120,200]

• Higher-order function as return value

   function File(name, size, time) {
      this.name = name;//Movie name
      this.size = size;//Movie size
      this.time = time;//Movie release time
    }
    var f1 = new File("jack.avi", "400M", "1997-12-12");
    var f2 = new File("tom.avi", "200M", "2017-12-12");
    var f3 = new File("xiaosu.avi", "800M", "2010-12-12");
    var arr = [f1, f2, f3];

    function fn(attr) {
      //Function as return value
      return function getSort(obj1, obj2) {
        if (obj1[attr] > obj2[attr]) {
          return 1;
        } else if (obj1[attr] == obj2[attr]) {
          return 0;
        } else {
          return -1;
        }
      }
    }

    var ff = fn("name");

    //Functions as parameters
    arr.sort(ff);
    for (var i = 0; i < arr.length; i++) {
      console.log(arr[i].name + "====>" + arr[i].size + "===>" + arr[i].time);
    }

• Scope, Scope Chain and Pre-analysis

1. Scope: Variables have local variables (defined in the function as local variables) and global variables. Scope also has local and global scopes. Scope is the use of variables.

Scope chain: The use of variables, from inside to outside, layer by layer search, search to use directly. When you find a level 0 scope, you will report an error if you haven't found it yet.

   var num=10; //Scope chain level: 0
   var num2=20;
   var str = "abc";
   function f1() {
     var num2=20;
     function f2() {
       var num3=30;
       console.log(num);
     }
     f2();
   }
   f1();//10

3. Preparsing: Before the browser parses the code, the variable declaration and function declaration are advanced to the front of the scope.

    //Increase of variables
    console.log(num);//100
    var num=100;

    //The declaration of the function was advanced
    f1();//This function is executed.
    function f1() {
      console.log("This function,Implemented");
    }

    var f2;
    f2=function () {
      console.log("Handsome!");
    };
    f2();//Handsome!

• closure

1. Concept: In function A, there is a function B, which can access variables or data defined in function A, and then form a closure (this sentence is not rigorous for the time being). If you want to cache data, put it in the middle of the outer function and the inner function.
2. Function: Caching data. Advantages and disadvantages, no timely release.
3. Local variables are in functions. When a function is used, local variables are automatically released. After closure, the chain of scopes of local variables in the closure is extended.

• sandbox

Concept: An environment, a black box, simulates the real world in a virtual environment and makes experiments. The results of experiments are the same as those of the real world, but they will not affect the real world. Sandboxes have been used in previous cases of snake-eating.

  (function () {
      var str="Xiao Bai likes Xiao Hei.";
      str=str.substr(2);
      console.log(str);//Like little black
    }());


    //sandbox
    (function () {
      var str="Xiao Ming likes Xiao Hong.";
      str=str.substr(2);
      console.log(str);//Like little red
    }());

 var getTag = 10;
  var dvObjs = 20;
  var pObjs = 30;
//Sandbox
  (function () {
    //Get elements by tag name
    function getTag(tagName) {
      return document.getElementsByTagName(tagName)
    }
    //Get all div s
    var dvObjs = getTag("div");
    for (var i = 0; i < dvObjs.length; i++) {
      dvObjs[i].style.border = "2px solid pink";
    }
    //Get all p
    var pObjs = getTag("p");
    for (var i = 0; i < pObjs.length; i++) {
      pObjs[i].style.border = "2px solid pink";
    }
  }());
  console.log(getTag);//10
  console.log(dvObjs);//20
  console.log(pObjs);//30
//Sandbox content does not affect the external environment

• recursion

1. Concept: Calling the function itself in a function is recursive, and recursion must have the condition of ending.
2. Example:

       //Find the sum of n numbers, 5 calculate 1+2+3+4+5
      var sum=0;
      for(var i=1;i<=5;i++){
        sum+=i;
      }
      console.log(sum);//15
   
   
       //Recursive implementation: finding the sum of N numbers n = 5 - > 5 + 4 + 3 + 2 + 1
   
      // Declarations of functions
      function getSum(x) {
        if(x==1){
          return 1;
        }
        return x+getSum(x-1);
      }
      //Call of function
      console.log(getSum(5));//15

     //Fibonacci sequence
       function getSeries(x) {
           if (x===1||x===2){
               return 1;
           }
           else {
               return  getSeries(x-1)+getSeries(x-2);
           }
       }
       console.log(getSeries(12));

   3. Implementation process:

   The code executes getSum (5) - > enters the function, where x is 5 and 5+getSum(4) is executed, while the code waits.
   At this time, 5+getSum(4), the code first does not calculate, first executes getSum(4), enters the function, executes 4+getSum(3), waits, first executes getSum(3), enters the function, executes 3+getSum(2), waits, first executes getSum(2), enters the function, executes 2+getSum(1); waits, first executes getSum(1), executes the judgement of x= 1, so,
   At this point getSum(1) turns out to be 1, and starts going out.
   The result of 2+getSum(1) is: 2 + 1
    Implementation:
   getSum(2)---->2+1
    The result of 3+getSum(2) is 3 + 2 + 1
    The result of 4+getSum(3) is 4 + 3 + 2 + 1
    The result of 5+getSum(4) is 5 + 4 + 3 + 2 + 1
   
   Results: 15