提升是一种将变量和函数的声明移到函数作用域(如果不在任何函数内的话就是全局作用域)最顶部的机制。

提升影响了变量的生命周期,一个变量的生命周期包含3个阶段:

声明——创建一个新变量,例如var myValue;

初始化——用一个值初始化变量,例如myValue=150;

使用——使用变量的值,例如alert(myValue)。

javascript并没有严格遵循这个顺序,因此提供了更多的灵活性。比如:函数的使用可以在声明之前。

这是因为javascript的函数声明会被提升到作用域顶部。

变量提升在不同方面的影响也不同:

变量声明:使用var ,let ,const关键字

函数声明:使用function(){......}语法

类声明:使用class关键字

函数声明在函数作用域内创建并初始化一个变量。默认情况下,声明但是未初始化的变量的值是undefined。

1.提升var:使用var声明的变量会被提升到所在函数作用域的顶部,如果在声明之前访问该变量,它的值会是undefined。虽然它的声明提升了,但是它的赋值没有提升到函数作用域顶部,依然留在原地。

function sum(a,b){
var myString; //提升到顶部
console.log(myString); //undefined
myString="HelloWorld"; //赋值不受影响
console.log(myStriing); //‘HelloWorld’
return a+b;
}

2.块级作用域变量:let

let声明在块级作用域内创建并初始化一个变量:默认情况下,声明但是未初始化的变量的值是undefined。

let是ECMAScript6引入的一个巨大的改进,它允许代码在代码块的级别上保持模块性和封装性;

使用let定义的变量会被提升到代码块的顶部。但是如果在声明前访问该变量,javascript会抛出异常ReferenceError:is not defined。

在声明语句一直到代码库的顶部,变量都好像在一个临时死亡区间中一样,不能被访问。

function isTruthy(value){
var myVariable='Value 1';
console.log(myVariable); //Value1
if(value){
console.log(myVariable); //ReferenceError:myVariable is not defined,临时死亡区
let myVariable='Value 2';
console.log(myVariable); //Value 2
return true;
}
}

以上代码可以确认let变量确实被提升了。
let在块级作用域内提升保护了变量不受外层作用域影响。先声明,后使用。

3.常量const

常量声明在块级作用域内创建并初始化一个常量:当声明一个变量时,必须在同一条语句中对该变量进行初始化。在声明与初始化之后,变量的值不能被修改。

使用const定义的常量会被提升到代码块的顶部。由于存在临时死亡区间,常量在声明之前不能被访问。常量提升效果与let声明变量的效果相同。

4.函数声明:函数声明使用提供的名称和参数创建一个函数

函数声明的提升允许你在所属作用域内任何地方使用该函数,即使在声明之前也可以。函数可以在当前作用域或子作用域内的任何地方访问。

注意:函数声明function(){....}和函数表达式var=function(){.....}之间的区别

5.类声明

类声明会被提升到块级作用域的顶部。但是如果你在声明前使用类,javascript会抛出异常。先声明类,然后创建实例。与let的提升效果类似。

javascript变量提升的更多相关文章

  1. 回归基础: JavaScript 变量提升

    from me: javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到. 它是JavaScr ...

  2. JavaScript变量提升 面试题

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. JavaScript变量提升和函数声明预解析

    1.首先理解函数作用域 在JavaScript中,变量的定义并不是以代码块作为作用域的,而是以函数作用作用域的.也就是说,如果变量是在某个函数中定义的,那么它在函数以外的地方是不可见的.而如果该变量是 ...

  4. 最通俗易懂的javascript变量提升

    a = 'ghostwu'; var a; console.log( a ); 在我没有讲什么是变量提升,以及变量提升的规则之前, 或者你没有学习过变量提升,如果按照现有的javascript理解, ...

  5. javascript变量提升详解

    js变量提升 对于大多数js开发者来说,变量提升可以说是一个非常常见的问题,但是可能很多人对其不是特别的了解.所以在此,我想来讲一讲. 先从一个简单的例子来入门: a = 2; var a; cons ...

  6. JavaScript 变量提升

    变量提升(Hoisting):在ES6之前,函数声明和变量声明总是被JavaScript解释器隐式地提升(hoist)到包含他们的作用域的最顶端. 注意: 1. JavaScript 仅提升声明,而不 ...

  7. 160622、详解JavaScript变量提升

    变量在程序中随处可见.它们是一些始终在相互影响,相互作用的的数据和逻辑.正是这些互动使应用程序活了起来. 在JavaScript中使用变量很重要的一方面就是变量的提升 —— 它决定了一个变量何时可以被 ...

  8. 详解JavaScript变量提升

    变量在程序中随处可见.它们是一些始终在相互影响,相互作用的的数据和逻辑.正是这些互动使应用程序活了起来. 在JavaScript中使用变量很重要的一方面就是变量的提升 —— 它决定了一个变量何时可以被 ...

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

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

随机推荐

  1. Keepalived+MySQL双主

    一.Keepalived+MySQL Replication的应用场景 MySQL的高可用方案有cluster,MMM,MHA等,这些高可用方案都要三台服务器以上,成本有点高,今天介绍一个低成本高可用 ...

  2. 获取本机的ip

    https://4sysops.com/archives/ipv6-tutorial-part-6-site-local-addresses-and-link-local-addresses/ In ...

  3. How to: Define a Windows Communication Foundation Service Contract

    This is the first of six tasks required to create a basic Windows Communication Foundation (WCF) app ...

  4. VJP1100 加分二叉树(树形DP)

    链接 归属树形DP  做着更像记忆化 DP很好做 就是那个输出路径恶心了..改代码 从60多行改到120多行..dp从1维加到三维.. 先类似记忆化搜索整棵树 枚举以i为根节点的最大值 子树类似 求完 ...

  5. Java通过socket实现smtp协议发送邮件

    import java.io.BufferedReader;import java.io.DataOutputStream;import java.io.IOException;import java ...

  6. IKVM - 0.42.0.3 .NET平台上的Java实现

    IKVM是Microsoft .NET Framework和Mono平台上的一个Java实现,他包括以下一些部分:1. 一个用.NET实现的Java虚拟机2. Java类库的.NET实现3. 一些用于 ...

  7. spring--AOP2--6

    AOP 之 6.6 通知参数 前边章节已经介绍了声明通知,但如果想获取被被通知方法参数并传递给通知方法,该如何实现呢?接下来我们将介绍两种获取通知参数的方式. 使用JoinPoint获取:Spring ...

  8. [Andrew]Grid列编辑实现

    Html.X().GridPanel()                .Plugins(Html.X().CellEditing())                .Listeners(l =&g ...

  9. uDig介绍

    一 安装配置Java平台此步骤不必多说,如果您是Java开发者可以跳过.如果您的机器上没有Java平台,那么请到http://java.sun.com下载jdk,当下最新的版本是1.6.安装jdk,请 ...

  10. zabbix2.2.2-hostgroups.php代码分析(1)

    想模仿hostgroups.php仿写一个主机组页面.直接从页面展示开始分析. if (isset($_REQUEST['form'])) { //这里面是点击创建主机组的页面展示 }else{ // ...