理解Javascript的变量提升

更新日期: 2019-12-25阅读: 1.9k标签: 变量

正文

Javascript中的变量提升说的是在程序中可以在变量声明之前就进行使用:

console.log(a); // undefined
var a = 1;

可以看到,在变量a声明之前我们可以正常调用a,代码的实际的表现更像是这样的:

var a;
console.log(a); // undefined
a = 1;

但实际上,代码并没有被改变,上面的代码只是我们猜测的,其实Javascript引擎在执行这几行代码的时候并没有移动或是改变代码的结果。到底发生了什么呢?


变量提升

在代码的编译期间,即代码真正执行的瞬息之间,引擎会将代码块中所有的变量声明和函数声明都记录下来。这些函数声明和变量声明都会被记录在一个名为词法环境数据结构中。词法环境是Javascript引擎中一种记录变量和函数声明的数据结构,它会被直接保存在内存中。所以,上面的console.log(a)可以正常执行。

什么是词法环境

所谓词法环境就是一种标识符—变量映射的结构(这里的标识符指的是变量/函数的名字,变量是对实际对象[包含函数和数组类型的对象]或基础数据类型的引用)。

简单地说,词法环境是Javascript引擎用来存储变量和对象引用的地方。

词法环境的结构用伪代码表示如下:

LexicalEnvironment = {
  Identifier:  <value>,
  Identifier:  <function object>
}

关于词法环境更多的了解可以看博主之前的译文:理解Javascript中的执行上下文和执行栈

了解了词法环境接下来让我依次看下使用var,const,let,function,class声明的变量或函数的情况。


function声明提升

helloWorld();  // 打印 'Hello World!'
function helloWorld(){
  console.log('Hello World!');
}

我们已经知道了,函数声明会在编译阶段就会被记录在词法环境中并且保存在内存中,因此我们可以在函数进行实际声明之前对该函数进行访问。

上面函数声明保存在词法环境中像下面这样:

lexicalEnvironment = {
  helloWorld: < func >
}

所以在代码执行阶段,当Javascript引擎碰到helloWorld()这行代码,会在词法环境中寻找,然后找到这个函数并执行它。


函数表达式

注意,只有函数声明才会被直接提升,使用函数表达式声明的函数不会被提升,看下面代码:

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

如上,代码报错了。使用var声明的helloWorld是个变量,并不是函数,Javascript引擎只会把它当成普通的变量来处理,而不会在词法环境中给它赋值。

保存在词法环境中像下面这样:

lexicalEnvironment = {
  helloWorld: undefined
}

上面的代码要想可以正常运行改写如下即可:

var helloWorld = function(){
  console.log('Hello World!');
}
helloWorld();  // 打印 'Hello World!'


var变量提升

看一个使用var声明变量的例子:

console.log(a); // 打印 'undefined'
var a = 3;

如果按上面function函数声明的方式去理解,这里应该打印3,但实际上打印了undefined。

请记住:所谓的声明提升只是在编译阶段Javascript引擎将函数声明和变量声明存储在词法环境中,但不会给它们赋值。等到了执行阶段,真正执行到赋值那一行的时候,词法环境才会更新。

但上面的代码为什么打印了undefined呢?

Javascript引擎会在编译阶段将使用var声明的变量保存在词法环境中,并将它初始化为undefined。到了执行阶段,等执行到赋值那一行代码的时候,词法环境中变量的值才会被更新。

所以上面代码的词法环境初始化像下面这样:

lexicalEnvironment = {
  a: undefined
}

这也解释了为什么前面使用函数表达式声明的函数执行会报错,为什么上面的代码会打印undefined。当代码执行到var a = 3;这行代码的时候,词法环境中a的值就会被更新,此时词法环境会被更新如下:

lexicalEnvironment = {
  a: 3
}


let和const变量提升

看一个使用let声明变量的例子:

console.log(a);
let a = 3;

输出:

Uncaught ReferenceError: Cannot access 'a' before initialization

再看一个使用const声明变量的例子:

console.log(b);
const b = 1;

输出:

Uncaught ReferenceError: Cannot access 'b' before initialization

和var不同,相同结构的代码换成let或是const都直接报错了。

难道使用let和const声明的变量不存在变量提升的情况么?

实际上,在Javascript中所有声明的变量(var,const,let,function,class)都存在变量提升的情况。使用var声明的变量,在词法环境中会被初始化为undefined,但用let和const声明的变量并不会被初始化。

使用let和const声明的变量只有在执行到赋值那行代码的时候才会真正给他赋值,这也意味着在执行到变量声明的那行代码之前访问那个变量都会报错,这就是我们常说的暂时性死区(TDZ)。即在变量声明之前都不能对变量进行访问。

当执行到变量声明的那一行的时候,但是仍然没有赋值,那么使用let声明的变量就会被初始化为undefined;使用const声明的变量就会报错; 看实际的例子:

let a;
console.log(a); // 输出 undefined
a = 5;

在代码编译阶段,Javascript引擎会把变量a存储在词法环境中,并把a保持在未初始化的状态。此时词法环境像下面这样:

lexicalEnvironment = {
  a: <uninitialized>
}

此时如果尝试访问变量a或是b,Javascript引擎会在词法环境中找到该变量,但此时变量处于未初始化的状态,因此会抛出一个引用错误。

然后在执行阶段,Javascript引擎执行到赋值(专业点叫词法绑定)那一行的时候,会评估被赋值的值,如果没有被赋值,只是简单的声明,此时就会给let声明的变量赋值为undefined;此时词法环境像下面这样:

lexicalEnvironment = {
  a: undefined
}

当执行到a = 5这一行的时候,词法环境再次更新:

lexicalEnvironment = {
  a: 5
}

