脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → js的变量提升和使用

详谈js的变量提升以及使用方法

 更新时间：2018年10月06日 12:19:57   投稿：laozhang  
在本专栏中小编给大家整理了关于js的变量提升以及使用方法的相关知识点内容，需要的朋友们参考下。

介绍

变量提升Hoisting是人们对JavaScript执行上下文工作方式的一种认识，并不是官方给出的改变

从字面上理解，变量提升的意思是变量和函数的声明会在物理层移动到作用域的最前面。但是这样理解并不准确，效果是相同的，但是实际的实现方式是JavaScript的变量和函数的声明会在编译阶段放入内存

这意味着使用者在正式声明一个函数或者变量之前就能够使用它

函数的提升

在JavaScript中，在声明一个函数前，我们就能够使用它，大家应该都体验过，像这样:

test();

 

function test() {

  // do something

}

在正常的使用情况下，应该需要先声明函数才能调用，但是这种方法仍然能够运行，这是因为JavaScript自动将函数声明事先存入了内存的原因，看起来就像JavaScript自动把函数声明提升到了最前面

变量的提升

对于变量，JavaScript使用类似的方法，但是要注意一点的是，对于变量的提升，JavaScript只会将变量声明提升，但是不会把初始化提升，如果在变量初始化之前使用，则会得到undefined

// undefined

console.log(a);

// ReferenceError: b is not defined

console.log(b);

var a = 10;
// undefined

console.log(num);

num = 6;

// 6

console.log(num);

num += 7;

// 13

console.log(num);

var num;
// undefined

console.log(num);

num = 1;

// 1

console.log(num);

var num = 2;

// 2

console.log(num);

这里要注意，JavaScript的变量提升是针对var的，而let和const不存在变量提升这一特性

// ReferenceError: a is not defined

console.log(a);

let a = 10;

一个复杂一点的例子

var a = 100;

function fn() {

  // undefined

  console.log(a);

  var a = 200;

  // 200

  console.log(a);

}

fn();

// 100

console.log(a);

var a;

// 100

console.log(a);

// 300

var a = 300;

console.log(a);

您可能感兴趣的文章:

相关文章

  • JavaScript 学习笔记之语句

    JavaScript 学习笔记之语句

    这篇文章主要介绍了JavaScript中的语句，包括条件分支语句、循环语句、迭代语句、Lable语句、break和continue语句、with语句、swith语句，十分全面细致，推荐给小伙伴们。
    2015-01-01
  • 浅析JS原型继承与类的继承

    浅析JS原型继承与类的继承

    下面小编就为大家带来一篇浅析JS原型继承与类的继承。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-04-04
  • 简单谈谈Javascript函数中的arguments

    简单谈谈Javascript函数中的arguments

    在JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。下面这篇文章主要介绍了关于Javascript函数中的arguments面貌以及如何转化为数组的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-02-02
  • 浅析js绑定事件的常用方法

    浅析js绑定事件的常用方法

    下面小编就为大家带来一篇浅析js绑定事件的常用方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JavaScript操作数组的常用方法总结

    JavaScript操作数组的常用方法总结

    这篇文章总结了JavaScript操作数组的常用方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • 了解重排与重绘

    了解重排与重绘

    重绘和重排操作都是代价昂贵的操作，它们会导致web应用程序的UI反应迟钝，所以应该尽可能减少这类过程的发生。下面我们来简单了解一下
    2019-05-05
  • 你所要知道JS（DHTML）中的一些技巧

    你所要知道JS（DHTML）中的一些技巧

    你所要知道JS（DHTML）中的一些技巧...
    2007-01-01
  • Javascript入门学习资料收集整理篇

    Javascript入门学习资料收集整理篇

    为大家更好的接触和学习js资料，所以我转了这篇文章，我大约的看了下，文章写的非常不错，希望大家不要急，慢慢看，第一次看不懂不要紧，多练习就可以了
    2008-07-07
  • javascript cookie基础应用之记录用户名的方法

    javascript cookie基础应用之记录用户名的方法

    这篇文章主要介绍了javascript cookie基础应用之记录用户名的方法,涉及javascript基于cookie针对数据存储的简单应用,需要的朋友可以参考下
    2016-09-09
  • 浅析JavaScript中的typeof运算符

    浅析JavaScript中的typeof运算符

    这篇文章主要是对JavaScript中的typeof运算符进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11

最新评论