javascript预解析详解

Posted 2021-01-17 urlvue

1、定义

预解析:在当前作用域下，js运行之前，会把带有var和function关键字声明的变量先声明，并在内存中安排好。然后从上至下解析js语句。而且function的声明优先于var声明。

2、var声明

通过var声明的变量，进行预解析的时候：先声明变量，不管变量有没有赋值，声明时都赋值为undefined。

console.log(a); //undefined
var a = 1;
console.log(b); //undefined
var b = function(){}
1
2
3
4
5
注意:
(1)同名的var声明和同名的函数声明，不管二者书写先后顺序，函数声明会覆盖掉var声明的变量;
(2)同名的var声明，后者会被忽略;
(3)同名的函数声明，后者会覆盖前面的

console.log(a) //function a(){}
var a = 10;
console.log(a) //10
var a = 20;
console.log(a) //20
var a = function () {
// body...
}
console.log(a) //function(){}
function a(){}
console.log(a) //function(){}
/*若在此处加下面的声明*/
/*
function a(name){this.name = name}
*/
//则最上面的a输出:function a(name){this.name = name}

3、function声明

function进行预解析的时候，不仅是声明而且还定义了函数体，在内存中会开辟一块内存空间，存储的是函数体的字符串，不会执行。调用以后执行。

console.log(a) //function a(name){this.name = name}
function a(name){this.name = name}
1
2
注意:直接在函数后面加()，会报错。这样的函数声明时，先声明函数，然后声明(),这个()是匿名函数，声明会报错

function a(){}() //报错
1
注意问题

(1)预解析，不会超出script标签

<script>
console.log(a) // 报错
</script>
<script>function a(){}</script>
1
2
3
4
(2)后面script标签中可以访问呢前面script标签中的js,因为js是从上至下执行的

<script>
function a(){}
var a = 10
</script>
<script>
console.log(a) //10
</script>
1
2
3
4
5
6
7
(3)匿名函数可以带名字，但是不等同于定义了一个函数

console.log(a) //undefined
fn() //报错
var a = function fn (argument) {
// body...
}
1
2
3
4
5
(4)函数内部同名变量额声明高于传入的同名参数

var a = 10
function fn(a){
var a = 20
console.log(a)//20
}
fn(a)
1
2
3
4
5
6
var a = 10
function fn(a){
console.log(a)//undefined
}
fn() //因为调用时，没有穿参数
1
2
3
4
5
(5) 函数内参数的声明高于外部同名变量的声明

var a = 10
function fn (a){
console.log(a)//undefined
}
fn()
1
2
3
4
5
而

var a = 10
function fn (b){
console.log(a) // 10
}
fn()
//因为函数的形参是b,函数内的参数是a  不一样，所以还是  寻找全局变量a
或者

var a = 10
function fn (){
console.log(a) // 10
}
fn()
//因为函数没有传参数  寻找全局变量a