《JavaScript应用程序设计》一一2.7 变量提升

简介:

本节书摘来华章计算机出版社《JavaScript应用程序设计》一书中的第2章,第2.7节,作者:Eric Elliott 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.7 变量提升

变量提升是指函数中的所有变量声明会在函数执行时被“提升”至函数体顶端,这仅仅是从非技术角度来阐述的,至少从开发者看来实际效果如此。
JavaScript的执行环境构建分为声明阶段和执行阶段。在声明阶段JavaScript引擎为所有变量与函数声明创建标识符,可以将此阶段看作是对运行环境的前期配置。到了执行阶段,函数均已被定义,但所有变量的值均未定义,例如:

var x = 1;

(function () {
  console.log(x);
  var x = 2;
}());

我相信大部分人都会认为console.log(x)中x的值为1,这算是JavaScript中一个典型的代码陷阱。在声明阶段仅有函数被定义,此时在作用域内外x的值都为undefined,而在执行到console.log()语句时,内部作用域中的x虽被定义但还未被赋值,所以其值仍为undefined,实际上JavaScript是这样解释代码的:

var x = 1;

(function () {
  var x; // Declaration is hoisted and x is undefined.
  console.log(x);
  x = 2; // Initialization is still down here.
}());

函数的“提升”会与变量稍显不同,此例中,名为number的函数标识符与函数体会同时被“提升”,而相比较前面的例子,对变量x的赋值操作未被“提升”。

test('Function declaration hoisting', function () {
  function number() {
    return 1;
  }

  (function () {
    equal(number(), 2, 'Inner scope wins.');

    function number() {
      return 2;
    }
  }());

  equal(number(), 1, 'Outer scope still works.');
});

上述代码等同于:

test('Function declaration hoisted.', function () {
  function number() {
    return 1;
  }

  (function () {
    function number() {
      return 2;
    }

    equal(number(), 2, 'Inner scope wins.');
  }());

  equal(number(), 1, 'Outer scope still works.');
});

不过函数表达式则另当别论,因为它们仅仅是变量声明的另一种形式,所以其提升行为与变量提升行为等同。

test('Function expression hoisting', function () {
  function number() {
    return 1;
  }

  (function () {
    try {
      number();
    } catch (e) {
      ok(true, 'number() is undefined.');
    }

    var number = function number() {
      return 2;
    }

    equal(number(), 2, 'number() is defined now.');
  }());

  equal(number(), 1, 'Outer scope still works.');
});

在上述示例中,名为Number的变量在声明阶段会被提升,但它所对应的函数体则不会被提升,因为Number仅仅是函数表达式而非函数声明。它的赋值操作直到运行阶段才会被执行,代码等同于:

test('Function Expression Hoisted', function () {
  function number() {
    return 1;
  }

  (function () {
    var number; // Declaration initialized to undefined.

    try {
      number();
    } catch (e) {
      ok(true, 'number() is undefined.');
    }

    number = function number() {
      return 2;
    }

    equal(number(), 2, 'number() is defined now.');
  }());

  equal(number(), 1, 'Outer scope still works.');
});

注意: 这几个例子是为了告诉你,在进行与作用域有关的操作时,要谨记变量提升的规律。如果你有将所有变量声明放置在函数顶端的编码习惯,或者你对待函数向来都是先声明再使用,那么你完全可以忽略它们。

相关文章
|
10天前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域,全局变量在所有地方可访问,局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型,如字符串、数字、布尔值,可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`,将字符串转为数值。
18 1
|
10天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
10天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
10天前
|
JavaScript 前端开发
JavaScript 中如何检测一个变量是一个 String 类型?
JavaScript 中如何检测一个变量是一个 String 类型?
25 2
|
10天前
|
前端开发 测试技术
测Nuxt.js入坑,配置dev、test、pro三种环境的变量env
先下载一个cross-env模块,比较好控制环境
28 5
|
10天前
|
存储 JavaScript 前端开发
【JavaScript技术专栏】JavaScript基础入门:变量、数据类型与运算符
【4月更文挑战第30天】本文介绍了JavaScript的基础知识,包括变量(var、let、const)、数据类型(Number、String、Boolean、Undefined、Null及Object、Array)和运算符(算术、赋值、比较、逻辑)。通过实例展示了如何声明变量、操作数据类型以及使用运算符执行数学和逻辑运算。了解这些基础知识对初学者至关重要,是进阶学习JavaScript的关键。
|
1天前
|
JavaScript 前端开发 Java
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
9 0
|
9天前
|
JavaScript 前端开发
JavaScript 作用域详解:如何影响变量生命周期
JavaScript 作用域详解:如何影响变量生命周期
|
10天前
|
JavaScript 前端开发
JavaScript闭包允许内部函数访问并保留外部函数的变量,即使外部函数执行结束
【5月更文挑战第13天】JavaScript闭包允许内部函数访问并保留外部函数的变量,即使外部函数执行结束。在游戏开发中,闭包常用于创建独立状态的角色实例。例如,`createCharacter`函数生成角色,内部函数(如`getHealth`、`setHealth`)形成闭包,保存角色的属性(如生命值)。这样,每个角色实例都有自己的变量副本,不互相影响,从而实现角色系统的独立性。
21 0
|
10天前
|
存储 JavaScript 前端开发
js的变量以及运算
js的变量以及运算
14 1