var变量的提升

JS代码解析原则

  首先js引擎在读取js代码时会进行两个步骤,第一个步骤是解释,第二个步骤是执行。

所谓解释就是会先通篇扫描所有的js代码,然后把所有声明提升到顶端,第二步是执行,执行就是操作一类的。

案例1:

<script type="text/javascript">       
  console.log(a);   
  var a=10;
</script>

以上代码输出undefined

  原因:变量提升(把变量声明提升到当前执行环境的最顶端)

以上这段代码相当于:

  var a ;

  console.log(a);

  a=10;

案例2:

<script type="text/javascript">    
  foo();
  function foo() {
    console.log("aaa");
  }
</script>

结果输出:aaa

原理:函数声明提升(函数声明提升直接把整个函数提到执行环境的最顶端)

相当于:

function foo() {     
  console.log("aaa");
}
foo();

 变量提升只提升函数名,而函数提升会提升整个函数题。注意:函数提升在变量提升上面。

案例3:

 foo(); 
foo=function() {
  console.log("aaa");
}

 运行结果是:foo is not a function

原因:还是进行了变量提升

相当于:

var foo; 
console.log(foo);//undefined
foo();//foo is not a function
foo=function() {
  console.log("aaa");
}

 上面代码输出undefined是因为变量提升后并没有赋值因此输出undefined

输出foo is not function 原因是:js解析遇到foo()时会默认当做函数来解析

案例4:

console.log(foo); 
var foo=10;
function foo() {
  console.log(10);
}
console.log(foo);

输出结果:

f foo(){

  console.log(10);

}

10

10

>

原理:

相当于:

function foo() {     
  console.log(10);
}
var foo;
console.log(foo);
foo=10;
console.log(foo);
console.log(foo);

注意:函数提升在变量提升上面,第一个console.log(foo);为什么会输出函数题呢。原因在于var foo;并未有赋值只是声明,因此他会调用上面的值

例如:

var  b=10;

b=10;

console.log(b);//10 输出上一个值不会输出undefined

但是更改后:

var b =10;

b=20;

console.log(b);//20 输出20不是上一个值

总结:关于变量提升,一定要注意细心思考一下,还有就是,函数提升在变量提升之上。

提升的顺序是:函数-->变量提升

变量的提升就是先把所有的变量的定义先提取出来,然后再开始对变量去赋值。

原文地址:https://www.cnblogs.com/shmilynanmei/p/9151769.html