一、什么是变量提升？var变量提升的底层原理是什么？

　　变量提升的定义：所有变量的声明语句都会被提升到代码头部，这就是变量提升。

　　原理：引擎在读取js代码的过程中，分为两步，专业来说代码运行是分为预处理和执行两个阶段。

　　　　　①先解析代码，获取所有被声明的变量；

　　　　   ②然后再执行。

　　记住这下面这两句话，你就可以再任何情况下从容面对任何变量提升的问题。

　　1.变量提升只会提升变量名的声明，而不会提升变量的赋值初始化。

　　2.函数提升的优先级大于变量提升的优先级，即函数提升在变量提升之上。

　　例如：　　

　　console.log(a);

　　var a =1;

　　以上语句并不会报错，只是提示undefined。实际在js引擎中的运行过程是：

　　var a;

　　console.log(a);

　　a =1;

　　实际运行表示变量a已声明，但还未赋值。

　　但是变量提升只对var命令声明的变量有效，如果一个变量不是用var命令声明的，就不会发生变量提升。

console.log(aa);

aa =1;

或者

console.log(aa);

let aa =1;

　　以上代码将会报错:ReferenceError: aa is not defined。

　　注意：这里有两句话：1、并不会报错，只是提示undefined。2、报错:ReferenceError: aa is not defined。

　　那么Javascript中undefined和not defined有什么区别？看本系列第二个知识点解答

　　下面是关于函数提升的内容：

　　补充：js里的function也可看做变量，也存在变量提升情况

a();

function a(){

    console.log(1);

};

　   没毛病，输出1。表面上，上面代码好像在声明之前就调用了函数a。但是实际在js引擎中，由于“变量提升”，函数a定义部分被提升到了代码头部，也就是在调用之前已经声明了。

　　但是！！如果采用赋值语句定义函数，JavaScript就会报错：

　　

a();

var a = function(){

    console.log(1);

};

// TypeError: a is not a function

　　因为js引擎把变量声明提升，此时，a就是一个变量，而并不是一个function，以下是js引擎实际运行代码：

var a;

a();

a = function(){

    console.log(1);

};

　　但是，如果把上面代码调换下位置，输出结果就不一样了

var a = function(){

    console.log(1);

};

a();

//

以上变量提升的问题已基本描述清楚。请看下面一道面试题：

 <!DOCTYPE html>

 <html>

     <head>

         <title>变量提升</title>

         <meta name="keywords" content="keyword1,keyword2,keyword3">

         <meta name="description" content="this is my page">

         <meta name="content-type" content="text/html; charset=UTF-8">

     </head>

     <body>

     <script type="text/javascript">

         console.log(foo);

         foo();

         var foo=10;

         foo();

         console.log(foo);

         function foo(){

             var a;

             console.log(a);

             a=12;

             console.log(a);

         }

         console.log(foo)

     </script>

     </body>

 </html>

猜猜输出会是啥？

js基础面试高频面点1：变量提升的更多相关文章

  1. js基础梳理-究竟什么是变量对象，什么是活动对象？

    首先,回顾下上篇博文中js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?的执行上下文的生命周期: 3.执行上下文的生命周期 3.1 创建阶段 生成变量对象(Variable o ...

  2. Js基础知识（一） - 变量

    js基础 - 变量 *大家对js一定不会陌生,入门很简单(普通入门),很多人通过网络资源.书籍.课堂等很多途径学习js,但是有些js基础的只是往往被大家遗漏,本章就从js变量类型来说一说js 变量类型 ...

  3. js 面试的坑：变量提升

    全局中的解析和执行过程 预处理:创建一个词法环境(LexicalEnvironment,在后面简写为LE),扫描JS中的用声明的方式声明的函数,用var定义的变量并将它们加到预处理阶段的词法环境中去. ...

  4. JS基础-数据类型-运算符和表达式-变量和常量

    1.js的基础语法2.js调试 1.F12调出控制台,查看提示错误及其位置. 2.出错时只影响当前代码块,不会影响其他代码块,后续代码块继续执行.3.语法规范 1.js语句:可执行的最小单元 必须以 ...

  5. JS基础面试

    1. JS是高级语言弱类型语言 脚本语言 1.1高级语言我们写完的代码不能直接执行,要先经过js引擎翻译成0101这种机器语言才能执行 1.2 弱类型语言变量可以在前一行设置为一个数字,下一行修改为一 ...

  6. js基础知识之_入门变量和运算符

    js页面效果学习 (轮播图,文字滚动效果等等) javascript能来做什么 1.数据验证 2.将动态的内容写入网页中(ajax) 3.可以对时间做出响应 4.可以读写html中的内容 5.可以检测 ...

  7. js基础面试篇

    1,js中的new做了什么? function Person () { this.name = name; this.age = age; this.sex = sex this.sayName = ...

  8. JS基础_字面量和变量

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JS基础二--字面量和变量

       /*       字面量,都是一些不可改变的值,       比如:1 2 3 4 5       字面量都是可以直接使用,但是我们一般不会直接使用字面量.       变量,变量可以用来保存字 ...

随机推荐

  1. 【Java面试题】28 简述synchronized和java.util.concurrent.locks.Lock的异同 ？

    主要相同点:Lock能完成synchronized所实现的所有功能 主要不同点:Lock有比synchronized更精确的线程语义和更好的性能.synchronized会自动释放锁,而Lock一定要 ...

  2. 电视不支持AirPlay镜像怎么办？苹果iPhone手机投屏三种方法

    导读:苹果手机多屏互动功能在哪里?iPhone苹果手机没有AirPlay镜像怎么办?三种方法教你苹果iPhone手机怎么投影到智能电视上. 前言: 苹果iPhone手机投屏到电视设备上,需要使用到Ai ...

  3. Mysql利用match...against进行全文检索

    在电商项目中,最核心的功能之一就是搜索功能,搜索做的好,整个电商平台就是个优秀的平台.一般搜索功能都使用搜索引擎如Lucene.solr.elasticsearch等,虽然这功能比较强大,但是对于一些 ...

  4. Invalidate()函数

    Invalidate( ) :使整个窗口客户区无效, 并进行更新显示的函数 介绍 void Invalidate( BOOL bErase = TRUE ); 参数: bErase 决定了是否要在WM ...

  5. linux环境,crontab报错Authentication token is no longer valid; new one required You (aimonitor) are not allowed to access to (crontab) because of pam configuration.

    问题描述: 今天同事反应,一个系统上的某些数据没有生成,看了下,怀疑定时任务没有执行,就看下了crontab,发现报了下面的错误: [aimonitor@4A-LF-w08 ~]$ crontab - ...

  6. java 正则表达式验证

    package com.fsti.icop.util.regexp; import java.util.regex.Matcher; import java.util.regex.Pattern; p ...

  7. fildder教程

    转载地址:写得很不错的fildder教程   http://kb.cnblogs.com/page/130367/ Fiddler的基本介绍 Fiddler的官方网站:  www.fiddler2.c ...

  8. Python 字符串处理（转）

    转自:黄聪:Python 字符串操作(替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分割等) http://www.cnblogs.com/huangcong/archive/2011/ ...

  9. SQL基础--视图

     视图其实就是一条查询SQL语句,用于显示一个或多个表或其它视图中相关数据. 创建视图: CREATE [OR REPLACE] ［FORCE |NOFORCE ］VIEW view_name [al ...

  10. iOS实现传递不定长的多个参数

    我们在使用苹果官方的文档的时候会发现可传不定数的参数例如: // [[UIAlertView alloc]initWithTitle:<#(nullable NSString *)#> m ...