JS——作用域 && 闭包

执行上下文

范围

一段<script>或者一个函数

全局（一段<script>）执行顺序

• 变量定义

• 函数声明

函数执行顺序

• 变量定义

• 函数声明

• 设定this

• 传入参数

consloe.log(a);    // undefined
var a = 100;

fn("Tim Chen");    // Tim Chen 20
function fn(name){
    age = 20;
    console.log(name,age);
    var age;
}

第一个例子里执行顺序

var a = undefined;
console.log(a);
a = 20 ;

a还没有赋值，便已经打印了。所以最终结果是undefined。

第二个例子里执行顺序

function fn(name){
    var age = undefined;
    age = 20;
    console.log(name,age);
};
fn("Tim Chen"); 

函数内部先声明变量，传入参数，然后对变量进行赋值，打印。

函数已经声明了，所以调用是可以执行的。

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

构造函数使用

function Foo(name){
    this.name = name;
}

var f = new Foo("Tim Chen");

对象属性使用

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

a.fn();

普通函数使用

此时打印出来的结果是window

function fn(){
    consoloe.log(this);
}
fn();  

call/apply/bind使用

call()
此时打印出来的this === {x: 100}

function fn(name){
    alert(name);
    consoloe.log(this);
}
fn.call({x:100},"Tim Chen");  

bind()

bind()只能是函数表达式用

var fn = function(name,age){
    alert(name);
    console.log(this);
}.bind({y:200});

fn("Tim Chen","22");

作用域

es5及以前，无块级作用域。

只有函数和全局作用域。

无块级作用域怎么理解？

所谓的块级作用域，就是说{}括号里自成一体，括号外访问不了括号内的变量、参数。

if(true){
    var str = "成功读取"；
}

console.log(str);    // 成功读取

上面的代码，从{}外面依然可以访问到里面的str变量。

函数和全局作用域

var a =100;

function fn(){
    var a = 200;
    console.log("fn",a);    //打印出来是函数内的变量a
}

console.log("global",a);    //打印出来是全局变量a
fn();

作用域链

如果函数调用了，当前作用域没有定义的变量（自由变量），它会去父级作用域找。父级也没有，就继续网上找。
这就叫作用域链。

注意，这个父级作用域指的是函数在定义时的父级，而不是执行时的父级。

var a = 100;

function fn (){
    var b = 200;

    console.log(a);  //
}
fn();

闭包

function F1(){
    var a = 100;

    //返回值是一个函数
    return function(){
        console.log(a);
    }
}

//fn1 得到一个函数
var fn1 = F1();
var a = 200;
fn1();

fn1执行的时候，其实就是执行console.log(a)。

上面的作用域链提到过，作用域调用自由变量的时候，会去它定义时的父级作用域寻找。在这个例子里，父级就是 F1函数。

所以最终执行的结果是100。

使用场景

• 函数作为返回值（上面的例子）

• 函数作为参数传递

请看代码

function F1(){
    var a = 100;

    return function(){
        console.log(a);
    }
}

var fn1 = F1();
function F2(fn){
    var a = 200;
    fn();
}

F2(fn1);

还是那句话，自由变量会去它定义时的父级作用域寻找。

而不是调用时的作用域！！！

所以最终执行的结果是100。

闭包在实际开发中的应用

封装变量，限制权限。

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

例题讲解

1. 变量提升的理解（执行上下文）

• 变量定义

• 函数声明

2. 创建10个标签，点击弹出相应序号

错误写法：

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);   //这里的i是自由变量
    })
    document.body.appendChild(a);
}

在上面的代码中，因为不知道什么时候才发生click事件，早就循环完毕，此时i已经是10了。

正确写法

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);   //这里的i是自由变量
        })
    document.body.appendChild(a);
    }(i);
}

在for循环里面，包裹着一个子调用函数，把i传进去作为参数。

每次循环，i的值都不一样。最后达到预期效果。

3. 如何理解作用域

• 自由变量

• 作用域链，即自由变量的查找

• 闭包的两个场景