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


Posted in Javascript onAugust 07, 2020

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

今天主要介绍以下几点:

1. 变量提升

2. 函数提升

3. 为什么要进行提升

4. 最佳实践

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

1. 变量提升

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

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

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

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

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

// 预编译之后
function hoistVariable() {
  var foo;

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

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

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

var foo = 3;

function hoistVariable() {
  var foo = foo || 5;

  console.log(foo); // 5
}

hoistVariable();

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

var foo = 3;

// 预编译之后
function hoistVariable() {
  var foo;

  foo = foo || 5;

  console.log(foo); // 5
}

hoistVariable();

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

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

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

// 预编译之后
function hoistVariable() {
  var foo;

  foo = 3;
  
  {
    foo = 5;
  }

  console.log(foo); // 5
}

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(); // 2

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

  foo(); // 1

  function foo() {
    console.log(2);
  }

  foo(); // 1
}

hoistFunction();

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

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

// 预编译之后
function hoistFunction() {
  var foo;

  foo = function foo() {
    console.log(2);
  }

  foo(); // 2

  foo = function() {
    console.log(1);
  };

  foo(); // 1

  foo(); // 1
}

hoistFunction();

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

var foo = 3;

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

  foo = 5;
  
  console.log(foo); // 5

  function foo() {}
}

hoistFunction();
console.log(foo);   // 3

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

// 预编译之后

var foo = 3;

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

hoistFunction();
console.log(foo);  // 3

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

3. 为什么要进行提升

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

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

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

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

最后,Brendan Eich给出了答案:

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

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

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

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

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

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

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还对变量提升和函数提升做了总结:

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

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

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

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中变量提升和函数提升的详解的文章就介绍到这了,更多相关JavaScript 变量提升和函数提升内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
extjs form textfield的隐藏方法
Dec 29 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
在Vue中使用HOC模式的实现
Aug 23 Javascript
用vue写一个日历
Nov 02 Javascript
javascript中正则表达式语法详解
Aug 07 #Javascript
vue 子组件修改data或调用操作
Aug 07 #Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 #Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 #Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 #Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 #Javascript
javascript解析json格式的数据方法详解
Aug 07 #Javascript
You might like
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
jquery 指南/入门基础
2007/11/30 Javascript
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
vue实现分页组件
2020/06/16 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
python实现烟花小程序
2019/01/30 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
python输入错误后删除的方法
2019/10/12 Python
python 实现矩阵按对角线打印
2019/11/29 Python
通过实例学习Python Excel操作
2020/01/06 Python
pytorch数据预处理错误的解决
2020/02/20 Python
Python如何给函数库增加日志功能
2020/08/04 Python
师德师风自我剖析材料
2014/09/27 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
2014年标准化工作总结
2014/12/17 职场文书
委托函范文
2015/01/29 职场文书