【JavaScript】13_window对象,提升和立即执行函数

135 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第15天,点击查看活动详情

12、window对象

Window对象

  • 在浏览器中,浏览器为我们提供了一个window对象,可以直接访问
  • window对象代表的是浏览器窗口,通过该对象可以对浏览器窗口进行各种操作 除此之外window对象还负责存储JS中的内置对象和浏览器的宿主对象
  • window对象的属性可以通过window对象访问,也可以直接访问
  • 函数就可以认为是window对象的方法

向window对象中添加的属性会自动成为全局变量

var 用来声明变量,作用和let相同,但是var不具有块作用域

  • 在全局中使用var声明的变量,都会作为window对象的属性保存
  • 使用function声明的函数,都会作为window的方法保存
  • 使用let声明的变量不会存储在window对象中,而存在一个秘密的小地方(无法访问)
  • var虽然没有块作用域,但有函数作用域

向window对象中添加的属性会自动成为全局变量

<script>
    // alert(window)
    // window.alert(123)
    // window.console.log("哈哈")
​
    window.a = 10
    // console.log(a)
​
    var b = 20 // window.b = 20
    function fn(){
        alert('我是fn')
    }
​
    // console.log(window.b)
    // window.fn()
​
    // let c = 33
    window.c = 44
    // console.log(c)
​
    function fn2(){
        // var d = 10 // var虽然没有块作用域,但有函数作用域
        d = 10 // 在局部作用域中,如果没有使用var或let声明变量,则变量会自动成为window对象的属性 也就是全局变量
    }
    fn2()
    console.log(d)
</script>

13、提升

变量var的提升

  • 使用var声明的变量,它会在所有代码执行前被声明

所以我们可以在变量声明前就访问变量(不推荐,不好维护)

函数的提升

  • 使用函数声明创建的函数,会在其他代码执行前被创建

所以我们可以在函数声明前调用函数

let的提升不显示

let声明的变量实际也会提升,但是在赋值之前解释器禁止对该变量的访问

        <script>
            console.log(b)
​
            let b = 10
​
            // fn()
​
            function fn(){
                alert("我是fn函数~")
            }
​
            // fn2()
            // var fn2 = function(){
​
            // }
            // console.log(a)
​
            var a = 10
            // a = 10 // window.a = 10
        </script>

14、立即执行函数

立即执行函数(IIFE)

  • 立即是一个匿名的函数,并它只会调用一次

  • 可以利用IIFE来创建一个一次性的函数作用域,避免变量冲突的问题

在开发中应该尽量减少直接在全局作用域中编写代码!

所以我们的代码要尽量编写的局部作用域

如果使用let声明的变量,可以使用{}来创建块作用域

    <script>
        {
            let a = 10
        }
​
        {
            let a = 20
        }
​
        // function fn(){
        //     var a = 10
        // }
        // fn()
        
        (function(){
            let a = 10
            console.log(111)
        }());
​
​
        (function(){
            let a = 20
            console.log(222)
        }())
    </script>