浅析JavaScript中的变量提升

目录
  • 前言：
  • 函数提升
  • var变量提升
  • let & const提升
  • Class提升

前言：

JavaScript中奇怪的一点是你可以在变量和函数声明之前使用它们。就好像是变量声明和函数声明被提升了代码的顶部一样。

sayHi() // Hi there!

function sayHi() {
    console.log('Hi there!')
}
name = 'John Doe'
console.log(name)   // John Doe
var name

然而JavaScript并不会移动你的代码，所以JavaScript中“变量提升”并不是真正意义上的“提升”。

JavaScript是单线程语言，所以执行肯定是按顺序执行。但是并不是逐行的分析和执行，而是一段一段地分析执行，会先进行编译阶段然后才是执行阶段。

在编译阶段阶段，代码真正执行前的几毫秒，会检测到所有的变量和函数声明，所有这些函数和变量声明都被添加到名为Lexical Environment的JavaScript数据结构内的内存中。所以这些变量和函数能在它们真正被声明之前使用。

函数提升

sayHi() // Hi there!

function sayHi() {
    console.log('Hi there!')
}

因为函数声明在编译阶段会被添加到词法环境（Lexical Environment）中，当JavaScript引擎遇到sayHi()函数时，它会从词法环境中找到这个函数并执行它。

lexicalEnvironment = {
  sayHi: < func >
}

var变量提升

console.log(name)   // 'undefined'
var name = 'John Doe'
console.log(name)   // John Doe

上面的代码实际上分为两个部分：

  • var name表示声明变量name
  • = 'John Doe'表示的是为变量name赋值为'John Doe'。
var name    // 声明变量
name = 'John Doe' // 赋值操作

只有声明操作var name会被提升，而赋值这个操作并不会被提升，但是为什么变量name的值会是undefined呢?

原因是当JavaScript在编译阶段会找到var关键字声明的变量会添加到词法环境中，并初始化一个值undefined，在之后执行代码到赋值语句时，会把值赋值到这个变量。

// 编译阶段
lexicalEnvironment = {
  name: undefined
}
// 执行阶段
lexicalEnvironment = {
  name: 'John Doe'
}

所以函数表达式也不会被“提升”。helloWorld是一个默认值是undefined的变量，而不是一个function。

helloWorld();  // TypeError: helloWorld is not a function
var helloWorld = function(){
  console.log('Hello World!');
}

let & const提升

console.log(a)  // ReferenceError: a is not defined
let a = 3

为什么会报一个ReferenceError错误，难道let和const声明的变量没有被“提升”吗？

事实上所有的声明（function, var, let, const, class）都会被“提升”。但是只有使用var关键字声明的变量才会被初始化undefined值，而let和const声明的变量则不会被初始化值。

只有在执行阶段JavaScript引擎在遇到他们的词法绑定(赋值)时，他们才会被初始化。这意味着在JavaScript引擎在声明变量之前，无法访问该变量。这就是我们所说的Temporal Dead Zone，即变量创建和初始化之间的时间跨度，它们无法访问。

如果JavaScript引擎在let和const变量被声明的地方还找不到值的话，就会被赋值为undefined或者返回一个错误(const的情况下)。

举例：

let a
console.log(a)  // undefined
a = 5

在编译阶段，JavaScript引擎遇到变量a并将它存到词法环境中，但因为使用let关键字声明的，JavaScript引擎并不会为它初始化值，所以在编译阶段，此刻的词法环境像这样:

lexicalEnvironment = {
  a: <uninitialized>
}

如果我们要在变量声明之前使用变量，JavaScript引擎会从词法环境中获取变量的值，但是变量此时还是uninitialized状态，所以会返回一个错误ReferenceError。

在执行阶段，当JavaScript引擎执行到变量被声明的时候，如果声明了变量并赋值，会更新词法环境中的值，如果只是声明了变量没有被赋值，那么JavaScript引擎会给变量赋值为undefined。

tips： 我们可以在let和const声明之前使用他们，只要代码不是在变量声明之前执行:

