JS中的变量提升

1. 什么是变量提升?

当栈内存(作用域)形成, JS代码自上而下执行之前,浏览器首先会把所有带var/function关键字的进行提前声明或者定义,这种预先处理机制称之为变量提升。

console.log(a); // undefined
console.log(fn); // fn(){var b = 2}
console.log(b); // Uncaught ReferenceError: b is not defined
var a = 1;
function fn() {
    var b = 2;
};
变量提升阶段,var只声明,而function声明和赋值都会完成

最开始的时候输出afn,会发现aundefined,而fnfunction的字符串。 在变量提升阶段,带var的只声明(默认值为undefined),而带function的变量声明和赋值都会完成。到了代码执行阶段,var声明的变量会赋值,而function声明的变量因为在变量提升阶段已经赋值,所以直接跳过。

变量提升只发生在当前作用域

变量提升只发生在当前作用域,开始加载页面的时候只对全局作用域下的进行变量提升,此时函数作用域如果没执行的话存储的还只是字符串而已。
当函数执行时会生成函数作用域,也称私有作用域,在代码执行前会先形参赋值再进行变量提升。在ES5中作用域只有全局作用域和私有作用域,大括号不会形成作用域。全局作用域下声明的变量或者函数是全局变量,在似有作用域下声明的变量是私有变量。

私有变量和全局变量

只有在私有作用域中用varfunction声明的变量和形参两种才是私有变量,其他都是全局变量。剩下的都不是私有的变量,都需要基于作用域链的机制向上查找。

var a = 12,
  b = 13,
  c = 14;
function fn(a) {
  console.log(a, b, c); // 12 , undefined , 14
  var b = c = a = 20;
  console.log(a, b, c); // 20 ,20 ,20
}
fn(a);
console.log(a, b, c); //12,13,20

上例中全局变量有a,b,cfn,私有变量有a(形参也是私有变量)和b

  • 先看第一个输出为什么输出为12 , undefined , 14。当fn执行,第一步是形参赋值,私有变量a = 12,然后变量提升,私有变量b默认赋值undefinedc不是私有变量,所以向上级作用域查找,全局变量c的值是14
  • 然后第二个输出为什么是12,20,20,在私有作用域中,执行了var b = c = a = 20;,这个操作相当于var b = 20 ; c = 20; a = 20b变量从默认undefined赋值为20 和 a变量则重新赋值为20,而c变量因为不是私有变量,所以c = 20相当于window.c = 20,故输出12,20,20
  • 最后第三个输出为什么是12,13,20,因为fn内部有私有变量ab,函数内部修改的ab都是私有变量,不影响全局,而c不是私有变量,所以沿着上级作用域查找,修改的话c = 20相当于window.c = 20,所以输出12,13,20

2. 条件判断下的变量提升

在当前作用域下,不管条件是否成立都要进行变量提升,不过新版本浏览器对function在条件判断内的变量提升做了限制。带var的还是只有声明,带function的在老版本浏览器渲染机制下,声明和定义都会处理,但是为了迎合ES6的块级作用域,新版浏览器对于函数(在条件判断中的函数),在变量提升阶段,不管条件是否成立,都只是先声明,没有定义,类似于var,通过下面的例子可以进一步论证:

console.log(a); // undefined
console.log(b); // undefined
if (false) {
  var a = 1;
  function b() {
    console.log("1");
  }
}
console.log(a); // undefined
console.log(b); // undefined

通过上例可以发现varfunction都进行了变量提升,但是function没有在变量提升阶段定义。这里需要注意的是,如果条件成立的话,判断体内函数的处理会有点不一样,看下例:

console.log(fn); //undefined
if (true) {
  console.log(fn); // function fn() { console.log(1) }
  function fn() {
    console.log(1);
  }
}
console.log(fn); // function fn() { console.log(1) }

这里比较疑惑的是函数体内将然输出fn的函数体,之前不是说在条件判断内不管条件是否成立,都只是先声明,没有定义吗,所以不是应该输出undefined才对吗?

条件判断内不管条件是否成立,都只是先声明,没有定义。这个结论其实也有个前提,就是在代码执行前的变量提升阶段,在条件判断中的函数,按照正常思维,应该是只有条件判断成立了,它才会赋值,如果条件判断不成立,这个函数就用不到,就不应该赋值。所以如果条件判断成立,JS在进入到判断体中(在ES6中它是一个块级作用域),第一件事不是执行代码,而是类似变量提升,先把函数声明和定义了,也就是说判断体中代码执行之前,判断体内的函数就已经赋值了。

