手记

细说JavaScript词法作用域与动态作用域

我们一直都知道作用域这个词,非常熟悉JavaScript的局部作用域与全局作用域,但今天要说的是比较多人不知道的词法作用域与动态作用域。

在那之前我们先看两道题。

var scope = "global scope";
function checkScope() {
    var scope = "local scope";
    function fn() {
        return scope;
    }

    return fn();
}

checkScope();
var scope = "global scope";
function checkScope() {
    var scope = "local scope";
    function fn() {
        return scope;
    }

    return fn;
}

checkScope()();

先不说答案,我们来看下词法作用域与动态作用域。

词法作用域:函数在定义的时候决定了函数的作用域,JavaScript采用词法作用域。
动态作用域:函数在调用的时候决定函数的作用域,目前只有部分语言支持。

我们来看下下面例子。

var value = 10;
function foo() {
    console.log(value);
}

function bar() {
    var value = 20;
    foo();
}

bar();

采用词法作用域则打印10,若动态作用域则为20。

在词法作用域的情况下,函数foo在函数bar中调用,但其作用域在定义时已经确定,即只能访问到foo函数内部跟全局作用域。

若在动态作用域的情况下,函数foo在函数bar中调用,其作用域在调用的时候确定,即只能访问到函数bar内部跟全局作用域。


现在回到开头的两道题,两个都是打印"local scope"。

var scope = "global scope";
function checkScope() {
    var scope = "local scope";
    function fn() {
        return scope;
    }

    return fn();
}

checkScope();
var scope = "global scope";
function checkScope() {
    var scope = "local scope";
    function fn() {
        return scope;
    }

    return fn;
}

checkScope()();

我们刚才说了在JavaScript中函数作用域在定义的时候已经确定,而题1跟题2的区别就是函数fn的在不同位置执行,但这并不影响函数作用域,所以两个都是打印"local scope"

8人推荐
随时随地看视频
慕课网APP

热门评论

我竟然不知道词法作用域和动态作用域的概念!


查看全部评论