变量提升和函数提升

最新推荐文章于 2023-01-10 11:35:37 发布

h_jQuery

最新推荐文章于 2023-01-10 11:35:37 发布

阅读量87

点赞数

分类专栏： javascript es6 jquery

本文链接：https://blog.csdn.net/h_jQuery/article/details/118469216

版权

javascript js es6 前端 jquery

javascript 同时被 3 个专栏收录

123 篇文章 0 订阅

订阅专栏

es6

73 篇文章 0 订阅

订阅专栏

jquery

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数和变量的提升</title>
</head>

<body>

    <h4>变量提升</h4>
    <p>ES6之前。函数没有块级作用域（一对{}即一个块级作用域），只有全局作用域和函数作用域</p>
    <p>变量提升是指将变量申明提升到它所在的作用域的最开始部分</p>
    <h4>函数提升</h4>
    <p>函数的创建的有两种方式：函数申明形式和函数字面量形式（即函数表达式）【只有函数声明形式才有函数提升】</p>
    <p>声明式：function fn(){do something}</p>
    <p>函数字面量：var fn= function(){do something}</p>
    <p>还有一种：函数构造法：var a= new Fun()，从技术角度来讲，也会是一个字面量形式</p>
    <p>函数提升优先级高于变量提升，且不会被同名变量声明覆盖，但是会被变量赋值后覆盖</p>
    <script>
        // 变量提升
        console.log(s);     //undefined
        var s = 12
        console.log(s);     //12
        /* 
        js执行步骤
        var s
        console.log(s);
        s=12
        console.log(s);
        */


        // 函数提升
        console.log(a);  //ƒ a() {console.log('bbbbbbbb');}
        console.log(a());       //先执行a()输出bbbbbbbb，但是因为a()没用return返回任意值，所以默认输出undefined
        var a = 10
        function a() {
            console.log('bbbbbbbb');
        }
        console.log(a);     //10
        a = 20
        console.log(a);     //20
        console.log(a());

        /*
        js的执行步骤：
        //函数提升：函数提升优先级高于变量提升
        var a=function {
            console.log('bbbbbbbb');
        }
        //变量提升：变量提升不会覆盖（同名）函数提升，只有变量在次赋值时，同名函数才会被覆盖
        var a       //这个a是变量的a而不是函数的a
        console.log(a);     //ƒ a() {console.log('bbbbbbbb');}
        console.log(a());       //bbbbbbbb,undefined
        // 变量赋值，覆盖同名函数字面量
        a=10        //这里a赋值了，所以同名函数被同名变量覆盖了
        console.log(a);     //这里输出变量值20
        a=20        //这里又重新赋值了，还是变量
        console.log(a);     //输出20
        console.log(a());       //这里报错：[TypeError] a is not a function，因为同名函数a因为变量a重新赋值，被覆盖了，所以a是一个变量

        */


    </script>
</body>

</html>

练习题

		console.log(person);
        console.log(fun);
        var person = 'jack'
        console.log(person);
        function fun() {
            console.log(person);
            var person = 'tom'
            console.log(person);

        }
        fun()
        console.log(person);

结果：
在这里插入图片描述
执行步骤：

/* 
        js执行过程：
        var fun = function () {
            console.log(person);
            var person = 'tom'
            console.log(person);
        }
        var person
        console.log(person); //u
        console.log(fun); //f
        person = 'jack'
        console.log(person);//jack
        fun()
        执行fun(){
        var person      //这是fun函数内部的person，
        console.log(person); //u
        person='tom'
        console.log(person);        //tom
        }
        console.log(person);        //jack,这里的person是外面的
        
        */