執行上下文可以理解為當前代碼的執行環境，它會形成一個作用域。

- 范圍：一段< 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==windowfn1;

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

//callfunction fn1(name，age){
    alert(name,age);
    console.log(this);
}
fn1.call({x:100},'dong',200);//彈出dong 200//打印{x:100}//call將this指向第一個參數的值//常用它來改變函數的this值//apply與call類似//bindfunction 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); //truefirstLoad(10); //falsefirstLoad(20); //true//在isFirstLoad函數外面，根本不可能修改掉__ list的值

相關推薦：

javascript作用于作用域鏈實例分享

javascript中關于作用于作用域鏈的詳解

Javascript-作用域和作用域鏈及閉包的詳解（圖文）

以上就是JS作用域鏈和閉包實例分享的詳細內容，更多請關注php中文網其它相關文章！