Javascript - 范围链

Question

我读了很多关于javascript范围链的文章，我认为我对它有一个很好的理解。然而，一个非常简单的练习让我意识到我根本不理解它。

我创建了以下代码。

function foo () {
  var b = 2;

  bar()

} 

function bar () {
  console.log(b);

}

foo();

此代码给出了引用错误。但是，我认为它仍会打印出来2.我的推理如下：

• foo和bar的函数声明。
• 执行Foo，这会创建一个新的执行上下文。 Foo的内部属性[[Scope]设置为全局。
• var b被悬挂。
• var b被指派为2.
• bar在foo执行上下文中执行。因此，我假设bar函数的内部属性[[Scope]]将设置为foo。
• b未在功能栏中定义，因此查找scopechain并找到值b = 2.
• 的console.log（2）;

我的理由是基于我理解函数X的[[Scope]]内部属性被设置为执行函数X时运行的执行上下文。不基于声明函数X的位置。

Answer 1

b在 foo的范围内定义。

从bar的范围调用

foo，是的，但它是在foo范围之外定义的。这意味着bar无法访问b。

因为图像通常可以提供帮助：

  

将每个红色方块视为“范围”。 foo和bar共享外部范围，但它们无法访问彼此的内部范围。

Answer 2

让我以不同的方式编写代码，以考虑范围。

var scope = {};
scope.foo = function() {
  var b = 2;   
  scope.bar()   
} 

scope.bar = function() {
// this will look for a property 'b' defined in the bar method, but it doesn's exist
  console.log(b); 
// changing the console.log call to match the changes made above, means it will 
// look like this
  console.log(scope.b)
// but now scope.b is also not defined
}

scope.foo();

换句话说，当您尝试访问“bar”中的“b”时，它将在创建“bar”的范围内搜索它，而不是在调用“bar”的范围内搜索它。