JS作用域和闭包核心面试题

• 说一下对变量提升的理解

  • JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
  • JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

• 说明this几种不同的使用场景

  • 第一种情况: 全局下this

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

    注意: 在严格模式下 “use strict” this是undefined

  • 第二种情况:构造函数

    • 当函数作为构造函数调用时,this代表new出来的对象;

    • 如果没有使用new而是直接调用函数,this===window;

    • 不仅仅是构造函数的prototype,即便是在整个原型链中,this代表的也是当前对象的值;

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

  • 第三种情况:函数作为对象的一个属性

    • 函数作为对象的一个属性被调用的时候,this指向的是该对象;

    • 函数作为对象的一个属性被赋值到另一个变量中调用,this===window

      扫描二维码关注公众号，回复： 12274509 查看本文章

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

  • 第四种情况: 函数用apply() call() bind()调用时,this取得是传入的对象

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

• 创建10个<a>标签，点击的时候弹出来对应的序号

  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)
  }
  

• 如何理解作用域

  • 《JavaScript权威指南》中，对作用域的描述为：
    • 变量作用域：一个变量的作用域（scope）是程序源代码中定义这个变量的区域
  • 《你不知道的Javascript·上卷》中对作用域的描述则为：
    • 负责收集并维护由所有生命的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。
  • 简单来讲，作用域（scope）就是变量访问规则的有效范围。
    • 作用域外，无法引用作用域内的变量；
    • 离开作用域后，作用域的变量的内存空间会被清除，比如执行完函数或者关闭浏览器
    • 作用域与执行上下文是完全不同的两个概念。我曾经也混淆过他们，但是一定要仔细区分。

• 实际开发中的闭包应用

  • 闭包实际应用中主要用于封装变量，收敛权限

    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