【学习笔记】变量的作用域

【学习笔记】变量的作用域

 

• 在JavaScript中，var定义的变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用，会报错。如果非要使用，要使用闭包

<script>
    function zyy(){
        var x = 1;
    }
    x = x + 1;
</script>

 

• 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function zyy(){
    var x = 1;
}
function zyy1(){
    var x = 1;
}

 

• 内部函数可以访问外部函数的成员，反之则不行。

function zyy(){
    var x = 1;
    function zyy1(){
        var y = x+1;
    }
    zyy1();
    var z = y + 1;
}

这个y就是 var z = y + 1；的y

 

• 假设内部函数变量和外部函数变量重名

  function zyy(){
      var x = 1;
      function zyy1(){
          var x = 'A';
          console.log('inner' + x);
      }
  ​
      console.log('outer' + x);
      zyy1()
  }

  

  在JavaScript中函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

  从这个例子看就是，zyy1() 屏蔽了 zyy() 的 变量x

 

• 提升变量的作用域

  function zyy(){
      var x = x + y;
      console.log(x);
      var y = 1;
      
  }

  

  可以看到结果是 xundefined

  js执行引擎，自动提升了y的声明，但不会提升y的赋值。等价于下面的代码

  function zyy(){
      var y;
      var x = "x" + y;
      console.log(x);
      y = 1;
  ​
  }

  所以在js中写变量的习惯是，把所有的声明写在前面，养成规范，便于代码维护

  function zyy(){
      var x,
          y = x + 1,
          z,
          a;
      
      //之后随意用，如果要加变量，就加在前面
  }

 

• 全局函数

  全局变量在函数内部和外部都可使用

  var x = 1;
  function zyy(){
      console.log(x)
  }
  zyy();
  console.log(x);

 

 

• 全局对象window

  默认所有的全局变量都自动绑定在window对象下

  var x = 1;
  console.log(x);
  console.log(window.x);

  

  alert() 这个函数本身也是一个window变量

  var x = 1;
  window.alert(window.x);
  ​
  var old_alert = window.alert;
  ​
  old_alert(window.x);

  这时候可以弹出两个弹框，一个是alert，一个是old_alert

  我们还可以重新定义alert，

  window.alert = function () {
      
  }
  window.alert(132);

  132没有弹出来，alert失效了，因为我们手动定义了这个alert，把之前的给顶掉了

   

  这些说明了JavaScript实际上只有一个全局作用域，任何变量（包括函数）没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错：RefrenceError

   

  所以我们要养成规范：由于我们所有的全局变量都会绑定到window上，如果不同的js文件使用了相同的全局变量，就会产生冲突，要解决冲突，就要定义一个唯一的全局对象

  //唯一全局对象
  var Wzt = {}
  ​
  //全局变量
  Wzt.name = 'wzt';
  Wzt.add = function (a,b) {
      return a + b;
  }

  把自己的变量和函数全部放入自己定义的全局对象中，降低全局命名冲突

   

• 局部作用域 let

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

  

  出现了问题：i 出了这个作用域还可以使用，

  所以我们要使用let定义局部作用域的变量，解决作用域冲突问题

  function aaa() {
      for (let i = 0; i < 100; i++) {
          console.log(i)
      }
      console.log(i+1);
  }

  

  当把var换成let以后，出了作用域i就没有用了

 

• 常量

  在ES6之前，全部用大写字母定义的变量就是常量，并且建议不要修改这样的值

  var PI = '3.14';
  ​
  console.log(PI);
  PI = '111';
  console.log(PI);

  我们可以发现，所谓的常量是可以修改的，并且没有报错。

  在ES6之后，引入了const关键字，用来定义常量

  const PI = '3.14';
  ​
  console.log(PI);
  ​
  PI = "111";

  

  当我们在试图去修改这个常量时就会报错