5 变量提升

看以下代码, 或多或少会有些问题的.

function fn(){

    console.log(name);

    var name = '大马猴';

}

fn()

发现问题了么. 这么写代码, 在其他语言里. 绝对是不允许的. 但是在js里. 不但允许, 还能执行. 为什么呢? 因为在js执行的时候. 它会首先检测你的代码. 发现在代码中会有name使用. OK. 运行时就会变成这样的逻辑:

function fn(){

    var name;

    console.log(name);

    name = '大马猴';

}

fn()

看到了么. 实际运行的时候和我们写代码的顺序可能会不一样....这种把变量提前到代码块第一部分运行的逻辑被称为变量提升. 这在其他语言里是绝对没有的. 并且也不是什么好事情. 正常的逻辑不应该是这样的. 那么怎么办? 在新的ES6中. 就明确了, 这样使用变量是不完善的. es6提出. 用let来声明变量. 就不会出现该问题了.

function fn(){

    console.log(name);  // 直接报错, let变量不可以变量提升.

    let name = '大马猴';

}

fn()

结论一, 用let声明变量是新版本javascript提倡的一种声明变量的方案.

let还有哪些作用呢?

function fn(){

    // console.log(name);  // 直接报错, let变量不可以变量提升.

    // let name = '大马猴';

    var name = "JAY";

    var name = "WLH"

	/*注意, 报错是发生在代码检查阶段. 所以. 上述代码根本就执行不了.

==结论二, 在同一个作用域内. let声明的变量只能声明一次. 其他使用上和var没有差别=="; */

    console.log(name);

}

fn()

显然一个变量被声明了两次. 这样也是不合理的. var本意是声明变量. 同一个东西. 被声明两次. 所以ES6规定. let声明的变量. 在同一个作用域内. 只能声明一次.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>变量提升</title>

</head>

<body>

    <script src = "变量提升.js"></script>

</body>

</html>


// // 变量提升

// function fn() {

//     console.log(name);

//     var name = '大马猴';

// }

// fn();

//

// function fn() {

//     var name;

//     console.log(name);

//     name = '大马猴';

// }

// fn();

// // let 声明变量可以避免变量提升问题

// function gn() {

//     console.log(name);  // 直接报错, let变量不可以变量提升.

//     let name = '大马猴';

// }

// gn();

// function sn() {

//     var name = 'jay';

//     var name = 'wlh';

//     console.log(name);

// }   // 一个变量被声明了两次. 这样也是不合理的

// sn();   // wlh

// // 在同一个作用域内. let声明的变量只能声明一次. 其他使用上和var没有差别

// function xn() {

//     let name = 'jay';

//     console.log(name);

//     let name = 'wlh';

//     console.log(name);

// }

// xn();   // 报错是发生在代码检查阶段. 所以. 上述代码根本就执行不了

5 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变量提升

    提升是一种将变量和函数的声明移到函数作用域(如果不在任何函数内的话就是全局作用域)最顶部的机制. 提升影响了变量的生命周期,一个变量的生命周期包含3个阶段: 声明——创建一个新变量,例如var myV ...

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

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

  6. javascript变量提升详解

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

  7. JavaScript 变量提升

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

  8. 160622、详解JavaScript变量提升

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

  9. 详解JavaScript变量提升

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

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

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

随机推荐

  1. win32 - wsprintf和wvsprintf

    前者很常用, 经常被用来转换为字符串或者拼接字符串. 例子: #include <Windows.h> #include <stdio.h> int main() { int ...

  2. 从零开始学Spring Boot系列-Hello World

    欢迎来到从零开始学Spring Boot的旅程!在这个系列的第二篇文章中,我们将从一个非常基础但重要的示例开始:创建一个简单的Spring Boot应用程序,并输出"Hello World& ...

  3. tox包

    官方文档 https://tox.readthedocs.io/en/latest/example/basic.html 官方提供的一个简单的tox.ini/默认环境 [tox] envlist = ...

  4. Retrofit 的基本用法

    一.添加依赖和网络权限 添加依赖 implementation 'com.squareup.retrofit2:retrofit:2.9.0' implementation 'com.squareup ...

  5. Kotlin 协程五 —— 在Android 中使用 Kotlin 协程

    目录 一.Android MVVM 结构 二.添加依赖 三.在后台线程中执行 3.1 协程解决了什么问题 3.2 保证主线程安全 3.3 withContext 的性能 四.结构化并发 4.1 追踪协 ...

  6. 01、etcd基础介绍

    互联网技术发展真的快,层出不穷的新技术.最近项目使用到了etcd,自己之前在部署k8s集群的时候玩过,但是并没有系统的学习.正好趁这个机会,系统性的学习下.文章中的内容有些是来自官方文档,有些是来自网 ...

  7. Html飞机大战(十六): 完成"清除"敌机奖励类

    好家伙,   我们先来尝试完成一个最简单的功能 正面buff: 1.消灭全图敌机   我们要先找一个好看一点的素材     把背景弄成透明的(搞了好久),感谢度娘的技术支持Photoshop中如何把图 ...

  8. 【Azure Redis】Redis客户端出现15分钟的超时异常

    问题描述 客户端使用 Lettuce.io 连接 Azure Redis,出现了长达15分钟的Timeout异常. 问题解答 Azure Redis作为PaaS服务,由于一些平台的升级操作而引发的故障 ...

  9. C#多线程(7)：手动线程通知

    目录 区别与示例 ManualResetEvent 类 ManualResetEventSlim 区别与示例 AutoResetEvent 和 ManualResetEvent 十分相似.两者之间的区 ...

  10. 微软应用商店错误代码“0x80131500”怎么修复？

    处理方法一 打开"运行"输入 inetcpl.cpl ("WINDOWS"+"R"键,输入 inetcpl.cpl亦可),点开高级往下拉,勾 ...