作用域和预解析（笔记和案例）

---

一、创建函数的三种方式

1、函数声明——具名函数

function show（参数列表）{

//函数体

}

2、函数表达式-匿名函数

var show=function（参数列表）{

//函数体

} 3、使用new的方式 var fn=new function('alert("11111")');

二、作用域

1、概念

• 代码名字（变量）在某个范围内起作用和效果

• 目的是为了提高程序的可靠性更重要的是减少命名冲突 2、分类

• 全局作用域整个script标签内部或一个独立的js文件

• 局部作用域（函数作用域）在函数内部就是局部作用域，这个代码名字只在函数内部起效果和作用 3、作用域个数计算

• 在es6之前，唯一能够划分作用域的是函数

• 作用域的个数计算：n+1

• 其中：（1）表示全局作用域 n：表示局部作用域，n取决于函数声明的个数

4、作用域案例

全局作用域：1个

局部作用域：2个

作用域的个数：n+1(全局作用域)

n取决于函数声明的个数

var num=0; function show(){

var num=10;

console.log(num);

function show1(){

    var num=20;

    console.log(num)
}
show1

} show();

console.log(num)

5、变量的作用域

• 根据作用域的不同将变量分为全局变量和局部变量

• 全局变量：在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）

• 局部变量：在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量） 6、全局变量

• 在全局作用域下声明的变量，在函数外部声明的变量

var num=0；

• 在函数内部不用var声明的变量-不建议使用 function show(){

num=10;

} show();

console.log(num)

• 使用window声明的变量，不论在哪个作用域，都是全局变量

window.a=10；

案例： function show（）{

var b=20；
window.c=30;

} show(); var a=20;

console.log(a)

console.log(c)

console.log(b)

7、局部变量 function show（a，b）{

var num=10；
consolo.log(a)

} show();

console.log(num)

console.log(a)

案例：

var a=0；

var b=1；

function show(c,d){

a=20;
var b=11;
window.e=33;
console.log(a)
console.log(b)
console.log(c)

} 如果show（）在这里呢？结果和输出顺序会发生变化嘛？

console.log(e)

console.log(a)

console.log(b)

console.log(c)

show();

思路：先确定是全局变量还是局部变量，然后考虑执行的顺序

9、全局变量和局部变量的区别

• 全局变量：在如何一个地方都可以使用，只有在浏览器关闭才会被销毁，因此比较占内存

• 局部变量：只有函数内部使用，当其所在的代码块被执行时，会被初始化，当代码块运行结束后，就会被销毁，因此更节省内存空间

10、作用域链

• 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链，简单来说就是采取就近原则的方式来查找变量最终的值

11、作用域链案例

• 案例一 function f1(){

var num=123;

function f2(){

  var num=0;

  console.log(num);

}

f2();

}

var num=456;

f1();

案例二

var a=1;

function fn1(){

var a=2;

var b='22';

fn2();

function fn2(){

var a=3;

fn3();

function fn3(){

    var a=4;

    console.log(a);

    console.log(b)
}

}

}

fn1()

12、块级作用链

• 词法作用域：只要代码书写完成，作用域就确定了

• 块级作用域：一个花括号{}，就是一个块级作用域if{}、for{}、

• 在es6之前，JavaScript是词法作用域，没有块级作用域，即{}不会划分作用域，唯一划分作用域的函数

for(var i=0;i<3;i++){

console.log(i)

}

console.log(i)

if(true){

 let a=10;

}

console.log(a)

13、变量和函数在内存中的储存方式

var a=1;

var arr=['李四']；

var fun=function(){

 console.log('fun')

}

• fun是变量名，不是函数名，但是函数名其实也是一个变量，只是它保存的是函数在堆中的地址

• 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是数值而函数表达式里面存的是函数的地址

• 函数表达式也可以传递参数

二、预解析

1、概念

• js引擎运行js分为两步：预解析+代码执行 预解析是指js引擎会把js里面所有的var声明的变量还有function声明的函数，提升到当前作用域的最前面

2、分类

• 预解析分为变量预解析（变量提升）和函数预解析（函数提升）

• 变量提升就是把所有var声明的变量提升到当前的作用域最前面，不提升赋值操作

• 函数提升，就是把所有function声明的函数提升当前作用域的最前面，不调研函数