怎样理解作用域链

lxf 2021年03月09日编程语言 454 0

前言: 理解了作用域链, 就理解了为什么函数作用域可以引用全局作用域下声明的变量, 反正则不行.

第一步: 理解下面这段代码

function fn1() { 
    function fn2() { 
        console.log(name); 
    } 
    fn2(); 
} 
 
fn1(); // undefined

第二步: 理解下面这段代码

function fn1() { 
    function fn2() { 
        var name = "Lilei"; 
        console.log(name); 
    } 
    fn2(); 
} 
 
fn1(); // "Liei"

第三步: 理解下面这段代码

function fn1() { 
    var name = "Lilei"; 
    function fn2() { 
        console.log(name); 
    } 
    fn2(); 
} 
 
fn1(); // "Liei"

第四步: 理解下面这段代码

var name = "Lilei"; 
function fn1() { 
    function fn2() { 
        console.log(name); 
    } 
    fn2(); 
} 
 
fn1(); // "Liei"

第五步: 理解下面这段代码

var name = "Lilei"; 
function fn1() { 
    var name = "Hanmeimei"; 
    function fn2() { 
        var name = "Liqiang"; 
        console.log(name); 
    } 
    fn2(); 
} 
 
fn1(); // "Liqiang"

通过上面的代码我们构建了三个作用域:

1. 全局作用域: window

2. 函数作用域: fn1

3. 函数作用域: fn2

在使用变量时, js会先在本作用域下去查找, 如果没有, 会顺着作用域链逐层查找, 如果找到, 则结束, 如果找到全局作用域window都还是没找到, 那就返回undefined;

注意:

这种沿着作用域链查找的操作只能是从里到外, 不能从外到里, 这也是为什么函数作用域可以使用全局作用域内的变量, 反正则不行的原因.

IT源码网 HTML5 前端

微信公众号号：IT虾米（左侧二维码扫一扫）欢迎添加！

Q : 823053937

热贴推荐

怎样理解作用域链