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

Document Tags and Contributors

 Last updated by: Tymofek, Aug 17, 2018, 2:22:46 PM
 
 
 


function declarations are hoisted and class declarations are not 变量提升的更多相关文章

  1. JS中的函数声明和函数表达式的区别,即function(){}和var function(){},以及变量提升、作用域和作用域链

    一.前言 Uncaught TypeError: ... is not a function function max(){}表示函数声明,可以放在代码的任何位置,也可以在任何地方成功调用: var ...

  2. JavaScript 风格指导(Airbnb版)

    JavaScript 风格指导(Airbnb版) 用更合理的方式写 JavaScript 原文 翻译自 Airbnb JavaScript Style Guide . 目录 类型 引用 对象 数组 解 ...

  3. Airbnb JavaScript Style Guide

      Airbnb JavaScript Style Guide() { 用更合理的方式写 JavaScript    ES5 的编码规范请查看版本一,版本二. 翻译自 Airbnb JavaScrip ...

  4. ES6 开发规范-最佳实践

    ES6 开发规范(最佳实践) 本文为开发规范,收集方便日后查看. [开发规范]https://blog.csdn.net/zzzkk2009/article/details/53171058?utm_ ...

  5. ES6 学习笔记(1)

    恰逢换工作之际,新公司的是以 ES6 + webpack + vue 为技术栈, 正好ES6是我下个学习目标, 因此买了阮老师的 ES6标准入门,也当是支持阮老师了. 笔记将会照着这本书的阅读展开而做 ...

  6. Javascript 优化项目代码技巧之语言基础(一)

        Javascript的弱类型以及函数作用域等规则使用编写Javascript代码极为容易,但是编写可维护.高质量的代码却变得十分困难,这个系列的文章将总结在项目开发过程中,能够改善代码可读性. ...

  7. ( 译、持续更新 ) JavaScript 上分小技巧(四)

    后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) JavaScr ...

  8. Javascript 优化

    Javascript 优化 作者:@gzdaijie本文为作者原创,转载请注明出处:http://www.cnblogs.com/gzdaijie/p/5324489.html 目录 1.全局变量污染 ...

  9. JavaScript(五):函数(闭包,eval)

    1.函数的申明:三种方法: function命令 函数表达式:变量赋值 Function构造函数 //method 1: function命令 function test(){ console.log ...

随机推荐

  1. CF917C Pollywog —— 状压DP + 矩乘优化

    C. Pollywog 题目描述 原题题目链接.题目大意为:有$x$只蝌蚪,在$n$个石头中的最左端的$x$个石头上,这$n$个石头是在同一直线上的.每一次只能最左边的一个蝌蚪进行跳跃,并且只能跳$1 ...

  2. codevs——1169 传纸条(棋盘DP)

    2008年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 小渊和小 ...

  3. lua 的一些常用概念

    1 a={} //定义了一个table   a a[10000]=1 //这里的table中只有一个元素,10000,而不是有10000个元素 2 x=math.pi //定义了x等于π print( ...

  4. xampp添加 django支持

    apache配置文件中添加 WSGIScriptAlias /chatbot1 /Users/css/djangoprojects/chatbot1/chatbot1/wsgi.pyWSGIPytho ...

  5. openTK学习

    简介 the Open Tool Kit (OpenTK), 是对 OpenGL.OpenAL.OpenCL 的跨平台的封装,使用 C# 编写,它可以用在Mono.dotNet的语言:c#.VB.C+ ...

  6. 转:使用Fabric自动化你的任务

    转:http://www.cnblogs.com/holbrook/archive/2012/03/05/2380398.html fabric是什么? Fabric是一个Python库,可以通过SS ...

  7. Linux 指令篇:系统设置--set

    功能说明:设置shell. 语 法:set [+-abCdefhHklmnpPtuvx] 补充说明:set指令能设置所使用shell的执行方式,可依照不同的需求来做设置. 参 数: -a  标示已修改 ...

  8. Linux命令之basename 命令

        用途 返回一个字符串参数的基本文件名称. 语法 basename String [ Suffix ] 描述 basename 命令读取 String 参数,删除以 /(斜杠) 结尾的前缀以及任 ...

  9. java类中,成员变量赋值第一个进行,其次是静态构造函数,再次是构造函数

    如题是结论,如果有人问你Java类的成员初始化顺序和初始化块知识就这样回答他.下面是代码: package com.test; public class TestClass{ // 成员变量赋值第一个 ...

  10. 【Excle数据透视表】如何创建非共享缓存的数据透视表

    一般情况下,利用同一个数据源创建多个数据表时,默认创建的是共享缓存的数据透视表.刷新一个数据透视表时会影响其他数据透视表的展示结果. 解决方案 创建非共享缓存的多个数据透视表 步骤一 单击工作表数据任 ...