JS scope and closure core interview questions

• Talk about the understanding of variable promotion

  • In JavaScript, the declaration of functions and variables will be promoted to the top of the function.
  • In JavaScript, variables can be declared after use, that is, variables can be used first and then declared.

• Explain several different usage scenarios of this

  • The first case: this globally

    function fn1 (){
            
            
    　　return this
    }
    console.log(fn1())  //window
    

    Note: "use strict" this is undefined in strict mode

  • The second case: constructor

    • When the function is called as a constructor, this represents the new object;

    • If you don't use new but call the function directly, this===window;

    • Not only the prototype of the constructor, even in the entire prototype chain, this represents the value of the current object;

      function Foo (name){
                
                
      　　this.name = name ;
      　　console.log(this)
      }
      
      var foo = new Foo('Emma');  //Foo {name: "Emma"} 
      Foo() //window
      

  • The third case: function as an attribute of the object

    • When a function is called as an attribute of an object, this points to the object;

    • Function as an attribute of the object is assigned to another variable to call, this===window

      var obj = {
                
                
      　　x :10,
      　　fn:function(){
                
                
      　　　　console.log(this)
      　　}
      }
      
      obj.fn()   //当前对象
      var newFn = obj.fn;  newFn() //window
      

  • The fourth case: When the function is called with apply() call() bind(), this gets the object passed in

    function fn() {
            
            
        console.log(this)
    }
    fn()  // window
    fn.call({
            
            a:100})  // {a:100}  和 call 同理的还有 apply bind
    

• Create 10 <a>labels, when clicked, the corresponding serial number will pop up

  var i
  for (i = 0; i < 10; i++) {
        
        
      (function (i) {
        
        
          var a = document.createElement('a')
          a.innerHTML = i + '<br>'
          a.addEventListener('click', function (e) {
        
        
              e.preventDefault()
              alert(i)
          })
          document.body.appendChild(a)
      })(i)
  }
  

• How to understand scope

  • In the "JavaScript Definitive Guide", the scope is described as:
    • Variable scope: the scope of a variable (scope) is the area in the program source code where the variable is defined
  • The description of the scope in "Javascript You Don't Know, Volume 1" is:
    • Responsible for collecting and maintaining a series of queries composed of identifiers (variables) of all lives, and implementing a very strict set of rules to determine the access rights of the currently executing code to these identifiers.
  • Simply put, scope is the effective scope of variable access rules .
    • Outside the scope, variables in the scope cannot be referenced;
    • After leaving the scope, the memory space of the scoped variables will be cleared, such as executing the function or closing the browser
    • Scope and execution context are two completely different concepts. I have confused them once, but we must distinguish them carefully.

• Closure application in actual development

  • In practical applications, closures are mainly used to encapsulate variables and converge permissions

    function isFirstLoad() {
            
            
        var _list = [];
        return function(id) {
            
            
            if(_list.indexOf(id) >= 0){
            
            
                return false;
            } else {
            
            
                _list.push(id);
                return true;
            }
        }
    }
    
    // 使用
    var firstLoad = isfirstLoad()
    firstLoad(10)  // true
    firstLoad(10)  // false
    firstLoad(20)  // true