function foo() {
    console.log(name)
}
let name = 'John Doe'
foo()   // 'John Doe'

Class提升

同let和const一样，class在JavaScript中也是会被“提升”的，在被真正赋值之前都不会被初始化值, 同样受Temporal Dead Zone的影响。

let peter = new Person('Peter', 25) // ReferenceError: Person is not defined
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
let John = new Person('John', 25);
console.log(John) // Person { name: 'John', age: 25 }

到此这篇关于浅析JavaScript中的变量提升的文章就介绍到这了,更多相关JS变量提升内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • javascript 变量声明 var,let,const 的区别

    目录 作用域(Scope)是什么 var 声明 提升(Hoisting) let 声明 const 声明 作用域(Scope)是什么 作用域是程序的执行环境,它包含在当前位置可访问的变量和函数.在 ES5 语法中,有全局作用域和局部作用域,ES6 则新增了块级作用域. 全局作用域是最外层的作用域,在函数外面定义的变量属于全局作用域,可以被任何其他子作用域访问.在浏览器中,window 对象就是全局作用域.在编写前端代码过程中,其中有一条优化规则就是少使用全局变量,因为全局变量容易导致程序BUG,

  • JavaScript中Hoisting详解 (变量提升与函数声明提升)

    JavaScript中Hoisting详解 (变量提升与函数声明提升)

    本文主要给大家介绍了关于JavaScript中Hoisting(变量提升与函数声明提升)的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 如何将 函数声明 / 变量 "移动" 到作用域的顶部. 术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析.其实 Hoisting(提升) 这个词是用来解释 变量 和 函数声明 是如何被提升到 函数或全局 作用域顶部的.你在任何的 JavaScript 文档中找不到这个术语,我们说的

  • 浅谈JavaScript中变量和函数声明的提升

    现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.

  • 区别JavaScript函数声明与变量声明

    今天,又由一到题目引发了一场我跟JS基础的较量:首先是 var getName = function(){alert(1)}; function getName(){alert(2)}; getName();// 1 or function getName(){alert(2)}; var getName = function(){alert(1)}; getName();// 1 为什么我调换声明顺序,结果还是输出以 var 形式声明的函数的值? 有人回答我说 "啊,变量提升呀..."

  • Javascript变量函数声明提升深刻理解

    目录 前言: 变量提升 函数提升 为什么要提升? 最佳实践 总结 前言: Javascript变量函数声明提升(Hoisting)是在 Javascript 中执行上下文工作方式的一种认识(也可以说是一种预编译),从字面意义上看,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,在代码里的位置是不会动的,而是在编译阶段被放入内存中会和代码顺序不一样.变量函数声明提升虽然对于实际编码影响不大,特别是现在ES6的普及,但作为前端算是一个基础知识,必须掌握的,是很多大厂的前端面试必问的

  • 浅析JavaScript中的变量提升

    目录 前言: 函数提升 var变量提升 let & const提升 Class提升 前言: JavaScript中奇怪的一点是你可以在变量和函数声明之前使用它们.就好像是变量声明和函数声明被提升了代码的顶部一样. sayHi() // Hi there! function sayHi() { console.log('Hi there!') } name = 'John Doe' console.log(name) // John Doe var name 然而JavaScript并不会移动你的

  • JavaScript中的变量提升和函数提升

    JavaScript中的变量提升和函数提升

    目录 前言 为什么有变量提升 javascript变量提升和函数提升 总结 前言 在js中对变量进行操作后打印值经常会出现undefined的现象.其实原因是因为js中有一个叫做变量提升的功 举例: var data="lyyyyy"; getData(); function getData(){ //第一次打印 console.log("data值为: ", data); var data="yyyyyyy"; //第二次打印 console.

  • 浅析JavaScript中的变量复制、参数传递和作用域链

    今天在看书的过程中,又发现了自己目前对Javascript存在的一个知识模糊点:JS的作用域链,所以就通过查资料看书对作用域链相关的内容进行了学习.今天学习笔记主要有这样几个关键字:变量.参数传递.执行环境.变量对象.作用域链. 1.变量 变量需要注意的有两点:变量声明和复制变量值. 变量声明肯定大家都很熟悉,在JS中我们都是通过 var 关键字进行变量声明的.JS中规定,通过var声明的变量会被添加到最近的环境中,如果声明并且初始化一个变量没有用到var关键字,这个变量会被添加到全局环境中.

  • 详解javascript中的变量提升和函数提升

    1在js中只有两种作用域 a:全局作用域 b:函数作用域 在ES6之前,js是没有块级作用域. 首先来解释一下什么是没有块级作用域? 所以此时 是可以打印输出变量a的值. 2:什么是变量提升? 在我们的js中,代码的执行时分两步走的,1.解析 2.一步一步执行 那么变量提升就是变量声明会被提升到作用域的最顶上去,也就是该变量不管是在作用域的哪个地方声明的,都会提升到作作用域的最顶上去. 那么上面这种写法其实等价于下面这种写法: 看几个例子: 把上面的例子稍作改动: 结果就会大不一样, 再看一个例

  • 深入浅析JavaScript中的Function类型

    Function是javascript里最常用的一个概念,javascript里的function是最容易入手的一个功能,但它也是javascript最难理解最难掌握的一个概念. 1. Function类型是js中引用类型之一,每个函数实际上都是Function类型的实例对象,具有自己的属性和方法.正因为函数式对象,所以函数名实际上也是一个指向函数对象的指针. 2. 常用的函数定义方式 1. 函数声明: function sum(a , b ){ return a+b; } 2. 表达式: va

  • 浅析JavaScript中var that=this

    在阅读别人的代码时,发现别人写的代码中有这么一句:var that = this;,这代表什么意思呢?经过一番查阅,才明白是这么回事. 在JavaScript中,this代表的是当前对象. var that=this就是将当前的this对象复制一份到that变量中.这样做有什么意义呢? $('#conten').click(function(){ //this是被点击的#conten var that = this; $('.conten').each(function(){ //this是.c

  • 浅析JavaScript中的事件委托机制跟深浅拷贝

    浅析JavaScript中的事件委托机制跟深浅拷贝

    今天聊下JavaScript中的事件委托跟深浅拷贝 一.事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()">点击</button> <script> function clickEvent(){ alert("点击事件"); } </script> //方法二:通过addEventListener <button id="bt

  • 浅析Javascript中bind()方法的使用与实现

    在讨论bind()方法之前我们先来看一道题目: var altwrite = document.write;  altwrite("hello");  //1.以上代码有什么问题 //2.正确操作是怎样的 //3.bind()方法怎么实现 对于上面这道题目,答案并不是太难,主要考点就是this指向的问题,altwrite()函数改变this的指向global或window对象,导致执行时提示非法调用异常,正确的方案就是使用bind()方法: altwrite.bind(document

  • 浅析JavaScript中浏览器的兼容问题

    浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分.我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种能力,即判断当前浏览器是否支持要调用的属性或者方法.下面做了一些简短的介绍. 1.innerText 和 innerContent 1)innerText 和 innerContent 的作用相同 2)innerText IE8之前的浏览器支持 3)innerContent 老版本的Firefox支持 4)新版本的浏览器两种方式都支持 1 // 老版本浏

  • Javascript中的变量使用说明

    javascript中的所有变量都是类型松散的,不同于其他面向对象语音的变量声明都是强类型的.因此Javascript 的变量声明是不包括类型的.通过var关键字或者直接写变量名来声明一个变量,如: var v = 1; v=1; 这时有人可能会问,上述的两种声明有什么区别,为什 么会有这两种不同的声明方式,这就涉及到javascript中变量的作用域了.在javascript中,变量的作用域包括全局和函数级别的. 全局变量可以声明在函数体外,无论使用上述的哪种声明方式,在函数体外 声明的变量都

随机推荐