第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升。这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下。

今天主要介绍以下几点:

1. 变量提升

2. 函数提升

3. 为什么要进行提升

4. 最佳实践

那么,我们就开始进入主题吧。

1. 变量提升

通常JS引擎会在正式执行之前先进行一次预编译,在这个过程中,首先将变量声明及函数声明提升至当前作用域的顶端,然后进行接下来的处理。(注:当前流行的JS引擎大都对源码进行了编译,由于引擎的不同,编译形式也会有所差异,我们这里说的预编译和提升其实是抽象出来的、易于理解的概念)

下面的代码中,我们在函数中声明了一个变量,不过这个变量声明是在if语句块中:

function hoistVariable() {
if (!foo) {
var foo = 5;
} console.log(foo); //
} hoistVariable();

运行代码,我们会发现foo的值是5,初学者可能对此不甚理解,如果外层作用域也存在一个foo变量,就更加困惑了,该不会是打印外层作用域中的foo变量吧?答案是:不会,如果当前作用域中存在此变量声明,无论它在什么地方声明,引用此变量时就会在当前作用域中查找,不会去外层作用域了。

那么至于说打印结果,这要提到预编译机制了,经过一次预编译之后,上面的代码逻辑如下:

// 预编译之后
function hoistVariable() {
var foo; if (!foo) {
foo = 5;
} console.log(foo); //
} hoistVariable();

是的,引擎将变量声明提升到了函数顶部,初始值为undefined,自然,if语句块就会被执行,foo变量赋值为5,下面的打印也就是预期的结果了。

类似的,还有下面一个例子:

var foo = 3;

function hoistVariable() {
var foo = foo || 5; console.log(foo); //
} hoistVariable();

foo || 5这个表达式的结果是5而不是3,虽然外层作用域有个foo变量,但函数内是不会去引用的,因为预编译之后的代码逻辑是这样的:

var foo = 3;

// 预编译之后
function hoistVariable() {
var foo; foo = foo || 5; console.log(foo); //
} hoistVariable();

如果当前作用域中声明了多个同名变量,那么根据我们的推断,它们的同一个标识符会被提升至作用域顶部,其他部分按顺序执行,比如下面的代码:

function hoistVariable() {
var foo = 3; {
var foo = 5;
} console.log(foo); //
} hoistVariable();

由于JavaScript没有块作用域,只有全局作用域和函数作用域,所以预编译之后的代码逻辑为:

// 预编译之后
function hoistVariable() {
var foo; foo = 3; {
foo = 5;
} console.log(foo); //
} hoistVariable();

2. 函数提升

相信大家对下面这段代码都不陌生,实际开发当中也很常见:

function hoistFunction() {
foo(); // output: I am hoisted function foo() {
console.log('I am hoisted');
}
} hoistFunction();

为什么函数可以在声明之前就可以调用,并且跟变量声明不同的是,它还能得到正确的结果,其实引擎是把函数声明整个地提升到了当前作用域的顶部,预编译之后的代码逻辑如下:

// 预编译之后
function hoistFunction() {
function foo() {
console.log('I am hoisted');
} foo(); // output: I am hoisted
} hoistFunction();

相似的,如果在同一个作用域中存在多个同名函数声明,后面出现的将会覆盖前面的函数声明:

function hoistFunction() {
function foo() {
console.log(1);
} foo(); // output: 2 function foo() {
console.log(2);
}
} hoistFunction();

对于函数,除了使用上面的函数声明,更多时候,我们会使用函数表达式,下面是函数声明和函数表达式的对比:

// 函数声明
function foo() {
console.log('function declaration');
} // 匿名函数表达式
var foo = function() {
console.log('anonymous function expression');
}; // 具名函数表达式
var foo = function bar() {
console.log('named function expression');
};

可以看到,匿名函数表达式,其实是将一个不带名字的函数声明赋值给了一个变量,而具名函数表达式,则是带名字的函数赋值给一个变量,需要注意到是,这个函数名只能在此函数内部使用。我们也看到了,其实函数表达式可以通过变量访问,所以也存在变量提升同样的效果。

那么当函数声明遇到函数表达式时,会有什么样的结果呢,先看下面这段代码:

function hoistFunction() {
foo(); // var foo = function() {
console.log(1);
}; foo(); // function foo() {
console.log(2);
} foo(); //
} hoistFunction();

运行后我们会发现,输出的结果依次是2 1 1,为什么会有这样的结果呢?

