javascript变量提升的详细介绍(代码示例)


本文摘自PHP中文网,作者不言,侵删。

本篇文章给大家带来的内容是关于javascript变量提升的详细介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

简介

“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,但这么说并不准确。
实际上变量和函数声明在代码里的位置是不会动的,而是在编译阶段被放入内存中。

声明变量的方法

var、let、const
不用以上关键字直接赋值的变量会挂载与windows环境下;

1

2

3

4

let a=9

const a=1

var a=6

c=5

声明函数的方法

javascript中声明函数的方法有两种:函数声明式和函数表达式。

1

2

3

4

5

6

7

8

9

//函数声明

function say(){

    console.log('hello')

}

 

//函数表达式

var say=function (){

    console.log('hello')

}

提升的好处

JavaScript 在执行任何代码段之前,将函数声明放入内存中的优点之一是,这允许你可以在在声明该函数之前使用一个函数。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

/*** 正确的方式:先声明函数,再调用函数 (最佳实践)*/

function catName(name) {

    console.log("我的猫名叫 " + name);

}

catName("Tigger");

/*以上代码的执行结果是: "我的猫名叫 Tigger"*/

 

 

/*** 不推荐的方式:先调用函数,再声明函数 */

catName("Chloe");

function catName(name) {

    console.log("我的猫名叫 " + name);

}

/*代码执行的结果是: "我的猫名叫 Chloe"*/

提升规则

var 声明的变量,提升时只声明,不赋值,默认为undefined;不用关键字直接赋值的变量不存在提升(demo1)

函数提升会连带函数体一起提升,不执行;(deom2)

预解析的顺序是从上到下;(demo4)

函数的优先级高于变量,函数声明提前到当前作用域最顶端;(deom3)

变量重名,提升时不会重复定义;在执行阶段后面赋值的会覆盖上面的赋值;(demo4)

函数重名,提升时后面的会覆盖前面;(demo5)

函数和变量重名,提升函数,不会重复定义,变量不会覆盖函数;在执行阶段后面赋值的会覆盖上面的赋值;(demo8)

用函数表达式声明函数,会按照声明变量规则进行提升;(deom6)

函数执行时,函数内部的变量声明和函数声明也按照以上规则进行提升;(deom7)

let、const不存在提升;(demo9、demo10)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

/**demo1**/

console.log('a=',a) //a=undefined

console.log('b=',b) // Uncaught ReferenceError: b is not defined

var a=1

b=6

 

 

/**deom2**/

console.log('a=',a)  // a=function  a() {console.log("func a()")}

function  a() {

console.log("func a()")

}

 

/**deom3**/

console.log('a=',a) // a=function  a() {console.log("fun a")}

var a=3

var a=4

 

function a(){

console.log("fun a")

}

var a=5

var a=6

console.log("a=",a) // a=6

 

 

 

/**deom4**/

console.log('a=',a)  // a=undefined

var a =2

console.log('a=',a) //

var a =3

var a =4

console.log('a=',a) // a=4

console.log('b=',b) //b= undefined

var b='b1'

 

 

/**deom5**/

console.log('a=',a) // a=function  a() {console.log("a2")}

function a(){

console.log("a1")

}

function a(){

console.log("a2")

}

console.log('a=',a) // a=function  a() {console.log("a2")}

 

 

/**deom6**/

console.log('a=',a) // a=undefined

var a=function(){console.log('a1')}

var a=3

var a=4

var a=5

console.log(a)

var a=function(){console.log('a2')}

console.log('a=',a) // a= ? (){console.log('a2')}

 

 

/**deom7**/

console.log('b=',b)

var a=3

function b(i){

    console.log('a=',a)

    var a=4

    function a(){

        console.log('fun a')

    }

    console.log('a=',a)

}

b()

 

 

/**demo8**/

console.log('a=',a) //a= function a(){ console.log('fun a')}

var a=2

function a(){

    console.log('fun a')

}

console.log('a=',a) // a=2

var a=3

var a=4

var a=5

console.log('a=',a) // a=5

 

 

/**demo9**/

console.log('a=',a) //Uncaught ReferenceError: a is not defined

let a=4

 

 

/****/

<!--demo10-->

console.log('b=',b) // Uncaught ReferenceError: b is not defined

const b=5

以上就是javascript变量提升的详细介绍(代码示例)的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

javascript save()方法有什么用

javascript专题之五:深浅拷贝

javascript怎么设置字体颜色

javascript dom对象怎么转字符串

c和javascript的区别是什么

javascript参数类型转换有哪些方法

5个有用的css函数(分享)

javascript如何实现“全选”和"全不选"功能?(代码示例)

javascript怎么设置不可编辑

es6中filter() 数组过滤方法的介绍(附代码)

更多相关阅读请进入《前端》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...