JavaScript变量提升的理解
变量提升
先说三句总结性的话:
let 的「创建」过程被提升了,但是初始化没有提升。
var 的「创建」和「初始化」都被提升了。
function 的「创建」「初始化」和「赋值」都被提升了。
所以,我们要注意,这三种变量提升,含义是不同的。
变量提升的规律
在进入一个执行上下文后,先把 var 和 function 声明的变量前置,再去顺序执行代码。
PS:作用域分为全局作用域和函数作用域,用var声明的变量,只在自己所在的所用域有效。
我们举例来看看下面的代码。
代码 1:
console.log(fn);
var fn = 1;
function fn() {
}
console.log(fn);
相当于:
var fn = undefined;
function fn() {
}
console.log(fn);
fn = 1;
console.log(fn);
打印结果:
代码 2:
console.log(i);
for (var i = 0; i < 3; i++) {
console.log(i)
}
相当于:
var i = undefined;
console.log(i);
for (i = 0; i < 3; i++) {
console.log(i);
}
打印结果:
代码 3:
var a = 1;
function fn() {
a = 2;
console.log(a)
var a = 3;
console.log(a)
}
fn();
console.log(a);
相当于:
var a = undefined;
function fn() {
var a
a = 2
console.log(a)
a = 3
console.log(a)
};
a = 1;
fn();
console.log(a);
打印结果:
声明时的重名问题
假设a
被声明为变量,紧接着a
又被声明为函数,原则是:声明会被覆盖(先来后到,就近原则)。
PS:
如果
a
已经有值,再用 var 声明是无效的。如果
a
已经有值,紧接着又被赋值,则赋值会被覆盖。
举例1:
var fn; //fn被声明为变量
function fn() {// fn被声明为function,就近原则
}
console.log(fn); //打印结果:function fn(){}
举例2:
function fn() {} //fn被声明为function,且此时fn已经被赋值,这个值就是function的对象
var fn; //fn已经在上一行被声明且已经有值, 再 var 无效,并不会重置为 undefined
console.log(fn) //打印结果:function fn(){}
既然再var无效,但是再function,是有效的:
function fn() {} //fn被声明为function,且此时fn已经有值,这个值就是function的对象
function fn() { //此时fn被重复赋值,会覆盖上一行的值
console.log('smyhvae');
}
console.log(fn)
打印结果:
函数作用域中的变量提升(两点提醒)
提醒1:
在函数作用域也有声明提前的特性:
使用var关键字声明的变量,是在函数作用域内有效,而且会在函数中所有的代码执行之前被声明
函数声明也会在函数中所有的代码执行之前执行
因此,在函数中,没有var声明的变量都会成为全局变量,而且并不会提前声明。
举例1:
var a = 1;
function foo() {
console.log(a);
a = 2; // 此处的a相当于window.a
}
foo();
console.log(a); //打印结果是2
上方代码中,foo()的打印结果是1
。如果去掉第一行代码,打印结果是Uncaught ReferenceError: a is not defined
提醒2:定义形参就相当于在函数作用域中声明了变量。
function fun6(e) {
console.log(e);
}
fun6(); //打印结果为 undefined
fun6(123);//打印结果为123
其他题目
var a = 1;
if (a > 0) {
console.log(a);
var a = 2;
}
console.log(a);
打印结果:
1
2
上方代码中,不存在块级作用域的概念。if语句中用var定义的变量,仍然是全局变量。
顺便延伸一下,用let定义的变量,是在块级作用域内有效。
JavaScript变量提升的理解的更多相关文章
- 关于JavaScript变量提升的理解
废话不说,直接上代码(这是在JavaScript面对对象编程指南上面看到的一个例子) var a=123; function f(){ alert(a); var a=1; alert(a); } f ...
- 回归基础: JavaScript 变量提升
from me: javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到. 它是JavaScr ...
- JavaScript变量提升和函数声明预解析
1.首先理解函数作用域 在JavaScript中,变量的定义并不是以代码块作为作用域的,而是以函数作用作用域的.也就是说,如果变量是在某个函数中定义的,那么它在函数以外的地方是不可见的.而如果该变量是 ...
- JavaScript变量提升 面试题
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- javascript中变量提升的理解
网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...
- 对javascript变量提升跟函数提升的理解
在写javascript代码的时候,经常会碰到一些奇怪的问题,例如: console.log(typeof hello); var hello = 123;//变量 function hello(){ ...
- 最通俗易懂的javascript变量提升
a = 'ghostwu'; var a; console.log( a ); 在我没有讲什么是变量提升,以及变量提升的规则之前, 或者你没有学习过变量提升,如果按照现有的javascript理解, ...
- JavaScript变量提升及作用域
今天在知乎看前端面试题的时候,看到这样的问题,发现自己懂的真的是太少了,看了给的例子,所以写一下自己的理解. 首先放一段代码: var v= “hello JavaScript”; alert(v); ...
- JavaScript: 变量提升和函数提升
第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...
随机推荐
- HoloLens开发手记-硬件细节 Hardware Detail
微软HoloLens是世界第一款完全无线缆的全息计算机.通过在新方式上赋予用户的全息体验,HoloLens重新定义了个人计算(Personal Computing).为了将3D全息图形固定到你周围的真 ...
- [P4318] 完全平方数
想不出什么办法能直接算的(别跟我提分块打表),不如二分答案吧:设\(f(x)=\sum_{i=1}^n [i不是"完全平方数"]\), 显然f(x)与x正相关.再结合筛法.容斥,不 ...
- [原]ZolltyMVC框架简介
ZolltyMVC框架是一款轻量级的Java应用编程框架(Java Application Framework),融合了常用的IOC/DI.MVC(注解.XML配置式.RESTful风格.模型驱动.视 ...
- yarn依赖管理工具,和fis3构建工具 gulp详细用法
看视频所了解到的,正在进行摸索. 参考:https://www.cnblogs.com/2050/p/4198792.html这篇介绍gulp的文章非常棒,唯一有一点,页面随时刷新的目前还没实现,不知 ...
- openshift上使用devicemapper
环境:openshift v3.6.173.0.5 openshift上devicemapper与官方文档中的描述略有不同,在官方文档的描述中,容器使用的lvm文件系统挂载在/var/lib/devi ...
- 数据库新秀 postgresql vs mongo 性能PK
前几天看了一篇文章<High Performance JSON PostgreSQL vs. MongoDB> 发布在Percona Live Europe 2017 作者是<Dom ...
- Lucene实战之关键字匹配多个字段
前言 当我们输入关键字时希望可以支持筛选多个字段,这样搜索内容的覆盖率就会大一些. 匹配多个字段主要用 MultiFieldQueryParser类. 单一字段搜索 QueryParser parse ...
- FTP 150 Opening BINARY mode data connection for MLSD 读取目录列表失败
这完全是因为防火墙的问题,把服务器的防火墙关闭之后,在连接,一切ok
- IDEA——错误: 找不到或无法加载主类 com.Main
https://blog.csdn.net/gxx_csdn/article/details/79059884 这篇博客非常赞!
- JavaScript一团乱,这是好事
译者按: JavaScript从简单变复杂了,作者从另一个角度看待这个问题. 原文: JavaScript’s a mess – and that’s a good thing 译者: Fundebu ...