JavaScript中变量提升和函数提升的详解
第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升。这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下。
今天主要介绍以下几点:
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,他也对这个问题十分感兴趣:
然后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,会变得更可靠,可维护性更高:
值得一提的是,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 变量提升和函数提升内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现,故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
- 复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复。于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
- 有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
- 事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
- 这篇文章主要介绍了Javascript类型转换的规则实例解析,涉及到javascript类型转换相关知识,对本文感兴趣的朋友一起学习吧...2016-02-27
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名,通过<object>标签里的id属性设定,如下; 复制...2014-06-07
- 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,Java...2015-10-23
- 这篇文章主要介绍了JavaScript预解析,对象的的相关资料,小编觉得这篇文章写的还不错,需要的朋友可以参考下,希望能够给你带来帮助...2021-11-10
- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
- 虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS...2015-11-24
- 神马是“解释器模式”?先翻开《GOF》看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如...2014-06-07
JavaScript学习笔记整理_setTimeout的应用
下面小编就为大家带来一篇JavaScript学习笔记整理_setTimeout的应用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-03- ---恢复内容开始---1.location.href.....(1)self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 (2)this.locati...2015-10-30
- tab切换在网页中很常见,故最近总结了4种实现方法。 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-05-20