JavaScript的变量作用域

JavaScript的变量作用域

1.全局作用域

1.1. var定义变量是有作用域的

1、在函数体中声明,则函数体外不可使用。(如果函数体中声明,实在想在外面用,可以研究下闭包

2、JS中,函数查找变量从自身函数开始(由内向外查找)

2.1. 如果内部和外部同时有这个函数名:则函数内部使用函数内部的变量;函数外部使用函数外部的变量。

2.2. 如果仅外部有这个函数名:则函数内部和外部都使用外部这个变量。

2.3. 如果仅内部有这个函数名:则仅函数内部可以使用内部这个变量。

注意:函数内部改函数外部变量的值,出了函数体,又恢复成原来的了。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>JavaScript学习</title>
   <script>
       'use strict';
       var x = "A";
       var y = "B";
       let abs = function () {
           var x = 3;
           console.log(x);
           console.log(y);
           return;
      }
       abs();                 //3   B
       console.log(x);        //A
       console.log(y);        //B
   </script>
</head>
<body>
</body>
</html>

1.2. 变量定义规范

变量定义规范:所有变量的定义都放在函数头部,不要乱放,便于代码维护。后面需要赋值时,在后面赋值就是。

1.3. 全局变量的冲突问题

window关键字:所有的var定义的全局变量,都隐式的与window.绑定。

var x = "DongDa";

x和window.x等价。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>JavaScript学习</title>
   <script>
       'use strict';
       var x = "A";
       console.log(x);        //A
       console.log(window.x); //A      
   </script>
</head>
<body>
</body>
</html>

换句话说:JS实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没在函数作用域范围找到,就会向外查找,如果在window下都没找到,那就会报错:ReferenceError。

但是,如果所有的全局变量都绑定到了window上,当不同的js文件,使用了相同的全局变量,就会导致冲突,为避免这种冲突,就要:把自己的全部代码放在自己定义的唯一的空间名字中,降低全局命名冲突的问题

1.4. 唯一的空间名字

定义全局变量时,捆绑到上面这个全局变量上。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>JavaScript学习</title>
   <script>
       'use strict';
       //唯一一个全局变量
       var WangApp = {};
       //定义全局变量时,捆绑到上面这个全局变量上
       WangApp.name = "WangZan";
       WangApp.add = function (a, b) {
           return a + b;
      }
   </script>
</head>
<body>
</body>
</html>

2. 局部作用域(用let关键字)

2.1. var定义变量和let定义变量的区别

1、var定义变量是全局的,let定义变量是局部的

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>JavaScript学习</title>
   <script>
       'use strict';
       //第一种:var定义变量
       for (var i=0;i<1;i++){
           console.log(i);  //可以输出
           var y = 10;
      }
       console.log(i);   //可以输出
       console.log(y);   //可以输出

       //第二种:let定义变量
       for (let m=0;m<1;m++){
           console.log(m);  //可以输出
           let n = 10;
      }
       console.log(m);     //无法输出
       console.log(n);     //无法输出
   </script>
</head>
<body>
</body>
</html>

2.2. var定义变量(不写在函数体内时,是定义的全局变量)和let定义变量(不写在函数体内时,是定义的局部变量)的区别

1、var定义变量是全局的,let定义变量是局部的

2、注意2.1例子和1全局作用域的区别:2.1的例子var没写在函数体内;1的例子,var写在函数体内。

3. 常量(const关键字)

在ECMAScript 6之前,定义常量的方法为:全部为大写字母命名的变量就是常量;不要修改这样的值。

ECMAScript 6后,引入了常量关键字:const。

const x = 1;
x = 2;  //报错,因为试图修改常量

 

 

 

 

 

posted @ 2020-02-20 13:11  WZ_BeiHang  阅读(233)  评论(0编辑  收藏  举报