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 ...
随机推荐
- Swoole MySQL 连接池的实现
目录 概述 代码 扩展 小结 概述 这是关于 Swoole 入门学习的第八篇文章:Swoole MySQL 连接池的实现. 第七篇:Swoole RPC 的实现 第六篇:Swoole 整合成一个小框架 ...
- GLB串
题目描述 只要一个字符串中包含大写“GLB”,高老板就认为这是一个GLB串.现在给你一些字符串,请你帮高老板判断这些字符串是不是GLB串. 输入 首先是一个整数T,表示T行数据,每行一个字符串(只包括 ...
- poj 3140 Contestants Division [DFS]
题意:一棵树每个结点上都有值,现删掉一条边,使得到的两棵树上的数值和差值最小. 思路:这个题我直接dfs做的,不知道树状dp是什么思路..一开始看到数据规模有些后怕,后来想到long long 可以达 ...
- (入门SpringBoot)SpringBoot后台验证(八)
后台验证的作用主要是防止postman...等等工具的恶意提交,前后台都判断数据,双保险. .可以在SpringBoot传参数 加上NotNull.... //分组Default,分组的好处就是可重复 ...
- shell date获取时间值
使用Shell获取上一个月.星期的时间范围 #!/bin/bash date_today=`date -d '1 day ago' +%Y%m%d` #最近7天 date_befor_7day=` ...
- Mycat本地模式的自增长分表操作
Mycat对表t_rc_rule_monitor做分表操作 在mysql上执行(没有t_rc_rule_monitor) DROP TABLE IF EXISTS t_rc_rule_monitor; ...
- CentOS7设置DNS服务器
CentOS7设置DNS服务器 在CentOS7下,手工设置 /etc/resolv.conf 里的DNS,过了一会,发现被系统重新覆盖或者清除了.CentOS7和CentOS6下的设置DNS方法不一 ...
- 关于阿里 weex 的使用与案例
1. 阿里宣布开源Weex http://mp.weixin.qq.com/s?__biz=MzA4MjA0MTc4NQ==&mid=504089541&idx=1&sn=3a ...
- mapreduce_template
Hadoop Tutorial - YDN https://developer.yahoo.com/hadoop/tutorial/module4.html import java.io.IOExce ...
- WPF自定义依赖集合属性无法触发更新的问题
通常WPF中通过继承UserControl的来快速创建自定义控件,最近项目上需要设计一个卫星星图显示控件,最终效果如下图所示.完成过程中遇到了自定义集合依赖属性无法触发更新通知的问题,在此记录一下,方 ...