作用域

JS作用域

  -作用域指一个变量的作用范围

  全局作用域

    -直接编写在script标签中的JS代码,都在全局作用域

    -全局作用域在页面打开时创建,在页面关闭时销毁

    -在全局作用域中有一个全局对象window,它代表的时一个浏览器的窗口

    ,它由浏览器创建,我们可以直接使用

  ·  例:

    

    输出结果:

    

    -在全局作用域中:

      创建的变量都会作为window对象的属性保存,

    例:

    

    输出结果:

    

    当输出window对象中没有的属性时

    

    创建的函数都会作为window对象的方法保存

    例:

    

    输出结果:

    

  var a=1与a=1;的声明区别

    变量声明提前

      -使用var关键字声明的变量,会在所有的代码执行之前被声明

    var a=1相当于在代码最上方提前声明a;也就是var a;后面再赋值

      -但是如果声明变量时不使用var关键字,则变量不会被声明提前

  function fun(){}与var fun2=function(){}的区别

    函数声明提前

      -使用函数声明形式创建的函数function 函数名(){}

        它会在所有的代码执行之前就被创建

      -使用函数表达式创建的函数不会声明提前,所以不能在声明前调用

        如果提前使用的话相当于undefined

  全局作用域中的变量都是全局变量,

    在页面的任意部分都可以访问的到

  注意:

    在全局的for,while,if等语句中声明的变量都属于全局变量  

  函数作用域

    -调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁

    -每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的

    -在函数作用域中可以访问到全局作用域的变量,

      在全局作用域中,无法访问到函数作用域的变量

    

    例:

      

    输出结果:

      

    -当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用

      如果没有则向上一级作用域中寻找

      例:

      

      输出结果:

      

      函数中的var a=1也会在本作用域中声明提前

      例:

      

      输出结果:

      

      没关键字var则不会声明提前,会设置为全局变量

      例:

         

          

        输出结果

          

  定义形参就相当于在函数或者代码块中定义了该变量

  

使用var的问题:

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
        var btns=document.querySelectorAll('button');
        for(var i=0;i<btns.length;i++){
            btns[i].addEventListener('click',function(){
                console.log('第'+i+'个按钮点击');
            })
        }
    </script>
</body>
</html>

  

  每个按钮点击都打印了一样的结果,和我们预想的不一样

  因为每个按钮绑定的函数中都没有定义i,所以会去外面定义的i,那这是后外面的i已经变成了5,所以结果就是那样了

  解决方法一:

  用let定义

for(let i=0;i<btns.length;i++){
            btns[i].addEventListener('click',function(){
                console.log('第'+i+'个按钮点击');
            })
        }

  解决方法二:

   使用闭包

for(var  i=0;i<btns.length;i++){
            (function(i){
                btns[i].addEventListener('click',function(){
                console.log('第'+i+'个按钮点击');
            })
            })(i);

结果:

视频教程:

  https://www.bilibili.com/video/BV15741177Eh

  第25节

(0)

相关推荐

  • JavaScript 之 作用域

    学习目标:能够说出Javascript的两种作用域 能够区分全局变量和局部变量 能够说出如何在作用域链中查找变量的值 1.作用域 <script> //1.javaScript作用域:就是 ...

  • js 作用域和作用域链

    一.作用域 在 Javascript 中,作用域分为 全局作用域 和 函数作用域 全局作用域: 代码在程序的任何地方都能被访问,window 对象的内置属性都拥有全局作用域. 函数作用域: 在固定的代 ...

  • C++的标识符的作用域与可见性

    下面是关于C++的标识符的作用域与可见性学习记录,仅供参考 标识符的作用域与可见性 作用域是一个标识符在程序正文中有效的区域. 作用域分类 ①函数原型作用域 ②局部作用域(快作用域) ③类作用域 ④文 ...

  • [js] 第106天 说说你对作用域链的理解

    今日试题: 说说你对作用域链的理解 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己). 前端面试每日3+1, ...

  • 终于弄明白了 Singleton,Transient,Scoped 的作用域是如何实现的

    一:背景 1. 讲故事 前几天有位朋友让我有时间分析一下 aspnetcore 中为什么向 ServiceCollection 中注入的 Class 可以做到 Singleton,Transient, ...

  • 什么是JavaScript的作用域

    作用域的概念 现代编程语言的最基本功能之一就是能够存储变量当中的值,以便于之后的使用于修改.也正是这个功能将状态带给了程序. 在JavaScript中,作用域就是一套设计良好的规则来存储变量. 简述编 ...

  • Python 变量作用域 LEGB (下)

    上篇:Python 变量作用域 LEGB (上)-- Local,Global,Builtin https://www.cnblogs.com/yvivid/p/python_LEGB_1.html ...

  • SpringBean作用域

    在配置文件中,除了可以定义Bean的属性值和相互之间的依赖关系,还可以声明Bean的作用域.例如,如果每次获取Bean时,都需要一个Bean实例,那么应该将Bean的scope属性定义为prototy ...

  • 说说Python中变量的作用域?

    公众号新增加了一个栏目,就是每天给大家解答一道Python常见的面试题,反正每天不贪多,一天一题,正好合适,只希望这个面试栏目,给那些正在准备面试的同学,提供一点点帮助! 小猿会从最基础的面试题开始, ...

  • 深入理解JavaScript作用域和作用域链

    目录 前言 作用域(Scope) 1.什么是作用域 2.全局作用域和函数作用域 3.块级作用域 作用域链 1.什么是自由变量 2.什么是作用域链 3.关于自由变量的取值 作用域与执行上下文 解释阶段: ...

  • C语言变量作用域以及栈,堆困惑!!!!

    https://m.toutiao.com/is/Jn8m7wr/ 这几天遇到一段很困惑的代码.用函数内部变量地址做返回值时候,没法正确返回变量a地址,返回的是OX0如下: 我在函数内部再加一个指针q ...

  • 作用域的理解-1

    程序var a = 2 处理时发生了啥 了解将要参与到对程序 var a = 2; 进行处理的过程中的演员们. 引擎 从头到尾负责整个 JavaScript 程序的编译及执行过程. 编译器 引擎的好朋 ...