[[Scopes]]是函数的内部属性,是无法访问的,但是我们可以通过Chrome的开发者工具看到它的样子。
- 我们现在声明个函数
foo
- 需要查看
foo
的原型对象才能看到[[scopes]]
属性,因为foo.prototype.constructor
和foo
指向同一个函数,所以点开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
数组的开头又增加了一个闭包,是按照从内到外的顺序排列的,让我们点开看一下
闭包
对象分别包含了
innermost
需要访问的所有变量。这就是作用域链的概念,当一个函数被调用的时候,函数内部访问的对象会先从函数自己的作用域内部进行查找,如果没找到对应的变量,就会从
[[Scopes]]
数组的第一项
闭包
对象进行查找,如果还没找到就继续到下一个
闭包
对象查找,以此类推。