js Suspect Record Pure Dry Goods

1 js scope: rules for storing and accessing variables
2Left Query: The compiler looks for variables that appear to the left of the equal sign to assign values to them
3Right Query: All non-left queries are designed to find the value of a variable
If the left query cannot find the variable in all scopes, it will declare the variable in non-strict mode, and the right query will report refernceError

4 Closure: A reference to a function's internal scope outside the lexical scope of the function that occurs when the scope of the function is passed as a parameter to another non-current scope and is enforced outside the current lexical scope

 let fn1 = function (fn){
      fn()
    }
    let fn2 = function (a){
      let b = 2
      fn1(function fn3(){
        console.log(a+b)
      })
    }
    fn2(1)
    // The lexical scope of fn2 is passed to fn1 as a parameter, and the internal scope does not disappear when fn2 is executed because fn1 still maintains a reference to it

5 Closure and Cycle

    for(var i=1;i<=5;i++){
      setTimeout(()=>{
        console.log(i)
      },1000*i)
    }
    //Output 5 6
    //The callback function based on the eventLoop delay function is that asynchronous events are executed after the synchronous events, where the for loop is executed
    //By this time i has become 6 (the end condition of the for loop), because var is globally declared to point to the same reference to i within five callback functions
    //Memory space

So how do you output 1-5? We know that the callback execution of setTimeout happens after the loop, but the declaration of the callback function is generated within the loop. The reason why there are 5 6 cases is that the callback function is always declared with a reference to the same memory space, that is, five callback functionsAll point to the i of the external scope, so if each callback function can save different i references when declared, it will not be able to output different i when these callback functions are executed, then creating a separate copy of the scope in each loop and passing the scope into the callback function will not be possible

 for (var i = 1; i <= 5; i++) {
      (() => {
        let j = i
        console.log('variable'+i saved when the function is declared)
        setTimeout(() => {
          console.log(j);
        }, 1000 * j);
      })(i);
    }
    //Execution results:
    Variable 1 saved when a function is declared
 	Variable 2 saved when a function is declared
 	Variable 3 saved when a function is declared
 	Variable 4 saved in function declaration
 	Variable 5 saved when a function is declared
 	1
 	2
 	3
 	4
 	5
    //Create a copy of the scope by executing the function immediately so that the reference to the scope is maintained while the function is declared and the timely loop is complete.
    //but variables within this scope are still not recycled and output when the callback function executes
   for (var i = 1; i <= 5; i++) {
      let j = i;
      setTimeout(()=>{
        console.log(j)
      },1000*i)
    }
    // Lets can also form scoping modules to hold variables

6 this points to
Default pointing, along the function call stack, to the execution context, or who calls to whose scope

let a = 1
function fn1(){
let a =2 
console.log(this.a)
}
fn1()
//Output 1

let b = {
    a:3,
    fn2:function(){
        let a = 4
        console.log(this.a)
    }
}
b.fn2()
// Output 3

Strong binding, specifying the execution context of a function by call,bind,apply, etc., forcibly changing the this direction of the function
For example, the principle of the call method

var a = 1
function fn1(...arg){
var a =2 
console.log(this.a)
console.log(arg)
}
Function.prototype.call1=function(obj,...argument){
     // Since the call method is called by fn1, this in the call method points to FN1
    obj._fn = this
     // To change fn1's this pointing, simply change its execution context, that is, its caller
    obj._fn(...argument)
    delete obj._fn
 }
 let testObj = {a:3}
 fn1.call1(testObj,1,13,123)

//Output (3) [1,13,123]

7 Object Inheritance Mechanism
Unlike traditional object-oriented languages, js does not produce instances from class replication, so all instances are actually separate copies of classes. All instances within js simply create a new object, and then point this instance at the prototype memory space of the class, so all instances actually point to the same memory space

We create instances by using the new keyword to see what new does

    /* 
    params
    c:Parent Class
    opt: parameter
    */
    function adminNew(c, opt) {
        //Create a new object
        let obj = Object.assign({},opt||{})
        // Point the prototype space of the new object to the prototype space of the parent class
        // The prototype properties of all instances and parent classes of tip actually point to the same memory space
        obj.__proto__ = c.prototype
        // Point this of the parent class to the newly created object
        c.call(obj)
        return obj
    }
    let vueInstance = adminNew(Vue,{data:{test:1}})
    console.log(vueInstance)
    console.log(vueInstance.data.test)
    console.log(vueInstance instanceof Vue)
    //output 1
         true

8 Constructor
js has no constructor, function is a function. The so-called constructor is just a function that has been newer. The constructor of his instance points to him and he becomes the constructor of his instance. So why does the constructor property of the instance point to the function?The principle of the new operator is that an instance generated by new and its parent, the prototype property of the constructor, point to the same memory space, and the constructor automatically gets the prototype.constructor property to point to itself when it is declared, so although the instance itself does not have the constructor property, the prototype to which the instance belongsThe constructor with an instance where this property is naturally found based on the prototype chain lookup rules points to the newhe function, also known as the constructor

  function Foo(){}
    console.log(Foo.prototype.constructor)
    let f = new Foo()
    console.log(f.constructor)
    // The prototype properties of the instance and the constructor point to the same memory space
    // The prototype.constructor property points to itself when the constructor is declared
    // So all the constructor properties of the objects associated with Foo point to Foo
    console.log(Object.getPrototypeOf(f)===Foo.prototype)
    //output
    ƒ Foo(){}
    ƒ Foo(){}
    true

Tags: Vue

Posted on Mon, 02 Sep 2019 18:42:04 -0700 by djg_uk