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 相关文章推荐
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
原生js+css调节音量滑块
Jan 15 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动态生成JavaScript代码
2009/03/09 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
javascript实现时钟动画
2020/12/03 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Form表单及django的form表单的补充
2019/07/25 Python
django 模版关闭转义方式
2020/05/14 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
python三引号如何输入
2020/07/06 Python
Python 解析简单的XML数据
2020/07/24 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
Python 里最强的地图绘制神器
2021/03/01 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
五一服装活动方案
2014/01/11 职场文书
优质服务口号
2014/06/11 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android