JavaScript：理解函数执行时的作用域

爱总结，爱搬砖，爱生活

引言

理解函数执行时所在的作用域是定义时的作用域，而不是调用时所在的作用域。

心得

函数执行时所在的作用域是定义时的作用域，而不是调用时所在的作用域，注意要与this的指向区分开来。

案例

先上几种函数定义执行时的案例；

var a = 10

// 案例一
function foo1() {
  var a = 30
  return function() {
    console.log(a)
  }
}

var b = foo1()
b()

// 案例二
function foo2() {
  console.log(a)
}

function foo3() {
  var a = 40
  foo2()
}
foo3()

上述两个案例的输出是什么？接下来一步步分析。

分析案例

• 案例一是闭包的用法，最后的输出毫无疑问是30，其实这就是函数执行作用域的一个应用，正因为函数的执行作用域是函数定义时的作用域才有了闭包的写法；
• 案例二很常见的用法，在一个函数中调用另外一个函数，那么被调用的函数foo2的输出是什么？是foo3中的a值吗？不妨运行这段代码，得到的答案是10,输出的是我们在全局作用域中定义的a值，也就是foo2定义时所在的作用域，这进一步验证了文章开头的那句话：函数执行时所在的作用域是定义时的作用域，而不是调用时所在的作用域；
• 看到这里心中有几个疑惑，下面来提出疑问。

提出疑问

let a = 10
let obj = {
  a: 20,
  foo: function() {
    console.log(this.a)
  }
}

obj.foo()

• 上面这个案例，再熟悉不过的案例，输出是20, 这是一个关于this指向的案例，它能输出20，是不是与函数执行作用域有关？当然无关这只是一个单纯的this指向的问题，但是我把这个案例做个变化，如下:

let a = 10
let obj = {
  a: 20,
  foo: function() {
    console.log(a)
  }
}

obj.foo()

• 只是将代码做了一处改动，输出结果就完全不一样，改动后的代码输出结果是10，为什么会这样？
• 我将foo函数的输出this.a改为了a，不是说函数执行时所在的作用域是定义时的作用域，而不是调用时所在的作用域吗？去掉了this，函数foo是在块级作用域中定义的，应该也是输出块级作用域中的20才对，然而并不是，这是为什么？
• 输出块级作用域中的20这种想法没有错，但是为了兼容以前的代码，浏览器有自己的行为方式：

• 允许在块级作用域内声明函数。
• 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
• 同时，函数声明还会提升到所在的块级作用域的头部。

参考资料

爱总结，爱搬砖，爱生活