一、引入

  在了解这个知识点之前,我们先来看看下面的代码,控制台都会输出什么

var foo = 1;
function bar() {
if (!foo) {
var foo = 10;
}
alert(foo);
}
bar();

  小白理解:foo是一个全局变量,值为1,当执行bar函数的时候,对1取反的结果是false,不会执行bar函数内部的if语句,所以弹出1

  小炉:不不不,你并不知道变量提升和函数提升,请看下面正确的代码执行过程

var foo;
foo = 1
function bar(){
var foo;
if(!foo){
foo = 10;
}
alert(foo);
}
bar();

  上面这段代码才是正确的执行顺序,在调用bar函数时,内部的foo产生了变量提升,提升到函数内部的顶端,又因为只是声明变量foo并未赋值,所以foo的值为undefined,取反则为true,然后if语句执行,将foo的值改为10,最后alert弹出10。这是为什么上面代码不输出1而输出10的原因,那么下面我们来介绍相关概念

二、从js预解析过程理解函数提升和变量提升

  1.预解析过程

    (1)把变量的声明提升到当前作用域的最前面,只会提升声明,不会提升赋值。

    (2)把函数的声明提升到当前作用域的最前面,只会提升声明,不会提升调用。

    (3)var fn = function(){}时,先提升var,再提升function。

    (4)提升完后其他代码位置不变

    举个栗子

    例1:
var a = 25;
function abc() {
alert(a);
var a = 10;
}
abc(); 预解析后如下:
var a;
function abc() {
var a;
alert(a);
a = 10;
}
a = 25;
abc(); //ndefined;

    从字面上理解就是变量和函数的声明会移动到移动到函数或者全局代码的开头位置,先提升var,再提升function,提升完成后不改变其他代码位置

  2.函数提升

    函数提升,只会提升函数声明,而不会提升函数表达式。

f();
fn(); // 函数表达式
var fn = function(){
console.log(1);
} // 函数声明
function f(){
console.log(0);
}

    真实的执行过程是怎么样的呢?看下面

// 函数声明
function f(){
console.log(0)
}
var fn;
f();
fn();
fn = function(){
console.log(1);
}

    所以在fn()时就会报错,说fn不是一个函数。也证明了函数提升,只会提升函数声明,而不会提升函数表达式。

  3.变量提升

console.log(a) // undefined
var a = 'hello JS' /* 在我们声明a之前为什么输出a不会报错呢? 不急,让我们接着往下看 */ num = 6;
num++;
var num;
console.log(num) // 7 为什么给一个还没有声明的变量赋值会不报错呢

  上面的代码能够正确执行的原因都是因为变量提升,将变量提升到当前作用域的最前面,由于并未赋值,所以上面第一个console会打出undefined

三、同名函数和变量提升时怎么办?

  1.函数和变量同名

    举个栗子

var a = 1;
function a(){
console.log(a)
}
console.log(a)

    上面的代码最终结果是打印出1,当函数和变量同名时,函数声明提升的优先级高于变量声明的提升。(浏览器底层的实现过程是这样的:当js解析器在遇到函数声明时,会优先将其提升到定义体顶部,其次再是var声明的变量)

  2.函数同名

    举个栗子

fn();//2
function fn() { console.log(1); }
fn();//2
var fn = 10;
fn();//报错 fn is not a function
function fn() { console.log(2); }
fn();

    函数同名时,后面声明的函数会覆盖前面的函数

  3.变量同名

    (1)全局变量和函数内部变量同名

var a = 1;
function test(x) {
alert(x);//undefined
alert(a);//undefined
var a = 2;
alert(a);//2
}
test();

    代码执行过程:首先声明变量a和test函数,然后给a赋值为1,调用函数test,因为没有给test传参,x为undefined,又因为函数内部有var声明的变量a,存在变量提升,所以先弹出a为undefined,再给a赋值为2,再弹出2。

    我们可以看到,局部变量的优先级高于同名的全局变量 。如果在函数中声明一个局部变量同名,则全局变量就会被局部变量覆盖。

    (2)同一环境下的两个同名变量,后一个会覆盖前一个

四、由函数提升和变量提升引出的作用域问题

  1.javascript是没有块级作用域的,函数是javascript中唯一拥有自身作用域的结构

  2.声明变量,实际上就是定义了一个名字,在内存中开辟了存储空间,并且初始为undefined,提升到当前作用域顶部,只提升变量,不提升所赋的值

  3.块内的变量声明和函数声明也会被提升,例如if语句。

  4.局部变量的优先级高于同名的全局变量,当在自身作用域内找不到该变量的时候,会沿着作用域链逐步向上查找,若在全局作用域内部仍找不到该变量,则会抛出异常。

