function declarations are hoisted and class declarations are not 变量提升
Classes - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
Hoisting
An important difference between function declarations and class declarations is that function declarations are hoisted and class declarations are not. You first need to declare your class and then access it, otherwise code like the following will throw aReferenceError
:
const p = new Rectangle(); // ReferenceError
class Rectangle {}
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
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 moreSection
Technical exampleSection
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("Tigger");
/*
The result of the code above is: "My cat's name is Tigger"
*/
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 hoistedSection
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
var num;
num = 6;
If you declare the variable after it is used, but initialize it beforehand, it will return the value:
num = 6;
console.log(num); // returns 6
var num;
The below two examples demonstrate the same behavior.
var x = 1; // Initialize x
console.log(x + " " + y); // '1 undefined'
var y = 2; // Initialize y
// The above example is implicitly understood as this:
var x; // Declare x
var y; // Declare y
// End of the hoisting.
x = 1; // Initialize x
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y
Technical referenceSection
- JavaScript: Understanding the Weird Parts — Udemy.com Course
- var statement — MDN
- function statement — MDN
Document Tags and Contributors
function declarations are hoisted and class declarations are not 变量提升的更多相关文章
- JS中的函数声明和函数表达式的区别,即function(){}和var function(){},以及变量提升、作用域和作用域链
一.前言 Uncaught TypeError: ... is not a function function max(){}表示函数声明,可以放在代码的任何位置,也可以在任何地方成功调用: var ...
- JavaScript 风格指导(Airbnb版)
JavaScript 风格指导(Airbnb版) 用更合理的方式写 JavaScript 原文 翻译自 Airbnb JavaScript Style Guide . 目录 类型 引用 对象 数组 解 ...
- Airbnb JavaScript Style Guide
Airbnb JavaScript Style Guide() { 用更合理的方式写 JavaScript ES5 的编码规范请查看版本一,版本二. 翻译自 Airbnb JavaScrip ...
- ES6 开发规范-最佳实践
ES6 开发规范(最佳实践) 本文为开发规范,收集方便日后查看. [开发规范]https://blog.csdn.net/zzzkk2009/article/details/53171058?utm_ ...
- ES6 学习笔记(1)
恰逢换工作之际,新公司的是以 ES6 + webpack + vue 为技术栈, 正好ES6是我下个学习目标, 因此买了阮老师的 ES6标准入门,也当是支持阮老师了. 笔记将会照着这本书的阅读展开而做 ...
- Javascript 优化项目代码技巧之语言基础(一)
Javascript的弱类型以及函数作用域等规则使用编写Javascript代码极为容易,但是编写可维护.高质量的代码却变得十分困难,这个系列的文章将总结在项目开发过程中,能够改善代码可读性. ...
- ( 译、持续更新 ) JavaScript 上分小技巧(四)
后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) JavaScr ...
- Javascript 优化
Javascript 优化 作者:@gzdaijie本文为作者原创,转载请注明出处:http://www.cnblogs.com/gzdaijie/p/5324489.html 目录 1.全局变量污染 ...
- JavaScript(五):函数(闭包,eval)
1.函数的申明:三种方法: function命令 函数表达式:变量赋值 Function构造函数 //method 1: function命令 function test(){ console.log ...
随机推荐
- 2017省选集训测试赛(二十五)Problem B recollection
@(XSY)[后缀数组, 启发式合并, ST表] Description Solution 后缀数组 + 启发式合并 + Sparse Table. 这是第一次写树上后缀数组. 对以每个点为根的子树统 ...
- metasploit study
load db_trackerdb_nmap -T Aggressive -sV -n -O -v 192.168.0.107 绑定shelluse exploit/windows/smb/ms08_ ...
- 主机屋 ubuntu 14安装nginx
http://www.cnblogs.com/piscesLoveCc/p/5794926.html 安装gcc g++的依赖库 1 sudo apt-get install build-essent ...
- linux yum 安装软件
概括了部分常用的yum命令包括: 自动搜索最快镜像插件:yum install yum-fastestmirror安装yum图形窗口插件:yum install yumex 1 安装yum insta ...
- JAVA实现EXCEL公式专题(四)——字符串函数
直接上代码: /** * 项目名称: * 文件说明: ExCEL公式类型:字符串公式 * 主要特点: * 版本:1.0 * 制作人:刘晨曦 * 创建时间:2013-12-3 **/ package E ...
- WIN SERVER8更改MYSQL的datadir后,数据库启动不起来
曾经一直都没注意的问题.这次就记录下来吧.假设有相同问题的也当做一个提示 WIN SERVER8更改MYSQL的datadir后,数据库启动不起来,详细原因有二. 首先.先来看一下怎样更改 datad ...
- WPF 基础到企业应用系列5——WPF千年轮回 续前缘
一.摘要 首先非常高兴这个系列能得到大家的关注和支持,前端时间身体状况不适,所以暂停了更新,对此表示非常抱歉,以后会逐渐加快进度.只是因为这是一个非常长的系列,我也想把它写好,所以以后也会慢慢来,在这 ...
- Mysql processlist命令
Mysql processlist命令 mysqladmin -uroot -proot processlist mysql 查看当前连接数 命令: show processlist; 如果是ro ...
- HttpWebRequest用法实例
[HttpPost] public ActionResult Setmobile() { string text = "<?xml version='1.0' encoding='UT ...
- XML完成小程序
XML文档的格式如下: <?xml version="1.0" encoding="utf-8"?> <学生名单> <学生 Nam ...