JS关于作用域和闭包的理解

说一下对变量提升的理解

•   变量定义
•   函数声明（注意和函数表达式的区别）

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

• 作为构造函数执行
• 作为对象属性执行
• 作为普通函数执行
• call apply bind

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

var i

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

如何理解作用域

• 自由变量
• 作用域链，即自由变量的查找
• 闭包的两个场景（示例代码在下方）

实际开发中闭包的应用

//闭包实际应用中主要用于封装变量，收敛权限
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

 

知识点

执行上下文

• 范围：一段<script>或者一个函数
• 全局：变量定义、函数声明
• 函数：变量定义、函数声明、this、argumentsps:

 ps:注意‘函数声明‘和‘函数表达式的区别

this

this要在执行时才能确认值，定义时无法确认

var a = {
    name: 'A',
    fn:function(){
        console.log(this.name)
    }
}

a.fn() //this === a
a.fn.call({name:'B'})  //this === {name:'B'}
var fn1 = a.fn
fn1() //this === window

• 作为构造函数执行
• 作为对象属性执行
• 作为普通函数执行
• call apply bind

// call apply bind
function fn1 (name,age){
    alert(name)
}
fn1.call({x:100},'zhangsan',20)  //this === {x:100}
fn1.apply({x:100},['zhangsan',20])  //this === {x:100}
var fn2 = function (name,age){
    alert(name)
    console.log(this)
}.bind({y:20})

fn2('zhangsan',20) //this === {y:20}

 作用域

• 没有块级作用域
• 只有函数和全局作用域

闭包的使用场景 

• 函数作为返回值

• function F1 (){
      var a = 100
      return function (){
          console.log(a)  //自由变量，父作用域寻找
      }
  }
  
  var f1 = F1()
  var a = 200
  f1() //100

   

• 函数作为参数来传递

• function F1(){
      var a = 100
      return function(){
          console.log(a)//自由变量，父作用域寻找
      }
  }
  var f1 = F1()
  function F2(fn){
      var a = 200
      fn()
  }
  F2(f1) //100