《JavaScript应用程序设计》一一2.7 变量提升-阿里云开发者社区

开发者社区> 华章出版社> 正文

《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.');
});

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

华章出版社

官方博客
官网链接