2、函数作用域与块作用域

一、函数作用域

我们直接看案例吧

var i = 100;
for (var i = 0; i < 5; i++) {
  console.log(i);
}
console.log(i);

这段代码，会输出0、1、2、3、4、5
按照我们的预期应该会输出0、1、2、3、4、100
那为什么会不符合预期的输出呢？因为第一行的var i 污染了for循环中的i
如何解决变量污染的问题？
我们之前使用立即执行函数来解决（函数作用域）

(function() {
  var $ = window.$ = {};
  $.web = "coderPan";
  var url = "coderPan.com";
  $.getUrl = function() {
    return url;
  }
}.bind(window)())
console.log($.getUrl());

• 我们在函数中提供了一个接口**$**
• 我们想要访问到函数中url必须使用函数中提供的getUrl()接口才能访问到。我们是不能直接拿到函数作用域里面的url的。

二、块作用域

现在我们有了块作用域，代码就变得好看了很多。

{
  let $ = window.$ = {};
  $.web = "coderPan";
  let url = "coderPan.com";
  $.getUrl = function() {
    return url;
  }
}
console.log($.getUrl());

注意：我们在使用块作用域的时候必须使用let,因为var是没有块作用域的。

{
  let aaa = "coderPan";
}
console.log(aaa);

• 这样我们是拿不到aaa的值的。

{
  var aaa = "coderPan";
}
console.log(aaa);

• 但是这样是可以的，所以说var在块作用域中是没有用，和在外声明是一个意思。
• 以往我们是没有块作用域的，现在有了块作用域也有函数作用域。
• 但是块作用域的代码看起来非常的清晰，所以我们强烈建议使用块作用域，块作用越也解决了，我们变量中的耦合，冲突等问题。