块级作用域（闭包）小记

希里耳湫

于 2022-05-05 17:11:03 发布

阅读量121

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/weixin_43466258/article/details/124592681

版权

<!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>Document</title>
</head>
<body>

  <button>按钮</button>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>

  <script>

// es5之前因为if和for都没有块级作用域的概念,所以很多时候，我们必须借助函数的作用域
// 来解决应用外面变量的问题
// es6有for和if的作用域
// 1.变量作用域：变量在什么范围内是可用
// 下面是一个代码块。{} 就是一个代码块，有没有{}对于定义变量来说没任何意义 内外都可以使用name
{
  var name = 'why';
  console.log(name);
}
console.log(name); // 可以使用name

// 2、没有块级作用域引起的问题:if的块级
var func;
if (true) {
      var name = 'why';
      func = function(){
        console.log(name);
      }
      // func()
    }
// 此时name的值变成no
    name = 'no';

    func();
//  console.log(name);// 可以打印

// 函数有作用域
var name = 'why'
function abc(name) { 
  console.log(name);
 }
 name = 'kob'
 abc('aaaa')

 var name = 'why'
function abc(bbb) { 
  console.log(bbb);
 }
 abc(name);
 name = 'kob'
// 最后输出name=why因为name的值先传进去了，如果 abc(name);放在后面值便是kob

// 3、没有块级作用域引起的问题: for的块级
// 因为没有作用域，所以无论点哪个按钮i都=5
// 解决方法：闭包,因为函数是一个作用域
    var btns = document.getElementsByTagName('button');
    // for(var i=0; i < btns.length; i++){
    //   // btns[i].addEventListener('click',function () { 
    //   //   console.log('第' + i + '个按钮被点击');
    //   //  })
    //   // (function (i) { 
    //   //   btns[i].addEventListener('click',function () { 
    //   //   console.log('第' + i + '个按钮被点击');
    //   //  })
    //   //  })(i)
    //   // 立即调用
    //   (function (num) { 
    //     btns[i].addEventListener('click',function () { 
    //     console.log('第' + num + '个按钮被点击');
    //    })
    //    })(i)
    //   }
      //  使用es6
      for(let i=0; i < btns.length; i++){
        btns[i].addEventListener('click',function () { 
        console.log('第' + i + '个按钮被点击');
       })
      }
  </script>
</body>
</html>```

函数有作用域这样就会使得变量先被函数调用后，再给其赋值，函数里面的变量都不会受影响

 var name = 'why'
function abc(bbb) { 
  console.log(bbb);
 }
 abc(name);
 name = 'kob'

最后输出name=why因为name的值先传进去了，如果 abc(name);放在后面值便是kob

(function (num) { 
        btns[i].addEventListener('click',function () { 
        console.log('第' + num + '个按钮被点击');
       })
       })(i)

(function(){})()是匿名函数，主要利用函数内的变量作用域，避免产生全局变量，影响整体页面环境，增加代码的兼容性。
(function(){})是一个标准的函数定义，但是没有复制给任何变量。所以是没有名字的函数，叫匿名函数。
没有名字就无法像普通函数那样随时随地调用了，所以在他定义完成后就马上调用他，后面的括号()是运行这个函数的意思

$function() {});是$ (document).ready(function(){ })的简写，最早接触的时候也说$(document).ready(function(){ })这个函数是用来取代页面中的window.onload;但是今天发现好像不是这样回事！是在做一个页面载入效果时发现的！

https://www.jb51.net/article/70836.htm

希里耳湫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
块级作用域（闭包）小记

<!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>Document&lt
复制链接

扫一扫