JavaScript全局作用域，函数作用域的详细解读

JavaScript全局作用域，函数作用域的详细解读

全局作用域：

作用域，是指变量的生命周期（一个变量在哪些范围内保持一定值）。

全局变量：
生命周期将存在于整个程序之内。
能被程序中任何函数或者方法访问。
在 JavaScript 内默认是可以被修改的。

全局变量，虽然好用，但是是非常可怕的，这是所有程序员公认的事实。

显式声明：

带有关键字 var 的声明；

<script type="text/javascript">

    var testValue = 123;

    var testFunc = function () { console.log('just test') };

    /**---------全局变量会挂载到 window 对象上------------**/

    console.log(window.testFunc)		// ƒ () { console.log('just test') }

    console.log(window.testValue)		// 123
    
</script>

其实，我们写的函数如果不经过封装，也会是全局变量，他的生命周期也就是全局作用域；

隐式声明：

不带有声明关键字的变量，JS 会默认帮你声明一个全局变量！！！

<script type="text/javascript">

    function foo(value) {

      result = value + 1;	 // 没有用 var 修饰

      return result;
    };

    foo(123);				// 124
    
    console.log(window.result);			// 124 <=  挂在了 window全局对象上 
    
</script>

现在，变量 result 被挂载到 window 对象上了！！！

函数作用域：

函数作用域内，对外是封闭的，从外层的作用域无法直接访问函数内部的作用域！！！

function bar() {
  var testValue = 'inner';
}

console.log(testValue);		// 报错：ReferenceError: testValue is not defined

通过 return 访问函数内部变量：

function bar(value) {
  var testValue = 'inner';
  
  return testValue + value;
}

console.log(bar('fun'));		// "innerfun"

函数就像一个工厂，我们输入一些东西，它在内部加工，然后给我们一个加工产物；

通过 闭包 访问函数内部变量：

function bar(value) {
  var testValue = 'inner';
  
  var rusult = testValue + value;
  
  function innser() {
     return rusult;
  };
  
  return innser();
}

console.log(bar('fun'));		// "innerfun"

关于闭包，我不会在这篇文章过多描述，因为，想要描述闭包，本身需要跟本文章一样的长度；

立即执行函数：

这是个很实用的函数，很多库都用它分离全局作用域，形成一个单独的函数作用域；

<script type="text/javascript">

    (function() {

      var testValue = 123;

      var testFunc = function () { console.log('just test'); };

    })();

    console.log(window.testValue);		// undefined
    
    console.log(window.testFunc);		// undefined
    
</script>

它能够自动执行 (function() { //… })() 里面包裹的内容，能够很好地消除全局变量的影响；