五、如何取消函数提升和变量提升

  ES6中引入了块级作用域的概念,也有let、const、class等新的声明方式来避免函数提升和变量提升带来的问题(ES6语法传送门

六、总结

  1.函数声明和变量声明会被提升到作用域的顶部,只提升声明,提升完成后其他代码位置不改变

  2.当函数和变量同名时,函数声明提升的优先级高于变量声明的提升。

  3.同名变量、同名函数后声明的会覆盖前面的

  4.块内的变量声明和函数声明也会被提升,例如if语句。

  5.函数声明和函数表达式相比,函数声明使用可以更加自由,可以放在随意的位置,因为它能够整体的变量提升。而函数表达式使用就相对没有那么自由了,调用必须在声明的后面,因为变量提前只是将表达式的变量提前,并没有将表达式的内容提前。

  6.局部变量的优先级高于同名的全局变量

参考文档:https://www.cnblogs.com/nangezi/p/9105778.html

     https://blog.csdn.net/liuqiao0327/article/details/106971270/

     https://juejin.im/post/6844904179371081741#heading-0

JS——变量提升和函数提升的更多相关文章

  1. 浅谈JS变量声明和函数声明提升

    先来两个问题 很多时候,在直觉上,我们都会认为JS代码在执行时都是自上而下一行一行执行的,但是实际上,有一种情况会导致这个假设是错误的. a = 2; var a; console.log(a); 按 ...

  2. JS 变量提升与函数提升

    JS 变量提升与函数提升 JS变量提升 变量提升是指:使用var声明变量时,JS会将变量提升到所处作用域的顶部.举个简单的例子: 示例1 console.log(foo); // undefined ...

  3. js变量提升与函数提升的详细过程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. JS逻辑题 技术点: 1). 变量提升 2). 函数提升 3). 预处理 4). 调用顺序

    考查的技术点:  1). 变量提升 2). 函数提升  3). 预处理  4). 调用顺序 var c = 1; function c(c) { console.log(c); var c = 3; ...

  5. js中的变量提升和函数提升

    从上周开始,我所在的学习小组正式开始了angular的学习,angular是全面支持es6的,所以语法上和以前的angular有了很大的不同,比如变量声明时就抛弃了var,而选择了let和const: ...

  6. JavaScript系列文章:变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

  7. JavaScript:变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

  8. JavaScript: 变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

  9. ES6-LET,变量提升,函数提升

    1:let命令 ①类似var,但只在let所在代码块内有效 ②不存在变量提升 ③暂时性死区(TDZ)—有let命令时,在此命令前都没法使用此变量 ④不允许重复声明 ⑤ES6允许块级作用域任意嵌套 ⑥E ...

  10. 谈谈javascript中的变量提升还有函数提升

    在很多面试题中,经常会看到关于变量提升,还有函数提升的题目,所以我就写一篇自己理解之后的随笔,方便之后的查阅和复习. 首先举个例子 foo();//undefined function foo(){ ...

随机推荐

  1. MacBook 蓝牙无法搜索设备

    背景 经常把MacBook合上盖子就塞进包里,用时打开盖子就继续操作,偶尔会出现刚刚还在用的罗技蓝牙鼠标,重新打开笔记本后就连接不上了,而且也无法搜索到周边的蓝牙设备. 解决方案 快捷键:Option ...

  2. Linux dsh

    一.简介 目前在企业网络中越来越多的出现Linux服务器,而如何方便高效的管理大量的Linux服务器是系统管理员非常关心的一个问题,而dsh正是一个通过命令行有效地管理大量Linux的工具.   二. ...

  3. xcode开发的6个小技巧

    Xcode是iPhone和iPad开发者用来编码或者开发iOS app的IDE.Xcode有很多小巧但很有用的功能,很多时候我们可能没有注意到它们,也或者我们没有在合适的水平使用这些功能简化我们的iO ...

  4. ExtJS 4 树

    Tree Panel是ExtJS中最多能的组件之一,它非常适合用于展示分层的数据.Tree Panel和Grid Panel继承自相同的基类,所以所有从Grid Panel能获得到的特性.扩展.插件等 ...

  5. 数据结构(Splay平衡树):HAOI2008 排名系统

    [HAOI2008] 排名系统 [题目描述] 排名系统通常要应付三种请求:上传一条新的得分记录.查询某个玩家的当前排名以及返回某个区段内的排名记录.当某个玩家上传自己最新的得分记录时,他原有的得分记录 ...

  6. DataTables自定义事件

    $(document).ready(function() { var eventFired = function(type) { var n = $('#demo_info')[0]; n.inner ...

  7. python3-day1(文件操作)

    index: str.fomat() open file str.replace 一.新款str.fomat() 1.>>> '12'.zfill(5) '00012' 2.> ...

  8. 你知道src、url、href的全称吗?

    url:Uniform Resource Locator统一资源定位符 src:Source资源 href:Hypertext Reference超文本引用

  9. samba服务器配置及window网络磁盘映射

    1. Samba服务器工作原理 客户端向Samba服务器发起请求,请求访问共享目录,Samba服务器接收请求,查询smb.conf文件,查看共享目录是否存在,以及来访者的访问权限,如果来访者具有相应的 ...

  10. No.20 selenium学习之路之文件读写

    1.open 使用open打开文件后一定要记得调用文件对象的close()方法.比如可以用try/finally语句来确保最后能关闭文件. file_object = open('thefile.tx ...