JavaScript 中的作用域、预解析以及变量提升

2021-8-20    前端达人



JavaScript 中的作用域、预解析以及变量提升

作用域:变量的作用范围

局部作用域:函数内部



在局部作用域声明的变量称为局部变量,局部变量只能在当前函数内部使用



1)函数在执行的时候会在内存中开辟新空间



2)当执行完毕函数之后,会关闭作用域空间(变量被销毁)



注意:形参也是局部变量



function fn() {

    let b = 5

  // 局部访问 变量 b 

    console.log(b) // 5

}

fn()

// 全局访问 变量 b

console.log(b) // 访问不存在的变量,报错

1

2

3

4

5

6

7

8

在控制台打印得到如下结果







全局作用域:函数外部



1)在全局作用域声明的变量是全局变量,全局变量可以在任何地方使用



2)因为全局变量可以任何地方使用,所以要特别关注局部变量



let a = 2

function fn() {

    // 局部访问 变量 a

    console.log(a) // 2

}

fn()

// 全局访问 变量 a

console.log(a) // 2

1

2

3

4

5

6

7

8

在控制台打印得到如下结果







函数内部之所以能够访问到变量 a ,是因为有一个作用链,函数内部访问一个变量会先在自己的作用域内找,找不到会向上级作用域找,找不到就会报错



例如 如下代码



(找不到报错的情况)



function fn() {

    function fn1() {

        function fn2() {

            // 局部访问 变量 a

    console.log(a) // 2

        }

        fn2()

    }

    fn1()

}

fn()

1

2

3

4

5

6

7

8

9

10

11

控制台打印







(全局变量局部访问的情况)



let a = 'hello javascript'

function fn() {

    function fn1() {

        function fn2() {

            // 局部访问 变量 a

    console.log(a) // hello javascript

        }

        fn2()

    }

    fn1()

}

fn()

1

2

3

4

5

6

7

8

9

10

11

12

控制台打印







块级作用域:类似局部作用域



1)用 {} 包裹一块



2)let声明变量具有块级作用域,var声明变量不具有块级作用域



例如



(以字面量对象为例)



let obj = {

    uname: '法外狂徒-张三',

    age: 68

}

1

2

3

4

想要访问这个对象里面的属性必须通过 obj.属性,而不能直接访问



预解析

预解析:在代码执行之前把变量和函数会提前解析到当前作用域的最前面



任何作用域在执行之前都要预解析 (函数优于变量)



变量:带有声明的变量,只定义不赋值



1)变量在声明之前被访问,变量的值为 undefined



函数:带有名字的函数,只定义不调用



1)函数优于变量



console.log(a) // undefined

fn() // hello javascript



function fn() {

    console.log('hello javascript')

}

var a = 2

1

2

3

4

5

6

7

代码是自上而下执行,但是在代码执行前会先进行代码的预解析,把变量以及函数 声明 提升到当前作用域的最前面,如上代码,console.log(a) 会打印 undefined



但是,注意!!!注意!!!



变量必须是 var 声明的才可以,如果是 let 声明的变量会报错



图 (var 声明的 a)







图 (let 声明的 a)







变量提升

预解析会引起变量的提升



变量不声明就输出会报错



console.log(a) // 报错

1

控制台打印







用 var 声明



console.log(a) // undefined



var a = 'hello javascript'

1

2

3

控制台打印 undefined ,我们知道变量定义不赋值会输出 undefined,说明变量已经存在并且提升了,但是只提升了声明没有提升赋值,所以打印 undefined ,如果没有提升的话,就会像上面一样在执行 console.log(a) 的时候直接报错



结论:var 存在变量提升



用 let 声明



console.log(a) // 报错



let a = 'hello javascript'

1

2

3

结论:let 不存在变量提升



补充:

申明变量:let \ var \ const



1)let 声明的变量不在window内



2)var 声明的变量相当于给window添加了个属性,let不会



3)var 声明的变量不具有块级作用域,let具有块级作用域



4)var 可以重复声明,let只能声明一次



5)const 用来定义常量,不可以改值



6)const 定义的常量必须初始化有值,let可以不设置值



建议:常量名字因为是不可以改动的值,所以常量名建议用大写,一般用于定义固定不变的值




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档