一、什么是变量提升?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面试题】44 java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?

    字节流,字符流.字节流继承于InputStream OutputStream,字符流继承于InputStreamReader OutputStreamWriter.在java.io包中还有许多其他的流 ...

  2. Hash表(hash table ,又名散列表)

    直接进去主题好了. 什么是哈希表? 哈希表(Hash table,也叫散列表),是根据key而直接进行访问的数据结构.也就是说,它通过把key映射到表中一个位置来访问记录,以加快查找的速度.这个映射函 ...

  3. C++中的枚举变量

    至从C语言开始enum类型就被作为用户自定义分类有限集合常量的方法被引入到了语言当中,而且一度成为C++中定义编译期常量的唯一方法(后来在类中引入了静态整型常量).根据上面对enum类型的描述,有以下 ...

  4. uiimageview 异步加载图片

    dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void){ NSURL *url = ...

  5. mysql增删改查基本语句

    mysql的增删改查属于基本操作,又被简称CRUD,其中删用的较少,毕竟这个功能给用户是是非常危险的,就是客户删除的数据也没有真正的删除,其中查询是十分常用的. 1 mysql数据库增加:create ...

  6. Shell 将两个文件按列合并

    file1. 1 2 2 3 3 4 4 5 5 6 file2. a b b c c d d e e f 需要把file2的第二列合并到file1,使File1并成三列. 第一种方法:paste p ...

  7. 邮件欺诈与SPF防御

    一.邮件欺诈: 众所周知,现在邮件的发件人是自己生成的,其实发件域名也是可以自己生成的.例如,A得知B组织的邮箱域(前提是B组织邮箱域没有配置SPF),那么A可以自己起一个邮箱服务器,配置相同的域名. ...

  8. 在ubuntu14.04上漏洞环境vulndocker的DOCKER搭建

    一.下载git包以及安装: git clone https://github.com/leveryd/vulndocker.git cd vulndocker apt-get install uwsg ...

  9. Python的函数名作为参数传入调用以及map、reduce、filter

    零.python的lambda函数: #lambda function func = lambda x : x+1 #这里是一个匿名函数,x是参数,x+1是对参数的操作 func(1)= 2 多个参数 ...

  10. 微信小程序 --- 模板的使用

    由于微信小程序文件大小的限制,可以把一些公用的文件 单离出来形成模板,从而被各个模板引用: 定义模板第一种方式: 新建一个目录: 写入: <text>hello world</tex ...