因为JavaScript中的函数是一等公民,函数声明的优先级最高,会被提升至当前作用域最顶端,所以第一次调用时实际执行了下面定义的函数声明,然后第二次调用时,由于前面的函数表达式与之前的函数声明同名,故将其覆盖,以后的调用也将会打印同样的结果。上面的过程经过预编译之后,代码逻辑如下:

// 预编译之后
function hoistFunction() {
var foo; foo = function foo() {
console.log(2);
} foo(); // foo = function() {
console.log(1);
}; foo(); // foo(); //
} hoistFunction();

我们也不难理解,下面的函数和变量重名时,会如何执行:

var foo = 3;

function hoistFunction() {
console.log(foo); // function foo() {} foo = 5; console.log(foo); // function foo() {}
} hoistFunction();
console.log(foo); //

我们可以看到,函数声明被提升至作用域最顶端,然后被赋值为5,而外层的变量并没有被覆盖,经过预编译之后,上面代码的逻辑是这样的:

// 预编译之后

var foo = 3;

function hoistFunction() {
var foo; foo = function foo() {}; console.log(foo); // function foo() {} foo = 5; console.log(foo); //
} hoistFunction();
console.log(foo); //

所以,函数的优先权是最高的,它永远被提升至作用域最顶部,然后才是函数表达式和变量按顺序执行,这一点要牢记。

3. 为什么要进行提升

关于为什么进行变量提升和函数提升,这个问题一直没有明确的答案,不过最近读到Dmitry Soshnikov之前的一篇文章时,多少了解了一些,下面是Dmitry Soshnikov早些年的twitter,他也对这个问题十分感兴趣:

然后Jeremy Ashkenas想让Brendan Eich聊聊这个话题:

最后,Brendan Eich给出了答案:

大致的意思就是:由于第一代JS虚拟机中的抽象纰漏导致的,编译器将变量放到了栈槽内并编入索引,然后在(当前作用域的)入口处将变量名绑定到了栈槽内的变量。(注:这里提到的抽象是计算机术语,是对内部发生的更加复杂的事情的一种简化。)

然后,Dmitry Soshnikov又提到了函数提升,他提到了相互递归(就是A函数内会调用到B函数,而B函数也会调用到A函数):

随后Brendan Eich很热心的又给出了答案:

Brendan Eich很确定的说,函数提升就是为了解决相互递归的问题,大体上可以解决像ML语言这样自下而上的顺序问题。

这里简单阐述一下相互递归,下面两个函数分别在自己的函数体内调用了对方:

// 验证偶数
function isEven(n) {
if (n === 0) {
return true;
}
return isOdd(n - 1);
} console.log(isEven(2)); // true // 验证奇数
function isOdd(n) {
if (n === 0) {
return false;
}
return isEven(n - 1);
}

如果没有函数提升,而是按照自下而上的顺序,当isEven函数被调用时,isOdd函数还未声明,所以当isEven内部无法调用isOdd函数。所以Brendan Eich设计了函数提升这一形式,将函数提升至当前作用域的顶部:

// 验证偶数
function isEven(n) {
if (n === 0) {
return true;
}
return isOdd(n - 1);
} // 验证奇数
function isOdd(n) {
if (n === 0) {
return false;
}
return isEven(n - 1);
} console.log(isEven(2)); // true

这样一来,问题就迎刃而解了。

最后,Brendan Eich还对变量提升和函数提升做了总结:

大概是说,变量提升是人为实现的问题,而函数提升在当初设计时是有目的的。

至此,关于变量提升和函数提升,相信大家已经明白其中的真相了。

4. 最佳实践

理解变量提升和函数提升可以使我们更了解这门语言,更好地驾驭它,但是在开发中,我们不应该使用这些技巧,而是要规范我们的代码,做到可读性和可维护性。

具体的做法是:无论变量还是函数,都必须先声明后使用。下面举了简单的例子:

var name = 'Scott';
var sayHello = function(guest) {
console.log(name, 'says hello to', guest);
}; var i;
var guest;
var guests = ['John', 'Tom', 'Jack']; for (i = 0; i < guests.length; i++) {
guest = guests[i]; // do something on guest sayHello(guest);
}

如果对于新的项目,可以使用let替换var,会变得更可靠,可维护性更高:

let name = 'Scott';
let sayHello = function(guest) {
console.log(name, 'says hello to', guest);
}; let guests = ['John', 'Tom', 'Jack']; for (let i = 0; i < guests.length; i++) {
let guest = guests[i]; // do something on guest sayHello(guest);
}

值得一提的是,ES6中的class声明也存在提升,不过它和let、const一样,被约束和限制了,其规定,如果再声明位置之前引用,则是不合法的,会抛出一个异常。

