一、变量提升

  在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. 清北学堂(2019 5 1) part 4

    今天讲数论 1.进制问题(将n转换成k进制数): 1.方法:短除法 将n/k,保存,将商当做新的n,将余数保存,直到商为0,将余数(包括0),倒序输出,即得n的k进制数 2.关于高精四则运算(我本以为 ...

  2. html5 frameset5内嵌框架集

    利用html5 frameset内嵌框架简单做一个网页,网页的布局大体如下: 我们可以将其分为四个部分: 第一部分:top图片栏 第二部分:left链接栏 第三部分:right内容栏 第四部分:网页整 ...

  3. Windows 10 SDK 10.0.10069 : The installer failed. User cancelled installation. Error code: -2147023294

    注* 请先跳到文章后面的配置“操作系统的区域设置”部分,然后尝试重试安装VS,如果仍然失败,请看下面内容. 安装UAP SDK失败 Visual Studio 2015 RC Community 安装 ...

  4. 深入javascript之原型和原型链

    原型和原型链是js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,并且原型和原型链会是面试中必不可少的话题.看完此篇文章一定会让你对原型,原型链有深刻全面的了解. 一 ...

  5. 去掉Arraylist集合中的重复元素

    package cn.collection; import java.util.ArrayList; import java.util.Iterator; import java.util.Scann ...

  6. numpy、scipy、pandas

    以下分别是numpy.Scipy.pandas的简介.虽然这些包提供的一些结构比python自身的“更高级.更高效”,更高级是因为它们能完成更高级的任务,但是,学习的时候尽量不要和python割裂开认 ...

  7. 类和对象(9)—— new和delete

    对象动态建立和释放 new 和delete 在软件开发过程中,常常需要动态地分配和撤销内存空间,例如对动态链表中结点的插入与删除.在C语言中是利用库函数malloc和free来分配和撤销内存空间的.C ...

  8. UI及物体渲染顺序

    1.决定UI渲染在所有物体前,ZTest Always,Canvas中的RenderMode影响该值. 2.都是ZTest Always 时影响覆盖的因素: 父子及先后关系: 渲染队列: sortin ...

  9. Python函数-bytearray()

    bytearray([source [, encoding [, errors]]]) bytearray([source [, encoding [, errors]]])返回一个byte数组.By ...

  10. JAVA中数值的表示

    1.Java中用补码形式表示 2.第一位正负位,1表示负,0表示正. 3.原码:一个数的二进制表示.                  3的原码00000011   -3的 原码 10000011 4 ...