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

提升影响了变量的生命周期,一个变量的生命周期包含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. Reflector+Reflexil 相结合实现对DLL文件修改

    在工作过程中,我们有可能遇到这样的问题:公司发给客户的软件包突然报错了,但是你知道哪里报错了,而这个代码已经编译成DLL文件了,源代码不在自己这里.怎么办呢?还好现在有Reflexil插件,这个插件只 ...

  2. BZOJ_1096_[ZJOI2007]_仓库建设_(斜率优化动态规划+单调队列+特殊的前缀和技巧)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1096 有\(n\)个工厂,给出第\(i\)个工厂的到1号工厂的距离\(x[i]\),货物数量\ ...

  3. POJ_2566_Bound_Found_(尺取法+前缀和)

    描述 http://poj.org/problem?id=2566 给出一个整数序列,并给出非负整数t,求数列中连续区间和的绝对值最接近k的区间左右端点以及这个区间和的绝对值. Bound Found ...

  4. Mac OS X 10.10(yosemite)更新后,cocoapods出错, 及cocoapods更新至0.34后, 错误情况整理

    1:Mac升级10.10后,执行pod install出错如下 QTX-Will-mini:NewHishop willbin$ pod install [!] Unable to load a sp ...

  5. HDU-5414 CRB and String

    http://acm.hdu.edu.cn/showproblem.php?pid=5414 题意:给定字符串s和t,可以在s里面选一个字符c,然后任选一个字符d(d!=c)将d插入到c的后面,问能不 ...

  6. Prism简介

    Prism是由微软Patterns & Practices团队开发的项目,目的在于帮助开发人员构建松散耦合的.更灵活.更易于维护并且更易于测试的WPF应用或是Silverlight应用以及Wi ...

  7. 【VLFeat】使用matlab版本计算HOG

    下载 vlfeat-0.9.18    http://www.vlfeat.org cd D:\program\vlfeat-0.9.18\toolbox

  8. SSDT – Error SQL70001 This statement is not recognized in this context-摘自网络

    March 28, 2013 — arcanecode One of the most common errors I get asked about when using SQL Server Da ...

  9. 写入目录 /tmp/OraInstall2015-05-20_03-35-53PM 时出错

    做足准备工作之后进行安装oracle,运行runInstall的时候别的时候输出如下错误 写入目录 /tmp/OraInstall2015-05-20_03-35-53PM 时出错.请确保此目录是可写 ...

  10. SweetAlert 使用

    $(".delete").click(function(){ var work_name = $(this).data('name'); var item_id = $(this) ...