所以,无论是早期的代码,还是ES6中的代码,我们都需要遵循一点,先声明,后使用。

本文完。

参考资料:

http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

http://dmitrysoshnikov.com/notes/note-4-two-words-about-hoisting/

https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

http://stackoverflow.com/questions/7506844/javascript-function-scoping-and-hoisting

JavaScript: 变量提升和函数提升的更多相关文章

  1. JavaScript系列文章:变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

  2. JavaScript:变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

  3. 谈谈javascript中的变量提升还有函数提升

    在很多面试题中,经常会看到关于变量提升,还有函数提升的题目,所以我就写一篇自己理解之后的随笔,方便之后的查阅和复习. 首先举个例子 foo();//undefined function foo(){ ...

  4. 对javascript变量提升跟函数提升的理解

    在写javascript代码的时候,经常会碰到一些奇怪的问题,例如: console.log(typeof hello); var hello = 123;//变量 function hello(){ ...

  5. JS 变量提升与函数提升

    JS 变量提升与函数提升 JS变量提升 变量提升是指:使用var声明变量时,JS会将变量提升到所处作用域的顶部.举个简单的例子: 示例1 console.log(foo); // undefined ...

  6. JS——变量提升和函数提升

    一.引入 在了解这个知识点之前,我们先来看看下面的代码,控制台都会输出什么 var foo = 1; function bar() { if (!foo) { var foo = 10; } aler ...

  7. js中变量提升和函数提升

    变量提升和函数提升的总结 我们在学习JavaScript时,会遇到变量提升和函数提升的问题,为了理清这个问题,现做总结如下,希望对初学者能有所帮助 我们都知道 var 声明的变量有变量提升,而 let ...

  8. ES6-LET,变量提升,函数提升

    1:let命令 ①类似var,但只在let所在代码块内有效 ②不存在变量提升 ③暂时性死区(TDZ)—有let命令时,在此命令前都没法使用此变量 ④不允许重复声明 ⑤ES6允许块级作用域任意嵌套 ⑥E ...

  9. js变量提升与函数提升的详细过程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. 前端学习(十二)js数据类型(笔记)

    选项卡:        for循环 for(初始值,条件,自增){}    for(var i=0; i<9;i++){} 几个按钮对应相同个内容!!! -------------------- ...

  2. isPrototypeOf,hasOwnProperty

    在看jquery源码的过程中,了解到isPrototypeOf属性.此属性只是Object.prototype的自有属性,即: Object.prototype.hasOwnProperty('isP ...

  3. webpack配置(使用react,es6的项目)

    const path = require('path');const webpack = require('webpack');const HtmlWebpackPlugin = require('h ...

  4. Laravel5.5添加新路由文件并制定规则

    Laravel5.5里面有4个默认的路由文件,其中web.php是默认路由文件,如果需要添加其他路由文件,按照以下步骤进行. 此处以添加网站home前端路由举例,我已经先在/app/Http/Cont ...

  5. Nginx---配置系统(自己总结)

    1.Nginx配置系统 Nginx的配置系统   由  一个主配置文件  和  其他一些辅助的配置文件  构成: 这些文件均为纯文本文件,全部位于nginx安装目录下的conf目录下: Nginx配置 ...

  6. MySQL - primary key PK unique key,key PK index

    primary key PK unique key 总结 primary key = unique + not null 主键不能为空每个字段值都不重复,unique可以为空,非空字段不重复 uniq ...

  7. Shiro学习(20)无状态Web应用集成

    在一些环境中,可能需要把Web应用做成无状态的,即服务器端无状态,就是说服务器端不会存储像会话这种东西,而是每次请求时带上相应的用户名进行登录.如一些REST风格的API,如果不使用OAuth2协议, ...

  8. bzoj1047题解

    [解题思路] (p.s.:刚看的时候一脸懵逼..没看见N已经给定了,还以为要用某些高明的方法..果然还是太naive了..) 两遍预处理,第一遍处理出f[i][j][0/1]表示第i行从j-n+1~j ...

  9. python:列表、元组和字典

    1.1.特点:   任意对象的有序集合   通过偏移量读取   可变长度,异构以及任意嵌套   属于可变序列的分类   对象引用数组:当把一个对象赋给一个数据结构元素或变量名时,python总会存储对 ...

  10. 关于performSelector调用和直接调用区别

    下面两段代码都在主线程中运行,我们在看别人代码时会发现有时会直接调用,有时会利用performSelector调用,今天看到有人在问这个问题,我便做一下总结, [delegate imageDownl ...