3. 变量提升中重名的处理

在变量提升中,如果名字重复了,不会重新的声明,但是会重新赋值,不管是代码提升阶段还是代码执行阶段都是如此。要注意的是带varfunction关键字声明相同的名字,这种也算是重名了(其实是一个fn,只是存储的类型不一样)。看一道题目来加深下理解:

fn(); // 2
function fn() { console.log(1) };
fn(); // 2
var fn = 100;
fn(); //Uncaught TypeError: fn is not a function
function fn() { console.log(2) };

上例中,代码执行前会先变量提升,三个变量都会提升,重名的话后面的变量覆盖前面的,同时function在变量提升阶段声明和定义都会完成,所以fn的值为function fn() { console.log(2) };。然后开始执行代码,执行fn()输出2,因为代码执行阶段function不会重复定义,所以第二个fn()也输出2,直到变量fn=100fn变量的类型被改变成number类型,所以后面再执行fn()的时候就直接报错。

4. ES6中的let不存在变量提升

ES6中基于let/const等方式创建的变量或者函数都不存在变量提升机制
console.log(a); // Uncaught ReferenceError: a is not defined
let a = 1; 
console.log(a); // 1

因为alet声明不存在变量提升,所以声明a之前输出a的话会报错。

如果用let声明的全局变量和window属性的映射机制会被切断
console.log(window.a); //undefined
let a = 1; 
console.log(window.a); //undefined

let声明的a是个全局变量,但是我们在赋值前和赋值后输出window.a都是undefined

在相同的作用域中,let不能声明相同名字的变量
let a = 10;
console.log(a); 
let a = 20; // Uncaught SyntaxError: Identifier 'a' has already been declared
console.log(a);

let声明变量虽然没有变量提升,但是在当前作用域代码自上而下执行之前,浏览器会做一个重复性检测,自上而下查找当前作用域下所有变量,一旦发现有重复的,直接抛出异常,代码也不再执行,换句话说,就是虽然没有把变量提前声明定义,但是浏览器已经记住了,当前作用域有哪些变量。上例第二行console.log(a)没有输出而直接在let a = 20这一行报错,说明代码还没有执行,在重复检查机制中就直接抛出异常了。

var a = 10;
let a = 20; //Uncaught SyntaxError: Identifier 'a' has already been declared

b = 10; //Uncaught ReferenceError: Cannot access 'b' before initialization
let b = 20; 

还有一点要注意的是不管用什么方式在当前作用域下声明了变量,再次使用let创建都会报错。

5. 暂时性死区

只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

var a = 10;
if (true) {
  console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
  let a = 20;
}

上例中有全局变量a,但是块级作用域内let又声明了一个局部变量a,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。

ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。总之,在代码块内使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称TDZ)。

上面代码中,在let命令声明变量tmp之前,都属于变量tmp的死区,暂时性死区也意味着typeof不再是一个百分之百安全的操作。

typeof b; // undefined
typeof a; // Uncaught ReferenceError: Cannot access 'a' before initialization
let a;

上面代码中,变量a使用let命令声明,所以在声明之前,都属于a的死区,只要用到该变量就会报错。因此typeof运行时就会报错。不过b是一个不存在的变量名,结果返回undefined。所以在没有let之前,typeof运算符是百分之百安全的,永远不会报错。现在这一点不成立了。这样的设计是为了让大家养成良好的编程习惯,变量一定要在声明之后使用,否则就报错。

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

推荐阅读更多精彩内容

  • 像变量提升和函数提升这种偏学院派的问题在面试中出现的概率很高,在实际开发中也会影响到编程的效率。 前段时间在网上做...
    时和岁稔阅读 1,050评论 1 7
  • /** *js中变量声明未赋值结果是undefined *js中没有声明变量结果报错 *js中的就近原则 *var...
    郑军基阅读 147评论 0 0
  • 概念 从概念的字面意义上说,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,但这么说并不准确。实...
    Mokingc阅读 170评论 0 0
  • 当浏览器加载 HTML 页面时,首先会提供一个全局的执行环境,称为全局作用域,浏览器中是 window(既是一个窗...
    McDu阅读 272评论 0 0
  • 在web中全局变量和全局方法都是window对象的一个属性。 变量提升 js中对var定义的变量有提升的效果,比如...
    骑毛驴的小强阅读 366评论 0 0