[[Scopes]]是函数的内部属性,是无法访问的,但是我们可以通过Chrome的开发者工具看到它的样子。

d

我们现在声明个函数foo
需要查看foo的原型对象才能看到[[scopes]]属性,因为foo.prototype.constructorfoo指向同一个函数,所以点开constructor选项。
现在我们终于看到了[[Scopes]]属性。

可以清楚的看到它是一个数组,只有一个元素Global也就是全局对象,经过我目测这个Global应该和window对象是同一个对象。

// 定义一个全局的变量
var a = 'global property'

function foo () {
    console.log(a)
}

foo() // 此时会输出global property
复制代码

如上代码所示,此时我们再看foo[[Scopes]]属性

会发现Global对象里增加了一个a属性,这和window对象表现一致。事实上在函数foo里面执行console.log(a)的时候,变量a就是从这个Global对象内读取的。

function outer () {
    var a = 'property of outer scope'
    
    return function inner () {
        console.log(a)
    }
}

var inner = outer() 
inner() // 如大家所料,会输出property of outer scope
复制代码

此时我们再看一下inner[[Scopes]]属性

会发现[[Scopes]]数组的前面新添加了一个叫Closure的对象,从字面上看这不就是闭包的意思吗,我们展开看一下

果然有我们闭包里的属性a,其实inner函数里的console.log(a)中的a就是从设个Closure对象里面读取的。我们再来看一个例子

function outer () {
    var a = 1
    
    function inner () {
        var b = 2
        
        return function innermost () {
            console.log(a, b)
        }
    }
    
    return inner()
}

var innermost = outer()
innermost() // 此时输出的值是1 2
复制代码

看一下innermost[[Scopes]]属性,如下图

会发现在Scopes数组的开头又增加了一个闭包,是按照从内到外的顺序排列的,让我们点开看一下

js中,函数的闭包、作用域跟[[Scopes]]的关系-风君雪科技博客 果然,这里的两个闭包对象分别包含了innermost需要访问的所有变量。这就是作用域链的概念,当一个函数被调用的时候,函数内部访问的对象会先从函数自己的作用域内部进行查找,如果没找到对应的变量,就会从[[Scopes]]数组的第一项闭包对象进行查找,如果还没找到就继续到下一个闭包对象查找,以此类推。

作者:被雨水过滤的空气不想
链接:https://juejin.cn/post/6844903732669317128
来源:掘金