一、什么是变量提升？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. js unicode处理

    //岗位详细界面 var str="1.\u000D\u21B52.\u000D\u21B53"; var pad = function() { var tbl = []; ret ...

  2. 消息中间件-ActiveMQ入门实例

    1.下载ActiveMQ: http://activemq.apache.org/download-archives.html 2.运行ActiveMQ 解压缩apache-activemq-5.5. ...

  3. Android Intent 教程

    原文:Android: Intents Tutorial 作者:Darryl Bayliss 译者:kmyhy 人不会漫无目的地瞎逛,他们所做的大部分事情--比方看电视.购物.编写下一个杀手级 app ...

  4. struts2的零配置

    最近开始关注struts2的新特性,从这个版本开始,Struts开始使用convention-plugin代替codebehind-plugin来实现struts的零配置.配置文件精简了,的确是简便了 ...

  5. RAC：Oracle11gR2：启动gsd服务

    /************/ 正在测试是否必须执行 gsdctl enable gsdctl start /************/ srvclt enable nodeapps -v srvctl ...

  6. CMD命令进入文件夹

    cmd 进入E文件夹 E: 查看文件夹目录  dir 进入某个文件夹 cd 目录

  7. js判断用户关闭页面或浏览器

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  8. POJ 3093 Margaritas(Kind of wine) on the River Walk (背包方案统计)

    题目 Description One of the more popular activities in San Antonio is to enjoy margaritas in the park ...

  9. Android UI优化——include、merge 、ViewStub

    在布局优化中,Androi的官方提到了这三种布局<include />.<merge />.<ViewStub />,并介绍了这三种布局各有的优势,下面也是简单说一 ...

  10. 详解google Chrome浏览器（理论篇）

    注解:各位读者,经博客园工作人员反馈,hosts涉及违规问题,我暂时屏蔽了最新hosts,若已经获取最新hosts的朋友们,注意保密,不要外传.给大家带来麻烦,对此非常抱歉!!! 开篇概述 1.详解g ...