前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js变量提升以及var对变量提升的影响

js变量提升以及var对变量提升的影响

作者头像
神葳
发布2021-01-22 10:40:03
3K0
发布2021-01-22 10:40:03
举报
文章被收录于专栏:神葳总局神葳总局

JavaScript声明过的变量提升往往会影响到我们对变量的正常获取,所以特写此文,以便以后翻阅。

# 什么是变量提升

代码语言:javascript
复制
//变量声明提升
function test() {
    var a = "1";
    var f = function(){};
    var b = "2";
    var c = "3";
}

//上述代码等价于
function test() {
    var a,f,b,c;
    a = "1";
    f = function(){};
    b = "2";
    c = "3";
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

复制

js中定义变量有两种情况:(注意在方法外不加var是不能定义变量的,出现xx is not defined)

  1. 都加var,在方法内则是局部变量,在方法外则是全局变量。
  2. 在方法内,加var为局部变量,不加var则是全局变量(在执行当前方法之后)

# 变量提升案例

# 案例1

由于test1函数里面定义了变量a,由于

代码语言:javascript
复制
var a = 'I\'m a in all'

function test1 () {
    console.log(a)
    console.log(window.a)

    var a = 'I\'m a in test1'
    console.log(a)
}
    
test1()

1 2 3 4 5 6 7 8 9 10 11

复制

上述代码相当于

代码语言:javascript
复制
var a = 'I\'m a in all'

function test1 () {
    var a
    console.log(a) // undefined
    console.log(window.a) // I'm a in all(因为window指的是全局环境)

    a = 'I\'m a in test1'
    console.log(a) // I'm a in test1
}
    
test1()

1 2 3 4 5 6 7 8 9 10 11 12

复制

# 案例2

代码语言:javascript
复制
var a = 'I\'m a in all'

function test2 () {
    console.log(a) // I'm a in all

    a = 'I\'m a in test2' // 这里本来就是赋值,所以上边的a会输出全局变量
    console.log(a) // I'm a in test2
}

test2()

1 2 3 4 5 6 7 8 9 10

复制

# 案例3

代码语言:javascript
复制
function test3_1 () {
    console.log(a) // 报错(Uncaught ReferenceError: a is not defined),阻断以下代码的运行

    a = 'I\'m a in test3'
    console.log(a) // 不输出
}
console.log(a)
test3_1()

console.log(a) // 不输出

1 2 3 4 5 6 7 8 9 10

复制

代码语言:javascript
复制
function test3_2 () {
    a = 'I\'m a in test3' // 全局变量(但是在方法执行后生效)
    console.log(a) // I'm a in test3
}

// console.log(a) // 如果在方法执行前打印,还是会报错(Uncaught ReferenceError: a is not defined),阻断以下代码的运行

test3_2()

console.log(a) // I'm a in test3(本来没有全局变量a,当test3运行时,定义了一个全局变量a,所以这里会输出)

1 2 3 4 5 6 7 8 9 10

复制

作者个人博客:午后南杂

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-7-21 2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • # 什么是变量提升
  • # 变量提升案例
    • # 案例1
      • # 案例2
        • # 案例3
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档