再看下使用const声明代码的情况:

let a;
console.log(a);
a = 5;
const b;
console.log(b);

输出:

Uncaught SyntaxError: Missing initializer in const declaration

上面代码直接报错,a的值也没有打印,直接报错,其实是代码在编译阶段就已经报错了,压根没执行到console.log(a);这一行代码。

注意:在函数中,只要是能在变量声明之后引用该变量就不会报错。

什么意思呢?看如下代码:

function foo () {
  console.log(a);
}
let a = 20;
foo(); // 打印 20

但下面代码就会报错:

function foo () {
  console.log(a);
}
foo();
let a = 20; // 报错: Uncaught ReferenceError: Cannot access 'a' before initialization

这里报错的原因需要结合Javascript中的执行上下文和执行栈才能理解,因为此时全局执行上下文中词法环境中保存的变量a处于未初始化的状态,调用foo函数,创建了一个函数执行上下文,然后函数foo执行过程对全局执行上下文的变量a进行访问,但a还处于未初始化的状态(此时let a = 20还没有执行)。因此报错。

这里需要纠正一个误区,就是let和const声明的变量只有暂时性死区,不存在变量提升,其实是不对的,举个例子证明理解一下:

let a = 1;
{
  console.log(a);
  let a = 2;
}

上面的代码会被报错:

Uncaught ReferenceError: Cannot access 'a' before initialization

如果不存在变量提升,理论上不会报错才对。


class声明提升

与let、const类似,使用class声明的类也会被提升,然后这个类声明会被保存在词法环境中但处于未初始化的状态,直到执行到变量赋值那一行代码,才会被初始化。另外,class声明的类一样存在暂时性死区(TDZ)。看例子:

let peter = new Person('Peter', 25); 
console.log(peter);
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

打印:

Uncaught ReferenceError: Cannot access 'Person' before initialization

改写如下就可以正常运行了:

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

上面代码在编译阶段,词法环境像这样:

lexicalEnvironment = {
  Person: <uninitialized>
}

然后执行到class声明的那一行代码,此时词法环境像下面这样:

lexicalEnvironment = {
  Person: <Person object>
}

注意:使用构造函数实例化对象并不会报错:

let peter = new Person('Peter', 25);
console.log(peter);
function Person(name, age) {

    this.name = name;
    this.age = age;
}
// Person { name: 'Peter', age: 25 }

上面代码正常运行。


类表达式

和函数表达式一样,类表达式也一样会被提升,比如:

let peter = new Person('Peter', 25);
console.log(peter);
let Person = class {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

报错:

Uncaught ReferenceError: Cannot access 'Person' before initialization

要想正常运行,改写如下即可:

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

也就是说不管是函数表达式还是类表达式遵循的规则和变量声明是一样的。


结论

不管是var,const,let,function,class声明的变量还是函数都存在变量提升的情况。正确理解变量提升有助于我们写更好的代码。整个变量提升的情况总结如下:

  • var:存在变量提升,在编译阶段会被初始化为undefined;
  • let: 存在变量提升,存在暂时性死区(TDZ),执行阶段,如果没赋值,则初始化为undefined;
  • const: 存在变量提升,存在暂时性死区(TDZ),如果没有赋值,编译阶段就会报错;
  • function:存在变量提升,在变量声明之前可以访问并执行;
  • class: 存在变量提升,存在暂时性死区(TDZ);


链接: https://fly63.com/article/detial/7609

css自定义变量_初次接触CSS变量

本文的目的主要是展示CSS变量是如何工作的。随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性的机制。

CSS变量(自定义属性)实践指南

Sass和Less这样的预处理器,让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性,增强了动态编写CSS的能力,从而减少重复代码,也加快了我们开发速度。

css变量_原生css 中变量的使用

原生css 中变量的使用,这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。声明变量的时候,变量名前面要加两根连词线(--),var()函数用于读取变量。

理解var let const区别

JavaScript中var、let、const区别?js中let和const都是es5版本新的命名规范,在此之前定定义一个变量只能用var。我们可以把let和const看做是为了弥补var的一些不足而新设计出来的

一个例子,变量提升和函数提升就是这么简单!

引擎在读取js代码的过程中,分为两步。第一个步骤是整个js代码的解析读取,第二个步骤是执行。在JS代码执行之前,浏览器的解析器在遇到 var 变量名 和function 整个函数 提升到当前作用域的最前面。

CSS变量使用解析

很早直接就了解到CSS变量相关的内容,奈何之前使用价值不高(很多主流浏览器不兼容),最近发现主流浏览器都已经支持了这一变化,CSS变量就像JS的变量,每个类名或者花括号就像一个function,里面的变量只有上下文以内可以获取,这就让CSS有了更多可能性。

let与var的区别,为什么要用let?

var是全局声明,let是块级作用的,只适用于当前代码块;var变量会发生变量提升,let则不会进行变量提升;var 会造成重复赋值,循环里的赋值可能会造成变量泄露至全局

ES6-变量的解构赋值

解构赋值官方解释:按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。变量的解构赋值就是一种写法,掌握了这种写法可以让我们在书写 javascript 代码时可以更加的简单,迅捷。

JS中变量的存储

JS中的变量是保存在栈内存中的:1.基本数据类型的值直接在栈内存中存储;2.值与值之间是独立存在的,修改一个变量不会影响其他变量;对象是保存到堆内存中的,每创建一个新的对象

js 交换变量值的方法总汇

这篇文章总结七种办法来交换a和b的变量值 。最最最简单的办法就是使用一个临时变量了 ,最后我的方案是利用了ES6的解构赋值语法 ,它允许我们提取数组和对象的值,对变量进行赋值

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!