5 JavaScript变量提升

  • 5 JavaScript变量提升已关闭评论
  • 75 次浏览
  • A+
所属分类:Web前端
摘要

看以下代码, 或多或少会有些问题的.发现问题了么. 这么写代码, 在其他语言里. 绝对是不允许的. 但是在js里. 不但允许, 还能执行. 为什么呢? 因为在js执行的时候. 它会首先检测你的代码. 发现在代码中会有name使用. OK. 运行时就会变成这样的逻辑:


5 变量提升

看以下代码, 或多或少会有些问题的.

function fn(){     console.log(name);     var name = '大马猴'; } fn() 

发现问题了么. 这么写代码, 在其他语言里. 绝对是不允许的. 但是在js里. 不但允许, 还能执行. 为什么呢? 因为在js执行的时候. 它会首先检测你的代码. 发现在代码中会有name使用. OK. 运行时就会变成这样的逻辑:

function fn(){     var name;     console.log(name);     name = '大马猴'; } fn() 

看到了么. 实际运行的时候和我们写代码的顺序可能会不一样....这种把变量提前到代码块第一部分运行的逻辑被称为变量提升. 这在其他语言里是绝对没有的. 并且也不是什么好事情. 正常的逻辑不应该是这样的. 那么怎么办? 在新的ES6中. 就明确了, 这样使用变量是不完善的. es6提出. 用let来声明变量. 就不会出现该问题了.

function fn(){     console.log(name);  // 直接报错, let变量不可以变量提升.     let name = '大马猴';  } fn() 

结论一, 用let声明变量是新版本javascript提倡的一种声明变量的方案.
let还有哪些作用呢?

function fn(){     // console.log(name);  // 直接报错, let变量不可以变量提升.     // let name = '大马猴';     var name = "JAY";     var name = "WLH注意, 报错是发生在代码检查阶段. 所以. 上述代码根本就执行不了.   ==结论二, 在同一个作用域内. let声明的变量只能声明一次. 其他使用上和var没有差别==";     console.log(name); } fn() 

显然一个变量被声明了两次. 这样也是不合理的. var本意是声明变量. 同一个东西. 被声明两次. 所以ES6规定. let声明的变量. 在同一个作用域内. 只能声明一次.

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>变量提升</title> </head> <body>      <script src = "变量提升.js"></script>  </body> </html> 
代码效果图如下:
// // 变量提升 // function fn() { //     console.log(name); //     var name = '大马猴'; // } // fn(); // // function fn() { //     var name; //     console.log(name); //     name = '大马猴'; // } // fn();  // // let 声明变量可以避免变量提升问题 // function gn() { //     console.log(name);  // 直接报错, let变量不可以变量提升. //     let name = '大马猴'; // } // gn();   // function sn() { //     var name = 'jay'; //     var name = 'wlh'; //     console.log(name); // }   // 一个变量被声明了两次. 这样也是不合理的 // sn();   // wlh  // // 在同一个作用域内. let声明的变量只能声明一次. 其他使用上和var没有差别 // function xn() { //     let name = 'jay'; //     console.log(name); //     let name = 'wlh'; //     console.log(name); // } // xn();   // 报错是发生在代码检查阶段. 所以. 上述代码根本就执行不了