资讯专栏INFORMATION COLUMN

Javascript 函数和变量提升

王陆宽 / 526人阅读

摘要:同名变量和函数,函数会提升到最前边,变量其次,为什么不那为什么结果不是我们人工执行的呢原因是变量会被忽略,是的是忽略。。。同名变量解析完顺序是这样的忽略同名变量,声明会被提升,后边会忽略。

变量提升和函数提升基本上是面试必问题目
//先从一个面试题说起
        console.log(a)
        if (a) {
            var a = 1;
            console.log(a)
        }

        function a() {
            console.log(this);
        }
        console.log(a);

        a()
        

下面我们针对这个栗子解析一下

我们知道变量和很熟定义都会提升到作用域最前边

唯一需要确认的是变量和函数的先后顺序

我们预想 函数是用第一公民会不会提升到最前边呢?

//如果是解析完顺序是这样的
        function a() {
            console.log(this);
        }
        var a;
        console.log(a)
        if (a) {
            a = 1;
            console.log(a)
        }
        console.log(a);

        a()

按照我们预想的解析结果应该是

// undefined
// undefined
// 报错

理由 函数在上var在下,第一个console时a未赋值,其结果是undefined,if为false 只剩最后一个console也是undefined 最后a is not a function.

不过结果是

我机智的认为 预想错了?

//再次测试
        var a;
        function a() {
            console.log(this);
        }
        console.log(a)
        if (a) {
            a = 1;
            console.log(a)
        }
        console.log(a);

        a()

这样?对比一下结果
人工解析结果 :
1、a()
2、1
3、1
4、a() 报错

浏览器执行结果:

没毛病!

看到这里一切完美,不过我还是重新搜索了一些高质量文章,发现我错了,虽然执行结果是对的,不过浏览器和人工解析还是不一样的,和我们最开始预想的一样,函数优先。

既然标题说到了 变量 和 函数,我们就一块来说说

//简单的栗子
function a(){ console.log(a) }
console.log(a)
var a = 1
a()

首先上边已经说到我们预想和认为的是错的。

正确解析顺序是这样的

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

但是,这个但是很重要浏览器执行结果是:

why?这就要讲讲我所了解到的原理。

同名变量和函数,函数会提升到最前边,变量其次,为什么不那为什么结果不是我们人工执行的undefined呢?原因是 变量会被忽略,是的是忽略。。。
function a(){ console.log(a) }
var a;//忽略
console.log(a) //打印函数本身
a = 1
a()// a is not a function

完美!

还有呢?是的还有同名变量是怎样的顺序,同名函数是怎样的顺序。

同名变量
console.log(a)
var a = 1
console.log(a)
var a = 2
console.log(a)

//解析完顺序是这样的

var a;
var a; //忽略
console.log(a) // undfined
a = 1
console.log(a) //1
a = 2
console.log(a)//2

*同名变量,声明会被提升,后边会忽略。

同名函数
function a(){console.log(1)}
console.log(a)
function a(){console.log(2)}
console.log(a)
a()

//解析完
function a(){console.log(1)}
function a(){console.log(2)}
console.log(a)
console.log(a)
a()

执行结果

我想你已经猜到了,同名函数会被覆盖。

终于完了!

您的点赞是我继续下去的动力,谢谢!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100823.html

相关文章

  • JavaScript 变量声明提升

    摘要:输出的结果为输出的结果为提升后输出的结果为重新定义了变量输出的结果为如果定义了相同的函数变量声明,后定义的声明会覆盖掉先前的声明,看如下代码输出练习的值是多少的值是多少第二题的解析请看这里参考资料文章文章中文版链接文章推荐文章变量提升 JavaScript 变量声明提升 原文链接 一个小例子 先来看个例子: console.log(a); // undefined var a =...

    fireflow 评论0 收藏0
  • javascript声明提升

    摘要:但是碰到声明提升,这种想法就会被打破。声明一个函数进行相应的操作,会得到函数声明提升的结果。由此可以发现变量和函数的声明都会被提升在其他代码的前面执行。一个普通块内部的函数声明通常会被提升到所在的作用域的顶部。的创建初始化和赋值均会被提升。 Javascript声明提升 在分析声明提升之前,我认为有必要知道的两点: 一、引擎查询变量的两种方式 引擎查询变量的方式可以分为LHS和RHS两...

    evin2016 评论0 收藏0
  • 【6】JavaScript 函数高级——执行上下文与执行上下文栈、变量提升(图解+典型实例分析)

    摘要:函数和变量相比,会被优先提升。这意味着函数会被提升到更靠前的位置。仅提升声明,而不提升初始化。 JavaScript 函数高级——执行上下文与执行上下文栈(图解+典型实例分析) 变量提升与函数提升 变量声明提升 通过 var 定义(声明)的变量,在定义语句之前就可以访问到 值:undefined /* 面试题 : 输出 undefined */ var a = 3 ...

    niuxiaowei111 评论0 收藏0
  • ES6 变量作用域与提升变量的生命周期详解

    摘要:不同的是函数体并不会再被提升至函数作用域头部,而仅会被提升到块级作用域头部避免全局变量在计算机编程中,全局变量指的是在所有作用域中都能访问的变量。 ES6 变量作用域与提升:变量的生命周期详解从属于笔者的现代 JavaScript 开发:语法基础与实践技巧系列文章。本文详细讨论了 JavaScript 中作用域、执行上下文、不同作用域下变量提升与函数提升的表现、顶层对象以及如何避免创建...

    lmxdawn 评论0 收藏0
  • JavaScript变量提升

    摘要:发布自的博客,欢迎大家转载,但是要注意注明出处。另外,该文章收纳在的个人的知识整理仓库,欢迎投稿介绍变量提升是人们对执行上下文工作方式的一种认识,并不是官方给出的改变从字面上理解,变量提升的意思是变量和函数的声明会在物理层移动到作用域的最前 发布自Kindem的博客,欢迎大家转载,但是要注意注明出处。另外,该文章收纳在Kindem的个人的 IT 知识整理仓库,欢迎 Star、Fork、...

    yzd 评论0 收藏0
  • 译: 函数提升提升面试的相关问题

    摘要:函数提升在里有两种方式创建函数,通过函数声明和函数表达式。函数声明用指定的参数来定义函数。提示不要在中进行函数声明。问题输出两个都是用函数声明的函数,将被提升到的局部作用域顶端。函数本身将作为函数声明在全局范围内提升。 作者关于提升的话题,总共有两篇。(后来又有一个讨论篇),再次搬过来。水平有限,如果翻译的不准确请包涵,并去看原文。下面开始: 这是我之前的关于提升的文章,标题为《用le...

    wuaiqiu 评论0 收藏0

发表评论

0条评论

王陆宽

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<