谈谈变量提升

280 阅读1分钟

自己学习变量提升的学习记录

什么是变量提升?

通常我们是声明变量var name,然后赋值,name=‘xiaoWang’,最后做各种操作,比如打印出name变量console.log(name)。我们也许会把声明变量和赋值合并为一步var nam='xiaoWang'。但是总归还是这样。

 var nam='xiaoWang'
 console.log(nam);

但是这样可以的,下面代码并没有报错,而是出现undefined

 console.log(nam);
 var nam='xiaoWang' //undefined

原因:var声明会被拿到函数或者全局作用域的顶部,位于所有代码之前,这个现象叫做“提升”(hoisting)。深层次的原因就是js在“预编译”阶段会先把声明提升至代码最顶部

同名变量怎么办?

  • 函数和变量,函数有高优先级
 console.log(a);
 function a(){
     console.log('执行了a函数');
 }
 var a='我是变量a'
 ​
 console.log(a);
 var a='我是变量a'
 function a(){
     console.log('执行了a函数');
 }
 //都输出f a() {console.log('执行了a函数');}
  • 练习题

    1. 先执行fn(1),后fn因为寻找其原型链发现全局作用域中有定义,所以fn=function fn2(b) { console.log(a, b);consnsole.log(++a+b) },此时a是1,执行console.log('a', a++),此时先输出后加,所以输出1,然后a自增1为2
    2. 再执行fn(2),此时a就是打印ab就是2 2,再执行++a,先加后用,a为3,再加b,就为5
 var a = 0;
 var b = 0;
 function fn(a) {
   fn = function fn2(b) {
     console.log(a, b)
     console.log(++a+b)
   }
   console.log('a', a++)
 }
 fn(1); // a, 1
 fn(2); // 2, 2   5

参考:

JavaScript面试题分析之变量提升和执行上下文

彻底解决 JS 变量提升

如有错误,欢迎指正!!