一、变量提升

  在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。上个简历的例子如:

1
2
3
4
5
6
7
8
9
10
console.log(global); // undefined
var global = 'global';
console.log(global); // global
 
function fn () {
  console.log(a); // undefined
  var a = 'aaa';
  console.log(a); // aaa
}
fn();

  之所以会是以上的打印结果,是由于js的变量提升,实际上上面的代码是按照以下来执行的:

1
2
3
4
5
6
7
8
9
10
11
12
var global; // 变量提升,全局作用域范围内,此时只是声明,并没有赋值
console.log(global); // undefined
global = 'global'// 此时才赋值
console.log(global); // 打印出global
 
function fn () {
  var a; // 变量提升,函数作用域范围内
  console.log(a);
  a = 'aaa';
  console.log(a);
}
fn();

二、函数提升

  js中创建函数有两种方式:函数声明式和函数字面量式。只有函数声明才存在函数提升!如:

1
2
3
4
console.log(f1); // function f1() {}   
console.log(f2); // undefined  
function f1() {}
var f2 = function() {}

  只所以会有以上的打印结果,是由于js中的函数提升导致代码实际上是按照以下来执行的:

1
2
3
function f1() {} // 函数提升,整个代码块提升到文件的最开始<br>     console.log(f1);   
console.log(f2);   
var f2 = function() {}

  

结语:基本上就是这样,要熟练掌握的话可以多做些练习,test:

1
2
3
4
console.log(f1()); 
console.log(f2);   
function f1() {console.log('aa')}
var f2 = function() {}
1
2
3
4
5
6
(function() {
  console.log(a);
  a = 'aaa';
  var a = 'bbb';
  console.log(a);
})();

深入理解js的变量提升和函数提升(转)的更多相关文章

  1. JS逻辑题 技术点: 1). 变量提升 2). 函数提升 3). 预处理 4). 调用顺序

    考查的技术点:  1). 变量提升 2). 函数提升  3). 预处理  4). 调用顺序 var c = 1; function c(c) { console.log(c); var c = 3; ...

  2. JS——变量提升和函数提升

    一.引入 在了解这个知识点之前,我们先来看看下面的代码,控制台都会输出什么 var foo = 1; function bar() { if (!foo) { var foo = 10; } aler ...

  3. JS 变量提升与函数提升

    JS 变量提升与函数提升 JS变量提升 变量提升是指:使用var声明变量时,JS会将变量提升到所处作用域的顶部.举个简单的例子: 示例1 console.log(foo); // undefined ...

  4. js变量提升与函数提升的详细过程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. js中的变量提升和函数提升

    从上周开始,我所在的学习小组正式开始了angular的学习,angular是全面支持es6的,所以语法上和以前的angular有了很大的不同,比如变量声明时就抛弃了var,而选择了let和const: ...

  6. js中变量提升和函数提升

    变量提升和函数提升的总结 我们在学习JavaScript时,会遇到变量提升和函数提升的问题,为了理清这个问题,现做总结如下,希望对初学者能有所帮助 我们都知道 var 声明的变量有变量提升,而 let ...

  7. 对javascript变量提升跟函数提升的理解

    在写javascript代码的时候,经常会碰到一些奇怪的问题,例如: console.log(typeof hello); var hello = 123;//变量 function hello(){ ...

  8. JavaScript系列文章:变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

  9. JavaScript:变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

  10. JavaScript: 变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

随机推荐

  1. CTR点击率简介

    点击率 简介 在搜索引擎(百度.谷歌)中输入关键词后进行搜索,然后按竞价等因素把相关的网页按顺序进行排列出来,然后用户会选择自己感兴趣的网站点击进去:把一个网站所有搜索出来的次数作为总次数,把用户点击 ...

  2. Win7 Nginx启动失败 cmd命令失败

    Win7  Nginx启动失败 cmd命令失败 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服 ...

  3. JS循环遍历JSON数据的方法

    JSON数据如:{"options":"[{/"text/":/"王家湾/",/"value/":/" ...

  4. 树莓派外设、模块、传感器 —— 数码管(F3461BH)

    1. 4 位 8 段(7+点)数码管 树莓派GPIO入门05-驱动数码管显示数字 其内部电路图及各个段的引脚控制如下: 共阳与共阴: 数码管从电源极性上分共阳和共阴两种.解释一下,如果数码管上每一个独 ...

  5. PostgreSQL学习手册 性能提升技巧

    http://www.cnblogs.com/mchina/archive/2012/08/11/2537393.html 一.使用EXPLAIN:    PostgreSQL为每个查询都生成一个查询 ...

  6. 浅谈Manacher

    \(Manacher\)是由一个叫做\(Manacher\)的人发明的能在\(O(n)\)时间内找出一个字符串长度最长的回文子串的算法. 由于偶回文串形如\(abba\)这样的不好找对称中心,所以我们 ...

  7. Azure ARM模式下VNet配置中需要注意的几点事项

    虚拟网络的配置是所有公有云中非常重要的环节.把虚拟网络配置好,对整个系统的管理.维护,以及安全性都非常重要. 本文将介绍Azure在ARM模式下VNet配置中需要特别注意的几点. 一 Azure的VN ...

  8. 转:面对一个全新的环境,作为一个Oracle DBA,首先应该了解什么

    转载:面对一个全新的环境,作为一个Oracle DBA,首先应该了解什么 由于时间比较久了,找不到原文章的链接,先贴上内容供大家参考 在这里,不谈那些大的方面,比如了解整个IT环境整体情况,假设你已经 ...

  9. Java程序开发中的简单内存分析

    首先说明内存总体分为了4个部分, 包括 1.stack segment (栈区存储基本数据类型的局部变量,对象的引用名) 2.heap segment(堆区,一般用于存储java中new 出来的对象) ...

  10. Spring学习十 rest

    1:  Web  service:  是一个大的概念范畴,它表现了一种设计思想 SOAP 是 Web service 的一个重要组成部份. SOAP 是一种协议而非详细产品.SOAP 是通过 XML ...