JS自学-函数作用域、匿名函数

最新推荐文章于 2022-10-11 19:43:59 发布

什么时候养猫猫

最新推荐文章于 2022-10-11 19:43:59 发布

阅读量183

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_64005381/article/details/126989013

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.5作用域

1.作用域概述

通常来说，一段程序代码中所有用到的名字并不是纵有效或者可用的，而限定了这个名字的可用性代码范围就是这个名字的作用域。作用域的使用提高了程序的局部性，增强了程序的可靠性，减少了名字冲突

2.变量的作用域

在JavaScript中，根据作用域的不同，变量可分为

   // 1.全局变量 全局能用
        let num = 10
        console.log(num)

        function fn(){
            console.log(num)
        }
        fn()

        // 2.局部作用域下 变量是 局部变量
        //函数内的变量，只能给函数内部使用，函数外面不能使用
        function fun(){
            let num1=10
            console.log(num1)
            function fun1(){
                console.log(num)
                let num2 = 20
            }
            fun1()
            // console.log(num2) num2 is not defined
        }
        fun()
        // console.log(num1) num is not defined

        //3.块级变量
        
        if(true){
            let num3 = 10
            console.log(num3)
        }
        // console.log(num3) num3 is not defined

        for(let i = 0;i<5;i++){
            console.log(i)
        }
        // console.log(i) i is not defined

3.变量的作用域

变量有一个坑，特殊情况：

如果函数内部或者块级作用域，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

但是有一种情况，函数内部形参可以看做是局部变量

变量访问原则-作用域链

只要是写代码，至少有一个作用域

写在函数内部的局部作用域

如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域

根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

  let num = 10
        function fn(){
            let num = 20
            console.log(num)//20
        }
        fn()

作用域链：采取就近原则的方式来查找变量的最终的值

1.6匿名函数

具名函数

声明：function fn（）{}

调用：fn（）

匿名函数

function {}

1.匿名函数

将函数赋值给一个变量，并且通过变量名称进行调用我们将这个称为函数表达式

语法：

let fn = function（）{

//函数体

}

    // let fn = function (){
        //     console.log(111)
        // }
        // fn()

        let fn = function (x,y){
            console.log(x+y)
        }
        fn(1,2)

使用场景

目前没有，先认识

后期 web API会使用

    <button>点击我</button>
    <script>
  
        let btn = document.querySelector('burron')
        // btn.onclick= function(){
        //     alert('月薪过万')
        // }
        btn.addEventListener('click',function(){
        alert('月薪过万')
        })

2.立即执行函数

场景介绍：避免全局变量之间的污染

语法：

// 立即执行函数 立即执行，无序调用
    //  let fn =  function(){}
    //  fn()

    // 第一个小括号放的 形参 第二个小括号放的是实参
    (function(x , y) {
        console.log(x+y)
    })(1,2)

    // let num = 10
    // (function(){
    //     // 防止变量污染
    //     let num = 20
    // })()

    // (function() {} ())第一个形参 第二个实参)
    (function() {
        console.log(111)
    })

立即执行函数要有结尾分号（可以接在前面主要是与其他立即执行函数分开）