MDN Web Docs Glossary: Definitions of Web-related terms Hoisting
Hoisting is a term you will not find used in any normative规范的,标准的 specification prose散文 prior to ECMAScript® 2015 Language Specification. Hoisting was thought up as a general way of thinking about how execution contexts (specifically the creation and execution phases) work in JavaScript. However, the concept can be a little confusing at first.
Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.
Learn more
Technical example
One of the advantages of JavaScript putting function declarations into memory before it executes any code segment is that it allows you to use a function before you declare it in your code. For example:
function catName(name) { console.log("My cat's name is " + name); } catName("Tiger"); /* The result of the code above is: "My cat's name is Tiger" */
The above code snippet is how you would expect to write the code for it to work.
Now, let's see what happens when we call the function before we write it:
catName("Chloe"); function catName(name) { console.log("My cat's name is " + name); } /* The result of the code above is: "My cat's name is Chloe" */
Even though we call the function in our code first, before the function is written, the code still works. This is because of how context execution works in JavaScript.
Hoisting works well with other data types and variables. The variables can be initialized and used before they are declared.
Only declarations are hoisted
JavaScript only hoists declarations, not initializations.
If a variable is declared and initialized after using it, the value will be undefined. For example:
只有变量的声明被提升了,初始化是不会被提升的
console.log(num); // Returns undefined, as only declaration was hoisted, no initialization has happened at this stage var num; // Declaration num = 6; // Initialization
The example below only has initialization. 只有初始化,没有var声明
No hoisting happens so trying to read the variable results in ReferenceError exception.
console.log(num); // Throws ReferenceError exception num = 6; // Initialization
Initializations using let
and const
are also not hoisted.
// Example with let: a = 1; // initialization. let a; // Throws ReferenceError: Cannot access 'a' before initialization // Example with const: a = 1; // initialization. const a; // Throws SyntaxError: Missing initializer in const declaration
Below are more examples demonstrating hoisting.
// Example 1 // Only y is hoisted x = 1; // Initialize x, and if not already declared, declare it - but no hoisting as there is no var in the statement. console.log(x + " " + y); // '1 undefined' // This prints value of y as undefined as JavaScript only hoists declarations var y = 2; // Declare and Initialize y // Example 2 // No hoisting, but since initialization also causes declaration (if not already declared), variables are available. a = 'Cran'; // Initialize a b = 'berry'; // Initialize b console.log(a + "" + b); // 'Cranberry'
Technical reference
- var statement — MDN
- function statement — MDN
相关文章
- 【WEB前端】web前端获取的long长整型字段精度丢失问题,解决方案?
- 《ASP.NET MVC4 WEB编程》学习笔记------Web API 续
- Web 开发中 20 个很有用的 CSS 库 - WEB开发者
- VS2015 ASP.NET5 Web项目结构浅析
- Asp.Net Web API 2第十七课——Creating an OData Endpoint in ASP.NET Web API 2(OData终结点)
- Spring Boot 整合 Mybatis Annotation 注解的完整 Web 案例
- [Web Security] JSON Hijacking
- Nikto是一款Web安全扫描工具,可以扫描指定主机的web类型,主机名,特定目录,cookie,特定CGI漏洞,XSS漏洞,SQL注入漏洞等,非常强大滴说。。。
- Cannot change version of project facet Dynamic web
- R语言处理Web数据
- WEB免费打印控件推荐
- [Javascript] Use an Array of Promises with a For Await Of Loop
- [HTML5] Correctly Define Heading Levels of a Web Page
- loadrunner12.55:常用函数汇总说明之Web Vuser Functions(WEB)参数函数
- Nikto是一款Web安全扫描工具,可以扫描指定主机的web类型,主机名,特定目录,cookie,特定CGI漏洞,XSS漏洞,SQL注入漏洞等,非常强大滴说。。。
- Web IDE优势在哪?详解Web版数据库管理工具SQL Studio
- ASP.NET Core应用针对静态文件请求的处理[1]: 以Web的形式发布静态文件
- SAP UI5 Web Component React应用如何在Component之间跳转
- Atitit 前端测试最简化内嵌web服务器 php 与node.js 目录 1.1. php内置Web Server1 1.2. Node的2 Node的比较麻烦些。。Php更加简单
- Atitit web 之道 艾龙著 Atitit web 之道 艾龙艾提拉著v2 saa.docx Atitit web开发之道 attilax著 Web应用 1. 第1章 Web编程基础知识 (
- Atitit.跨语言标准化 web cgi api v2 saa CGI (通用网关接口) 编辑 CGI 是Web 服务器运行时外部程序的规范,按CGI 编写的程序可以扩展服务器功能。CG
- Error:JDK1.8 Cannot change version of project facet Dynamic Web Module to 3.1.
- WEB漏洞攻防 - 文件上传漏洞 - 文件上传编辑类应用场景 - Ueditor 任意文件上传漏洞
- Atitit.web三编程模型 Web Page Web Forms 和 MVC
- web API 的异常处理
- 简化基于Scala的Web API开发