JS作用域链和闭包

知识点

++执行上下文++

执行上下文可以理解为当前代码的执行环境，它会形成一个作用域。
- 范围：一段< script >或者一个函数
- 全局：变量定义，函数声明 （在一段< script >里）
- 函数：变量定义，函数声明，this,arguments

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

fn('dong');
function(){

}

这段代码中现将var a与函数fn()提出来放在执行代码之前

++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
fn1;

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

• 作为构造函数执行

function Foo(name){
    this.name = name;
}
var f = new ('dong');

• 作为对象属性执行

var obj = {
    name :'a',
    printName:function(){
        console.log(this.name);
    }
}
obj.printName(); //a

• 作为普通函数执行

function fn(){
    console.log(this);//this===window
}

• call apply bind

//call
function fn1(name，age){
    alert(name,age);
    console.log(this);
}
fn1.call({x:100},'dong',200);
//弹出dong 200
//打印{x:100}
//call将this指向第一个参数的值
//常用它来改变函数的this值

//apply与call类似

//bind
function fn1(name,age){
    alert(name);
    console.log(this);
}
fn.call({x:100},'dong',20);//this为{x:100}

var fn2 =function (name,age){
    alert(name);
    console.log(this);
}.bind({y:200});//必须用函数表达式的方式
fn2.call('dong',20); //this为{y:200}

++作用域++

//无块级作用域
if(true){
var name = 'dong';
}
console.log(name);

//函数和全局作用域
var a =100;
function fn(){
    var a =200;
    console.log('fn',a);
}
console.log('global',a);
fn();

++作用域链++

一个自由变量，一直不断地往父级作用域上找，形成的一个链式结构，就叫作用域链。

var a = 100;
function(){
    var b = 200;
    console.log(a);//当前作用域中没有定义a,a就是自由变量
    console.log(b);
}

var a = 100;
function F1(){
    var b =200;
    function F2(){
        var c = 300;
        console.log(a);
        console.log(b);
        console.log(c);
    }
}

++闭包++

• 函数作为返回值
• 函数作为参数来传递

function F1(){
    var a = 100;
    return function(){
        console.log(a);
    }
}
var f1 = F1();//表示变量f1是一个函数
var a = 200;
f1(); //100
//全局里的a与在F1作用域里的a是没有关系的，一个函数的父级作用域是它定义时候的作用域而不是它执行的作用域，所以a这个自由变量直接在它的父级作用域中直接找到。

function F1(){
    var a = 100;
    return function(){
        console.log(a);
    }
}
var f1 = F1();
function F2(fn){
    var a = 200;
    fn();
}
F2(f1);//100

相关题目

• 对变量提升的理解

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

作为构造函数执行；作为对象属性执行；作为普通对象执行；call apply bind (具体代码见上部分)
- 创建10个< a >标签，点击的时候出来对应的序号

//考察作用域
var i,a;
for(var i = 0;i<10;i++){
    a = document.creatElement('a');
    a.innerHTML = i +<br/>;
    a.addEventListener('click',function(e){
        e.preventDefault();
        alert(i); //自由变量需要从父级作用域获取值
    })
    document.body.appendChild(a);
}
//这时候监听事件里的函数的自由变量，已经变为10了，所以，不管点击哪个它的序号都是10

//正确方法
var i;
for (i = 0;i < 10;i++){
    (function(i){
        var a = document.creatElement('a');
        a.addEventListener('click',function(e){
            e.preventDefault();
            alert(i);  
        })
        document.body.appendChild(a);
    })(i);//自调用函数立即执行
}
//(function(i){})(i)
//自执行函数，就是不用调用，只要定义完成就能立即执行的函数

• 理解作用域

自由变量；作用域链，即自由变量的查找；闭包的两个场景。

• 实际开发中闭包的应用（作用域的实际应用）

//主要作用用于封装变量，收敛权限
funciton isFirstLoad(){
    var _list = [];
    return function(id){
        if(_list.indexOf(id) >= 0){
            return false;
        }else{
            _list.push(id);
            return true;
        }
    }
}

//使用
var firstLoad = idFirstLoad();
firstLoad(10); //true
firstLoad(10); //false
firstLoad(20); //true
//在isFirstLoad函数外面，根本不可能修改掉__ list的值

不断补充中……