1、变量提升:(创建->初始化)-->赋值-->修改

就是说,以var声明的变量,它的声明会被提升到当前作用域的顶端(注意是变量声明提升,变量的赋值没有提升)

//在if语句中也会提升,跟js的解析顺序有关


  <script>
    console.log(a);//undefined
    var a = 10;
    function test(){
      console.log(a);//undefined
      if(false){
        var a =12;
      }
      console.log(a);//undefined
      if(true){
        var a =12;
      }
      console.log(a);//12
    }
    test();
    console.log(a);//10
  </script>

2 、那么如果用let和const声明的变量是否会提升?let和const是块级作用域,且存在死区的概念

  <script>
var a = 10;
function test(){
console.log(a);//Cannot access 'a' before initialization
let a = 12;//or const a = 12;
console.log(a);//
}
test();
console.log(a);//
</script>

得出结论:let和const,不适用于变量提升;let和const有着'临时性死区'的概念,即从作用域开始到变量申明的这一部分,不能使用该变量,否则会报错。

3 、函数的声明提升:

函数声明方式有三种:

  1. 函数声明:function test(){};

  2. 函数表达式:var test = function(){};

其中 函数声明将会被提升:

  <script>
    test();//输出:函数声明
     var test = function(){
       console.log("函数表达式");
     }
     test();//输出:函数表达式
     function test(){
       console.log("函数声明");
     }
     test();//输出:函数表达式
 </script>

可以看出js中函数不存在重载的概念,后面一个同名函数会覆盖掉前面一个同名函数

4 、函数声明高于变量声明: //函数声明提升比变量声明提升的快,同时会忽略对同名变量的二次申明

  <script>
console.log(test);/*输出:ƒ test(){console.log("函数申明");}*/
function test(){
console.log("函数申明");
}
var test;
console.log(test);/*输出:ƒ test(){console.log("函数申明");}*/
var test = 1;
console.log(test);//
</script>

5 、关于let,const的思考

  • const声明的变量如果包含引用类型的调用,是可以修改变量里引用类型指向的数据的

  • let和const声明的全局变量不会被定义成顶层对象的属性

  • let和const不能重复声明一个同名变量,是因为同名变量在栈中的地址问题?

  • js中数据分为基本和引用,存储在栈和堆中,var声明的变量,和let和const声明的在栈和堆中存储的方式是否有什么不同?

近期学习es6后对变量提升及let和const的一点思考的更多相关文章

  1. 关于JS中变量提升的规则和原理的一点理解

        关于变量提升,以前在一些教程和书籍上都听到过,平时开发中也知道有这个规律,但是今天突然在一个公开课中听到时,第一反应时一脸懵逼,然后一百度,瞬间觉得好熟悉啊,差点被这个概念给唬住了,不信我给你 ...

  2. 关于JS中变量提升的规则和原理的一点理解(二)

    上篇文章中讲到变量提升和函数提升的先后顺序时蒙了,后来去查了一下资料,特别整理一下. 在<你不知道的JavaScript(上卷)>一书的第40页中写到:函数会首先被提升,然后才是变量. 书 ...

  3. ES6 - 基础学习(2): 新的变量声明方式 let 与 const

    ES6)新增加了两个重要的 JavaScript 关键字:let 和 const.以前声明变量时只有一种方式:var,ES6对声明方式进行了扩展,现在可以有三种声明方式了. 1.var:variabl ...

  4. 开始学习es6(二) let 与 const 及 块级作用域

    1.var JavaScript中,我们通常说的作用域是函数作用域,使用var声明的变量,无论是在代码的哪个地方声明的,都会提升到当前作用域的最顶部,这种行为叫做变量提升(Hoisting) cons ...

  5. ES6学习笔记(一)新的变量定义命令let和const

    1.一些历史 ES6(ECMAScript 6.0)是 JavaScript 语言的新一代标准,于2015 年 6 月正式发布,距今已经4年了,它的目标,是使得 JavaScript 语言可以用来编写 ...

  6. JS 作用域与变量提升---JS 学习笔记(三)

    你知道下面的JavaScript代码执行时会输出什么吗? var foo = 1; function bar() { if (!foo) { var foo = 10; } console.log(f ...

  7. ES6学习之let声明变量的学习

    1.let和var类似, (1)let与var不同的点:let没有预编译,变量提升这个过程,let声明的变量只能在当前作用域内访问到(一个{}可以看做是一个作用域),在全局var声明的变量属于wind ...

  8. es6 学习1 let表示变量 、const表示常量 与 var 变量的区别

    一.let 1.看下代码,在函数中无论在哪里声明变量,都会自动提到函数顶部,这就是函数变量提升,它的作用于为当前函数中. function aa() { if(bool) { var test = ' ...

  9. 【系统学习ES6】第一节:新的声明方式

    [系统学习ES6] 本专题旨在对ES6的常用技术点进行系统性梳理,帮助大家对其有更好的掌握.计划每周更新1-2篇,希望大家有所收获. 以前用ES5时,声明变量只能用var.ES6的出现,为我们带来了两 ...

随机推荐

  1. Kafka常用运维操作

    创建主题kafka-topics.sh --zookeeper localhost:2181 --create --topic my-topic --replication-factor 3 --pa ...

  2. Spring Cloud之Zuul

    API网关是一个更为智能的应用服务器,它的存在就像是整个微服务架构系统的门面一样,所有的外部客户端访问都需要经过它来进行调度和过滤.它除了要实现请求路由.负载均衡.校验过滤等功能之外,还需要更多能力, ...

  3. 无人机基于Matlab/Simulink的模型开发(连载一)

    "一切可以被控制的对象,都需要被数学量化" 这是笔者从事多年研发工作得出的道理,无论是车辆控制,机器人控制,飞机控制,还是无人机控制,所有和机械运动相关的控制,如果不能被很好的数学 ...

  4. 移动端自动化测试Appium 从入门到项目实战Python版☝☝☝

    移动端自动化测试Appium 从入门到项目实战Python版 (一个人学习或许会很枯燥,但是寻找更多志同道合的朋友一起,学习将会变得更加有意义✌✌)  说到APP自动化测试,Appium可是说是非常流 ...

  5. vue事件获取当前对象

    一.事件传参 如点击事件 <div @click='click'> <div> <div @click='click_1('msg')'> <div> ...

  6. 实验吧之【因缺思汀的绕过】(group by with rollup的注入利用)

    打开页面,查看源代码,发现存在source.txt(http://ctf5.shiyanbar.com/web/pcat/source.txt),如下: <?php error_reportin ...

  7. PHP 插入排序 -- 折半查找

    1. 折半查找  -- Binary Insertion Sort 时间复杂度 : O(n^2) 适用条件 : 相对直接插入排序,减少了数值的比较次数.适用于需要排序的数码比较少的情况. <?p ...

  8. DeCantor Expansion (逆康托展开)

    Background\text{Background}Background The \text{The }The Listen&Say Test will be hold on May 11, ...

  9. NoticeBoard

    本人蒟蒻,请轻点虐. 本人是一个即将退役的蒟蒻. 有些题目和模拟赛用密码保护起来了,请小伙伴们不要猜了,猜不出来的.想知道大佬们如果想查看可以直接找我问,您们高抬贵眼会让我受宠若惊. 哇终于有人找我要 ...

  10. FileZilla Server超详细配置

    FileZilla Server下载安装完成后,必须启动软件进行设置,由于此软件是英文,本来就是一款陌生的软件,再加上英文(注:本站提供中文版本,请点击下载),配置难度可想而知,站长从网上找到一篇非常 ...