【你不知道的javaScript 上卷 笔记3】javaScript中的声明提升表现

时间:2023-02-23 14:52:45
console.log( a );
var a = 2;

执行输出undefined

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

执行输出2

说明:javaScript 运行时在编译器阶段会最先处理var a;也就是变量被提升

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

执行输出undefined,执行foo();时找到了函数的声明,但实际代码写在foo()的后面。说明函数声明会被提升,函数作用域里变量也会被提升

foo();
var foo = function bar() {
console.log(a)
var a =2
};

执行输出TypeError: foo is not a function,说明函数表达式不会被提升,foo() 由于对 undefined进行调用抛出TypeError异常

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

执行输出1,说明虽然函数和变量都能被提升,但是函数声明提升优先于变量声明提升

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

执行输出3,后面的函数声明会覆盖前面的函数声明

总结

var 变量声明和函数声明其实跟javaScript运行原理有关,在javaScript运行之前会先进行编译,在编译阶段会先为变量和函数根据作用域规则开辟内存空间并初始化变量为undefined,而函数是初始化函数变量并且直接赋值函数体,以便在执行的时候方便查找和存储。

let , const到底有没有有变量提升?

console.log(a)
let a=2

输出:ReferenceError: Cannot access 'a' before initialization,表明变量没有被定义,不能在变量为初始化之前使用。其实从这句话看来js是找到了变量a的,但a还没有被初始化;这样看来,let其实也有变量提升(在我理解上来说,提升就是先为变量创造内存空间),js 处理let声明变量的过程:

{
let x = 1
x = 2
}

1、查找let声明的变量x,并在作用域中创建变量,不进行初始化

2、执行代码x=1,初始化为1

3、执行x = 2赋值为2

let 特性

let a=2
let a=3
console.log(a)

输出:SyntaxError: Identifier 'a' has already been declared,不能重复定义变量

参考资料

《你不知道的javaScript 上卷》第四章 变量提升

【你不知道的javaScript 上卷 笔记3】javaScript中的声明提升表现的更多相关文章

  1. 你不知道的JavaScript上卷笔记

    你不知道的JavaScript上卷笔记 前言 You don't know JavaScript是github上一个系列文章   初看到这一标题的时候,感觉怎么老外也搞标题党,用这种冲突性比较强的题目 ...

  2. 【你不知道的javaScript 上卷 笔记2】 javaScript 的作用域规则

    一.什么是词法作用域? 词法作用域是在定义词法阶段的作用域,就是由代码变量和作用域块写在哪里决定的,基本上词法分析器在处理代码时会保持作用域不变. 二.词法作用域特点 完全由写代码期间函数所声明的位置 ...

  3. Javascript学习笔记1 javascript的特点

    ..对于网页而言,Javascript无处不在,对于英语不好的人它简直是噩梦般的存在,但形式所逼,今天开始着手学习!希望自己能坚持下去.从什么地方着手,我的目标是从大处着眼,从应用着眼,不抠细节,反正 ...

  4. JavaScript学习笔记(4)——JavaScript语法之变量

    一.变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume). 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做 ...

  5. 1.2(JavaScript学习笔记)JavaScript HTML DOM

    一.DOM DOM全称为document object model(文档对象模型). 此处的文档指当前HTML文档,对象指HTML标签. 当网页被加载时,浏览器会创建页面的文档对象模型. 下面结合具体 ...

  6. Javascript学习笔记3 Javascript与BOM简介

    什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象 ...

  7. 【你不知道的javaScript 上卷 笔记7】javaScript中对象的[[Prototype]]机制

    [[Prototype]]机制 [[Prototype]]是对象内部的隐试属性,指向一个内部的链接,这个链接的作用是:如果在对象上没有找到需要的属性或者方法引用,引擎就 会继续在 [[Prototyp ...

  8. 【你不知道的javaScript 上卷 笔记6】javaScript中的对象相关内容

    一.创建一个对象的语法 var myObj = { key: value // ... };//字面量 var myObj = new Object(); //new myObj.key = valu ...

  9. 【你不知道的javaScript 上卷 笔记5】javaScript中的this词法

    function foo() { console.log( a ); } function bar() { var a = 3; foo(); } var a = 2; bar(); 上面这段代码为什 ...

随机推荐

  1. .Net中的AOP读书笔记系列之AOP介绍

    返回<.Net中的AOP>系列学习总目录 本篇目录 AOP是什么? Hello,World! 小结 本系列的源码本人已托管于Coding上:点击查看,想要注册Coding的可以点击该连接注 ...

  2. CSS教程&colon;div垂直居中的N种方法&lbrack;转&rsqb;

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  3. Yii源码阅读笔记(二)

    接下来阅读BaseYii.php vendor/yiisoft/yii2/BaseYii.php—— namespace yii; use yii\base\InvalidConfigExceptio ...

  4. Android虚拟环境的工具集Genymotion完整安装教程

    Genymotion提供Android虚拟环境的工具集.相信很多Android开发者一定受够了速度慢.体验差效率及其地下的官方模拟器了.如果你没有物理机器,又不想忍受官方模拟器的折磨,Genymoti ...

  5. GO实例3 Slice append打印

    package main import "fmt" func main(){ ]int slice:=array[:] slice[]='a' slice[]='b' s1:=ap ...

  6. 在网页标题栏title加入图标?

    方法一:制作一个ico格式的图片,将图片命名为favicon.ico,像素大小为16*16,所使用的颜色不得超过16色,然后再把favicon.ico放到网站的根目录下就行了.这样的话浏览器会不停的搜 ...

  7. DesignModeler&amp&semi;nbsp&semi;GestureRecgin…

    DesignModeler : 设计模式     GestureRecginzer:手势识别 作者:韩俊强 原创版权地址:http://blog.sina.com.cn/s/blog_814ecfa9 ...

  8. 深入理解JavaScript作用域和作用域链

    前言 JavaScript 中有一个被称为作用域(Scope)的特性.虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,本文我会尽我所能用最简单的方式来解释作用域和作用域链,希望大家有所收获! ...

  9. Charles 使用教程

    Charles 的简介 如何安装 Charles 将 Charles 设置成系统代理 Charles 主界面介绍 过滤网络请求 截取 iPhone 上的网络封包 截取 Https 通讯信息 模拟慢速网 ...

  10. 使用C&num;读取网站相对路径文件夹下所有图片

    public JsonResult GetCourseInitCover() { //设置相对路径 string imgurl = Server.MapPath("~/Content/ima ...