javascript 作用域,变量提升,函数提升

ES6 之前,js 只有两种作用域:

  • 全局作用域
  • 函数作用域

是没有 块级作用域的

全局作用域变量:

  • 不是在函数内部定义的
  • 未使用 var 声明的

函数作用域变量:
只要在函数中定义的变量,函数内部都可以访问到。即使是后定义的,表现为提升到函数顶部,所以函数任何位置都可以访问该变量

什么是 变量提升(hoisting):
因为变量申明是在任意代码执行前处理的(注意,只是声明),在代码区中任意地方申明变量和在最开始(最上面)的地方申明是一样的。也就是说,看起来一个变量可以在申明之前被使用!这种行为就是所谓的“hoisting”,也就是变量提升,看起来就像变量的申明被自动移动到了函数或全局代码的最顶上。

示例:



输出: undefined

解析:运行之前,先处理所有变量声明,全局变量会提升到文件开头,函数内声明变量会提升到函数开头。所以 var tmp = 'hello' 会将 var tmp 提升至函数开头,但是此刻并不会赋值。所以 console 输出的是 undefined

理解了上面,那么下面这个就好理解了:



所以,建议变量声明 全局或者函数最顶上,可读性好。

继续:



输出: 1 2 2.
变量被声明后,不会再次声明,相当于:


函数和变量同时声明:


输出: function foo(){}

如果改成下面形式:



输出: undefined


输出: ReferenceError, 因为调用的时候, foo 为 undefined

如果还有一个同名foo 函数放到第一个 foo 后面:
function foo () {
console.log('foo2')
}
输出: ‘foo2'

为什么?
函数提升分为两种情况:

  • 函数声明: function foo(){}
  • 函数表达式: var foo = function(){}

第二种就是声明一个 foo 变量,然后将一个匿名函数赋值给 foo, 和上面变量声明是一样的。所以输出 undefined

第一种会将函数声明整个提升到开头,相当于:


并且函数声明优先于变量声明,所以,输出: function foo(){}
同名的函数声明会使用最后一个

  1. 首先,解释器扫描Function Declarations,也就是function name{},解释器将对每个声明创建一个函数并作为Window的一个变量
  2. 解释器扫描var declarations,作为window的属性。但是此时变量并没有被赋值,所有的变量此时都是undefined。

要彻底理解JS的作用域和Hoisting,只要记住以下三点即可:
1、所有申明都会被提升到作用域的最顶上
2、同一个变量申明只进行一次,并且因此其他申明都会被忽略
3、函数声明的优先级优于变量申明,且函数声明会连带定义一起被提升

继续下面的示例:



输出: 'foo'
解析: 函数声明优先于变量声明,再次声明都被忽略。

下面输出什么?


输出结果:
先弹框:



然后输出 2
然后又弹框:



最后:

解析:
函数声明比表达式赋值优先级高,所以第一个alert 弹出 声明的函数
a() 输出 2
接下来解析到变量 a 被赋值 var a = function(){},虽然这个时候 a 已经被函数声明赋值,但是可以被后续的赋值覆盖掉,所以之后 a 的值是第一个函数
所以,接下来弹出 1
因为存在函数作用域,所以内部定义的变量,外部是访问不到的,所以报错 d 未定义
alert(c) 由于报错执行不到

解析:
a = null 将 function a() 置成 null 了,不再是函数了

let, const 都存在变量提升,但是有点不一样。后续会讲到。

关注我,每天更新技术干货!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容