Rumah > hujung hadapan web > tutorial js > js变量提升详解

js变量提升详解

小云云
Lepaskan: 2018-02-26 14:08:27
asal
1703 orang telah melayarinya


1.JavaScript代码执行分为两个阶段:

  • 预解析阶段:在预解析阶段,js会对以var声明的变量,和function开头的语句块进行提升,将var声明的变量和function 提升至代码的最前面。需要注意的时,function整体提升,var 声明的变量只提升变量声明,并不会在提升的同时进行赋值操作

  • 执行阶段

2.举个例子:

alert(a)//undefinedvar a = 1;  

为什么会输出undefined呢?
模拟提升的之后的代码 ,上一段代码相当于 var a;  //声明一个变量。但是没有初始化Alert(a);
 a = 1;  //初始化为1----------
fun();    //在C语言中,如果不先声明函数,先调用后声明函数会报错,但是js会正常运行function fun(){
    alert(“函数被声明了”);
}

代码提升后 相当于 
function fun(){
    alert(“函数被声明了”);
}

fun();
Salin selepas log masuk

3.多个函数同名提升规则: 都提升,但是后面的函数会覆盖掉前面函数

func1();  //输出  我是后声明的函数function func1(){
   console.log('我是先声明的函数');
}function func1(){
   console.log('我是后声明的函数');
}
模拟提升后的代码function func1(){
   console.log('我是先声明的函数');
}function func1(){
   console.log('我是后声明的函数');
}
func1();
 函数名也是变量,后面的会覆盖前面。
Salin selepas log masuk

4.变量名和函数名相同提升规则:如果有变量和函数同名,会忽略掉变量,只提升函数

alert(foo); //输出function foo(){}function foo(){
}
var foo = 2;
alert(foo); //输出 2----------模拟提升后的代码function foo{}Alert(foo);
foo = 2;
alert(foo);
Salin selepas log masuk

5.变量提升分作用域

var num = 123; function test(){
     console.log(num);     var num = 10;
 }
 test(); //输出undefined; ----------


模拟变量提升后的代码  var num;function test(){var num
   console.log(num); //函数内部声明了num,但是没赋值。因为在函数内部声明了num,所以函数会使用它内部声明的num,而不会去全局中找  
   num = 10;
  }
num = 123;
Salin selepas log masuk

6.函数表达式不会提升

func();  // func is not a function
 var func = function(){
    alert("1234");
 }


----------


提升后的代码var func;
func();
func = function(){
    alert("1234");
};
 用var声明的变量(包括函数表达式),只提升声明,不提升赋值操作
Salin selepas log masuk

7.最后再来个练习

var s1 = “qq”;

foo();

function foo() {
    console.log(s1); 
    var s1 = "tengxunqq";
    console.log(s1);
Salin selepas log masuk

}

提升后:    var s1;    function foo() {
        var s1;
        console.log(s1); //
        s1= "tengxunqq";
        console.log(s1); //t
    }
     s1 = "qq";
    foo();  //先输出 undefined  后engxunqq
Salin selepas log masuk

相关推荐:

JS变量及其作用域知识点介绍

如何对Js变量作用域进行申明?及函数内的作用域实例详解

js变量提升和函数声明预解析实例详解

Atas ialah kandungan terperinci js变量提升详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan