浅析JavaScript中的提升

everfly 发布于2019-08-21 17:54 / 516人阅读

摘要：代码在执行时并不完全是由上到下一行一行执行的，由此产生了一个提升的问题。第二个赋值声明会被留在原地等待执行阶段。可以得知函数声明提升的优先权大于普通变量声明。

JavaScript代码在执行时并不完全是由上到下一行一行执行的，由此产生了一个提升的问题。

什么是提升

可以简单理解为：声明(变量和函数)都会被“移动”到各自作用域的最顶端,这个过程被称为提升。

具体例子看提升

下面两个例子a会log什么出来呢？

a = 233;
var a;
console.log(a)

console.log(a);
var a = 233;

“看起来”第一个例子应该log出undefined，第二个例子变量a在使用前没有先进行声明,因此会抛出ReferenceError异常。但实际上，第一个例子a输出233，第二个例子a输出undefined。

为什么？

在知道为什么之前有必要了解：JavaScript虽然是解释型语言，但在解释JavaScript代码之前首先对其进行编译的。编译阶段中的一部分工作就是找到所有的声明,并用合适的作用域将它们关联起来。

变量和函数在内的所有声明都会在任何代码被执行前首先被处理。

var a = 233;

上面的声明看起来是一个声明，而对于JavaScript而言实际上这是两个声明：var a;和a = 233;。第一个定义声明是在编译阶段进行的。第二个赋值声明会被留在原地等待执行阶段。

看回前面两个例子，第一个例子的代码会被这样处理：

var a;
a = 233;
console.log(a);

第二个例子：

var a;
console.log(a);
a = 233;

注意：只有声明本身会被提升,而赋值或其他运行逻辑会留在原地。

函数声明与函数表达式

第一个例子：

foo();
function foo() {
  console.log(a); // undefined
  var a = 233;
}

函数foo可以正常执行。
第二个例子：

foo(); // TypeError
var foo = function bar() {
  // ...
}

报错：Uncaught TypeError: foo is not a function

由此可以看到：函数声明会被提升,但是函数表达式却不会被提升。
第三个例子：

foo(); // TypeError
bar(); // ReferenceError
var foo = function bar() {
  // ...
};

这段代码经过提升后,可以理解为以下形式:

var foo;
foo(); // TypeError
bar(); // ReferenceError
foo = function() {
  var bar = ...self...
  // ...
};

由此可见：具名的函数表达式,名称标识符在赋值之前也无法在所在作用域中使用。

函数优先

既然函数声明和变量声明都会被提升，那么问题来了，重复声明的代码中的优先级是怎样的，是函数声明被提升还是变量声明被提升？
继续验证：

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

var foo尽管出现在 function foo()...的声明之前，但它是重复的声明而被忽略，因为函数声明会被提升到普通变量之前。可以得知：函数声明提升的优先权大于普通变量声明。

尽管重复的var声明会被忽略掉,但出现在后面的函数声明还是可以覆盖前面的：

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

ES6中的变量声明

ES6新增了let、const声明，它们会存在一个暂时性死区（TDZ），表现出的情况会有所不同，具体可以参考：let, const

总结

var变量声明和函数声明存在提升

函数表达式不会被提升

函数声明提升的优先权大于普通变量声明

let, const由于存在暂时性死区，表现出的情况和var声明有所不同

GPU云服务器云服务器 javascript提升 javascript中的 javaScript中的this javascript中的函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90180.html

Service Worker 浅析

摘要：可以发送通知消息以再次吸引用户并留住他们。在即时通讯等使用情形中，一条消息可将最多的有效负载传送至客户端应用。浏览器的的消息推送主要依赖，服务端消息推送传递到，然后再由推送到客户端。引言 Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。Service Worker 是 PWA 中的重要一部分。Service ...

The question 2019-08-26 13:38 评论0 收藏0
ES6浅析之路一

摘要：特点是块级作用域的特点得到明显的体现再看一个中的循环变量泄露为全局变量很明显成了全局变量。本人目前了解的还不够深比如中添加一个新的词汇暂时性死区，简称。 (个人理解ES6就是对ES5的BUG修改和升级)废话不多说今天要探讨的是 var与letECMAScript 6 入门作者：阮一峰下面是个人总结：let不允许在相同作用域内，重复声明同一个变量。let 特点是块级作用域先来看一...

BetaRabbit 2019-08-23 12:41 评论0 收藏0
【V8引擎】浅析Chrome V8引擎中的垃圾回收机制和内存泄露优化策略

摘要：一前言的垃圾回收机制使用垃圾回收机制来自动管理内存。垃圾回收器只会针对新生代内存区老生代指针区以及老生代数据区进行垃圾回收。分别对新生代和老生代使用不同的垃圾回收算法来提升垃圾回收的效率。 V8 实现了准确式 GC，GC 算法采用了分代式垃圾回收机制。因此，V8 将内存（堆）分为新生代和老生代两部分。一、前言 V8的垃圾回收机制：JavaScript使用垃圾回收机制来自动管理内存。垃...

qingshanli1988 2019-08-23 18:18 评论0 收藏0
浅析微信支付：支付验收示例和验收指引

摘要：本文是浅析微信支付系列文章的第十一篇，主要讲解支付验收示例和验收指引。为保证商户接入质量，提升交易安全及用户体验，微信支付的合作服务商在正式上线交易前，必须先根据本文指引完成验收。本文是【浅析微信支付】系列文章的第十一篇，主要讲解支付验收示例和验收指引。浅析微信支付系列已经更新十一篇了哟～，没有看过的朋友们可以看一下。浅析微信支付：如何使用沙箱环境测试浅析微信支付：下载对账单...

Cympros 2019-08-16 13:41 评论0 收藏0