阅读 275

Javascript 函数和变量提升

变量提升和函数提升基本上是面试必问题目
//先从一个面试题说起
        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.

不过结果是

image.png

我机智的认为 预想错了?

//再次测试
        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() 报错

浏览器执行结果:

image.png
没毛病!

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

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

//简单的栗子
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()
复制代码

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

image.png
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()
复制代码

执行结果

image.png

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

终于完了!

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

关注下面的标签,发现更多相似文章
评论