前言

作用域是JavaScript一個很重要的概念，想要學好JavaScript就需要理解javascript作用域和作用域鏈的工作原理。這篇文章對JavaScript作用域鏈和作用域鏈做一個簡單的介紹，希望能幫助大家更好的理解。

變量作用域

在js中，變量分為全局變量和局部變量。全局變量的作用域是全局的，在任意地方都是被定義的。而局部變量可以是函數的參數、函數內定義以及{}內(ES6語法)定義，如果局部變量與全局變量重名的話，會優先取局部變量。下面我們來看看例子：

引用全局變量例子：

var num = 1;  //定義一個全局變量

function func(){

    console.log(num);  
 
//這裏引用了全局變量

}

func();  //輸出：1

同名變量優先局部變量例子：

var num = 1;  //定義一個全局變量

function func(){

    var num = 2;  //聲明局部變量時一定要使用var，否則解釋器會將該變量當做全局對象window的屬性

    console.log(num);  //這裏引用了局部變量

}

func();  //輸出：1

函數作用域

變量在聲明它們的函數體以及這個函數體內的任意函數體都是定義的，請看例子：

function func(){

    var num = 1;

    console.log(num);  
 
//輸出：1

    function func1(){

        console.log(num);  //輸出：1

    }

    func1();

}

func();

作用域鏈

把函數自身的本地變量放在最前面，把自身的父級函數中的變量放在其次，把再高一級函數中的變量放在更後面，以此類推直至全局對象為止，當函數中需要查詢一個變量的值的時候，js解釋器會去從作用域鏈查找，從最前面的本地變量中先找，如果沒有找到對應的變量，則到下一級的鏈上找，一旦找到了變量，則不再繼續，如果找到最後也沒有找到需要的變量，則解釋器返回undefined。請看例子：

例子1：

var num = 1;

 
function func(){

    var num = 2;

    function func1(){

        var num = 3;

        console.log(num);  //輸出：3  先找函數自身的本地變量

    }

    func1();

}

func();

例子2：

var num = 1;

function func(){

    var num = 2;

    function func1(){

        console.log(num);  //輸出：2  先找函數自身的本地變量，再找父級函數中的變量

    }

    func1();

}

func();

例子3：

var num = 1;

function func(){

    function func1(){

        console.log(num);  //輸出：1  先找函數自身的本地變量，再找父級函數中的變量，然後再找到全局對象的變量

    }

    func1();

}

func();

例子4：

function func(){

    function func1(){

        console.log(num);  //輸出：undefined  先找函數自身的本地變量，再找父級函數中的變量，然後再找到全局對象的變量,還是沒找到就返回undefined

    }

    func1();

}

func();

結語

這一篇文章我們講解了變量作用域、函數作用域、作用域鏈，希望通過簡單的例子幫助大家更好的了解其工作原理。

如果您覺得閱讀本文對您有幫助，請點一下“推薦”按鈕，您的“推薦”將是我最大的寫作能力！

JavaScript作用域鏈的理解