JavaScript-总结篇之作用域和闭包

• 说一下对变量提升的理解
• 说明this几种不同的使用场景
• 创建10个<a>标签,点击的时候弹出来对应的序号
• 如何理解作用域
• 实际开发中闭包的应用

执行上下文

//Demo
console.log(a)  //undefined
var a = 100

fn('greentea')  //'greentea'  20
function fn(name){
  age = 20
  console.log(name,age)
  var age
}

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

执行上下文,也就是将变量定义和函数声明在代码执行前就提前的拿出来,定义的定义,声明的声明,但是变量因为没赋值,所以a是undefined.fn函数已经声明过了,因此可以尽管去执行它.在它的函数中,也会执行上下文,同理,唯一注意的是,函数中的参数也相当于定义.

关于函数声明和函数表达式

fn()
function fn(){

}
fn1()   //报错
var fn1 = function (){

}

两者最大的区别是函数表达式相当于变量定义,因此fn1 = undefined,在执行fn1()时,肯定会报错.

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

this的几种情况

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

call apply bind的区别

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

var fn2 = function (name,age){
    console.log(this)
}.bind({y:200})
fn2('greentea',20)

this在函数中时,指向的是window,但是,当用call,apply,bind以后,传入的对象是this.

作用域和作用域链

首先,明确一点,JS无块级作用域

var a = 100
function fn(){
    var b = 200

    //当前作用域没有定义的变量,即'自由变量'
    console.log(a)
    console.log(b)
}
fn()

作用域链的概念就是当前作用域下没有这个变量或函数的时候,那么它会向它的父级作用域查找,如果没有会向父级的父级的作用域找....还有重要的一点就是,函数的父级作用域是在这个函数定义的时候,这个函数的父级作用域就已经确定了,而不是在这个函数执行的时候确定的.

闭包

function F1(){
    var a = 100
    //返回一个函数(函数作为返回值)
    return function(){
        console.log(a)
    }
}
//f1得到一个函数
var f1 = F1()
var a = 200
f1()    //100

在这段代码中,最后的结果是100,f1执行的函数是在F1中返回的匿名函数,这个匿名函数是在F1定义的,因此这个匿名函数的变量应该从它定义的父级中去找.

闭包的使用场景:
1.函数作为返回值
2.函数作为参数传递

function F1(){
    var a = 100
    //返回一个函数(函数作为返回值)
    return function(){
        console.log(a)
    }
}
//f1得到一个函数
var f1 = F1()
function F2(fn){
    var a = 200
    fn()
}
F2(f1)     //和上面同理,关键是找对了函数定义时的父级作用域

下面是一个例子

//举一个错误的例子
var i,a
for (i = 0; i < 10; i++) {
    a = document.createElement('a')
    a.innerHTML = i + '<br>'
    a.addEventListener('click',function(e){
        e.preventDefault()
        alert(i)
    })
    document.body.appendChild(a)
}

//正确的例子
var i,a
for (i = 0; i < 10; i++) {
    (function(i){
        a = document.createElement('a')
        a.innerHTML = i + '<br>'
        a.addEventListener('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
firstload(20)   //false

你在isFirstLoad函数外,不能修改掉_list的值