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

提升影响了变量的生命周期,一个变量的生命周期包含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. MySQL 授权详解

    (1)确认一下3306是否对外开放,mysql默认状态下是不开放对外访问功能的.查看的办法如下: 1 2 3 4 5 6 7 netstat -an | grep 3306 tcp        0  ...

  2. Running an etcd cluster on localhost

    Purpose Run a cluster on localhost while investigating etcd Use a static cluster (So we have no exte ...

  3. poj2723

    把每对钥匙看做一个变量,那两个钥匙看做他的两个状态 每一个开门的要求就是一个条件(xi or xj) 很显然有了2sat的基本要素 2sat是一个判定性问题,而这题求最多能过几个门: 不难想到二分答案 ...

  4. LA_3026_Period_(kmp)

    描述 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...

  5. CSS+DIV之强化background属性

    1.背景颜色属性(background-color),设定背景颜色=html中bgcolor属性.我来写一个红色背景的body,(也可以定义某个特定区域) 示例写法:body {} 2.背景图片属性( ...

  6. PV,UV,IP

    参加了DTCC归来之后,各大电商技术大牛都会自豪的分享一下自己公司网站的PV,流量等等.当时也是一知半解,回来之后赶紧查了查,也算是扫扫盲. 以下摘自网络中,自己稍稍做了整理,对于PV,流量和带宽的理 ...

  7. 【原】 Spark中Worker源码分析(一)

    Worker作为对于Spark集群的健壮运行起着举足轻重的作用,作为Master的奴隶,每15s向Master告诉自己还活着,一旦主人(Master>有了任务(Application),立马交给 ...

  8. Docker系列(三)常用命令

    命令说明 docker pull 格式: docke pull [OPTIONS] NAME[:TAG] 作用:下载名称为 name 的镜像 例子: sudo docker pull dl.docke ...

  9. POJ-2296 Map Labeler 2sat

    题目链接:http://poj.org/problem?id=2296 二分+2sat,每个点的上下两个方向为2sat的两个状态. //STATUS:C++_AC_16MS_536KB #includ ...

  10. ndk-gdb of NDK r9d modified to *always* debug the ":remote"-process of your app

    https://gist.github.com/TomTasche/9690186 ndk-gdb of NDK r9d modified to *always* debug the ":r ...