JS---作用域、选项卡效果_作用域选项-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_53401967/article/details/127078589

本文探讨了JavaScript中的作用域概念，包括全局作用域和局部作用域，并讲解了变量的区分，如全局变量和局部变量。此外，还介绍了函数的类型，如自调用函数、回调函数和递归函数。最后，文章阐述了如何实现选项卡效果，是前端开发中的一个重要实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习内容：

一、作用域

1.全局作用域：全局变量工作的区域

2.局部作用域：局部变量工作的区域

3.补充：全局变量始终在内存中

局部变量如果没有被其他函数引用的情况下

函数调用后会被释放

二、变量

1.全局变量:函数外面定义的变量就是全局变量

2.局部变量:函数内部定义的变量就是局部变量

  var nick='吃肉'

    function test(){

        nick='hello 羊'

        var n='csdn'

        console.log(n);

    }

    function test1(){

        var n="SS"

        console.log(n);

    }

    test()

    test1()

    console.log(nick);

三、函数

1.自调用函数:

匿名函数 (function(形参){ })(实参)

Eg: (function(){console.log("我是自调用函数")})()

2.回调函数：把函数当作一个参数传到另一个函数中

      function test3(){

          console.log("我是老三");

      }

         function test4(a){

          a()

      }

      test4(test3)

3.递归函数：在函数本身调用自己

5！ 5*4*3*2*1 1！1

function recursive(n){

          if(n==1)return 1

          return n*recursive(n-1)

      }
 // n=5 5*rec(4)

  console.log(recursive(2));

四、选项卡效果

选项卡效果代码：

1.获取元素
    var spans = document.getElementsByTagName('span')
    var divs = document.querySelectorAll('div')

    通过for循环遍历 统一绑定事件

    for (var i = 0; i < spans.length; i++) {

          //自定义属性  保存i值
          spans[i].index=i

          //i=0   i=1   i=2   i=3      
          spans[i].onclick = function () {

         //样式初始化
            for(var j=0;j<spans.length;j++){
                spans[j].style.backgroundColor='gray'
                divs[j].style.display='none'
            }
            divs[this.index].style.display='block'
            this.style.backgroundColor='black'
        }
}