ES6 var变量声明提升

ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

第一种场景,内层变量可能会覆盖外层变量。

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

上面代码的原意是,if代码块的外部使用外层的tmp变量,内部使用内层的tmp变量。但是,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。


看了 阮一峰老师的这段代码,理解错了,我以为是提升到最顶端,把new Date() 覆盖了,只提升了定义没有提升赋值。
理解成如下(错误)

var tmp ;  //提升到这

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

但是当我看到下面的代码,就看到跟我的理解相悖
栗子:

var name="zhangsan";
function GetName(){
  name = "lisi";
  var arr = [1,2,3];
  var name ="wangwu" + arr;
  console.log(name);
}
GetName(); // wangwu1,2,3
console.log(name);  // zhangsan

按照我上面错误的理解,console.log(name);应该也是undefined,,因为我觉得他被提升到了最上面
如下:

var name;  //提升到这
function GetName(){
  name = "lisi";
  var arr = [1,2,3];
  var name ="wangwu" + arr;
  console.log(name);
}
GetName(); // wangwu1,2,3
console.log(name);  // zhangsan

如我这样理解,就解释不通了。
那就是说并不是提升到全局最上面,只是提升到函数的最上面。如下


var tmp = new Date();

function f() {
  var tmp ; //提升到这,跟外部没有影响
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

就解释通了

另外一个栗子也是

var name="zhangsan";
function GetName(){
  var name ; //提升到这
  name = "lisi";
  var arr = [1,2,3];
  var name ="wangwu" + arr;
  console.log(name);
}
GetName(); // wangwu1,2,3
console.log(name);  // zhangsan

在举个栗子

var name = "zhangsan";
function getName(){name = "lisi";}
console.log(name);//zhangsan
getName();
console.log(name);//lisi

所以不建议使用var,建议使用let 和const

献给渣渣的自己

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容