当前位置: 代码网 > it编程>编程语言>Javascript > JavaScript中变量的作用域详解

JavaScript中变量的作用域详解

2024年05月19日 Javascript 我要评论
一、变量的分类在javascript中变量分为两种:全局变量局部变量二、变量的作用域1、局部变量的作用域局部变量:在函数内部定义的变量称为局部变量,其作用域为该函数内部,在该函数外部不能被访问。看下面

一、变量的分类

在javascript中变量分为两种:

  • 全局变量
  • 局部变量

二、变量的作用域

1、局部变量的作用域

局部变量:在函数内部定义的变量称为局部变量,其作用域为该函数内部,在该函数外部不能被访问。看下面的例子:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>局部变量作用域</title>
    <script>
        // 定义函数fn
        function fn(){
            var a=5;// 定义局部变量
            document.write(a);
        };
        // 调用函数fn
        fn();
        // 定义函数fn2
        function fn2(){
            document(a);
        };
        // 调用函数fn2
        fn2();
    </script>
</head>
<body>
    
</body>
</html>

结果:

2、全局变量

全局变量:定义在函数外部的变量称为全局变量,其作用域是整个javascript代码块。看下面的例子:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>全局变量作用域</title>
    <script>
       var number; // 全局变量
       function fn(){
          number=5;
          document.write("number的值是:"+number+"<br />");
       };
       function fn2(){
           ++number;
           document.write("number的值是:"+number+"<br />");
       }
       fn();
       fn2();
    </script>
</head>
<body>
    
</body>
</html>

结果:

注意:

a、如果在函数内定义了和全局变量相同名称的局部变量,那么在函数内部使用就近原则:即在函数内部局部变量起作用。

看下面的例子:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>全局变量作用域</title>
    <script>
       var number; // 全局变量
       /*       function fn(){
          number=5;
          document.write("number的值是:"+number+"<br />");
       };
       function fn2(){
           ++number;
           document.write("number的值是:"+number+"<br />");
       } */

       // 就近原则
       function fn(){
          var number="我是局部变量";
          document.write("number的值是:"+number+"<br />");
       };
       function fn2(){
           number="我是全局变量"
           document.write("number的值是:"+number+"<br />");
       }
       fn();
       fn2();
    </script>
</head>
<body>
    
</body>
</html>

结果:

b、全局变量window

如果在定义变量的时候没有使用var,那么默认是全局变量,无论是在函数外部还是在函数内部定义变量。看下面的例子:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>全局变量作用域</title>
    <script>
       var number; // 全局变量
       /*       function fn(){
          number=5;
          document.write("number的值是:"+number+"<br />");
       };
       function fn2(){
           ++number;
           document.write("number的值是:"+number+"<br />");
       } */

       // 就近原则
 /*       function fn(){
          var number="我是局部变量";
          document.write("number的值是:"+number+"<br />");
       };
       function fn2(){
           number="我是全局变量"
           document.write("number的值是:"+number+"<br />");
       }
       fn();
       fn2(); */

       // windows
       // 相当于window.a
       a=12;
       function fn(){
           // 相当于window.b
           b="我是window对象,是全局变量";
       };
       fn();
       document.write("a="+a+"<br />");
       document.write("b="+b+"<br />");
    </script>
</head>
<body>
    
</body>
</html>

结果:

c、应尽量避免使用全局变量,以免团队开发变量发生冲突。

以上所述是小编给大家介绍的javascript中变量的作用域,希望对大家有所帮助。在此也非常感谢大家对代码网网站的支持!

(0)

相关文章:

  • TypeScript中的函数和类你了解吗

    函数以下声明了一个函数类型,通过type来定义类型别名,void 表示没有返回值type fntype = () => void;作为参数函数可以作为参数,传递到另一个函数中…

    2024年05月19日 编程语言
  • JavaScript中splice的使用方法详解

    JavaScript中splice的使用方法详解

    splice方法可以用来对js的数组进行删除,添加,替换等操作。1. 删除功能,第一个参数为第一项位置,第二个参数为要删除几个。用法:array.splice(... [阅读全文]
  • ES6新增关键字let和const介绍

    es6新增加了两个重要的javascript关键字:let和const一、let关键字let声明的变量只在let命令所在的代码块内有效。1、基本语法2、let和var的区别var也…

    2024年05月19日 编程语言
  • Javascript的ES5,ES6的7种继承详解

    Javascript的ES5,ES6的7种继承详解

    众所周知,在es6之前,前端是不存在类的语法糖,所以不能像其他语言一样用extends关键字就搞定继承关系,需要一些额外的方法来实现继承。下面就介绍一些常用的方... [阅读全文]
  • 一起来学习JavaScript的语法基础

    1、输入输入语句2、变量变量语法扩展变量命名规范3、数据类型3.1 基本数据类型数字型 numberjavascript 数字类型既可以用来保存整数值,也可以保存小数(浮点数)。在…

    2024年05月19日 编程语言
  • JavaScript基础语法与数据类型介绍

    一、javascript语法1、区分大小写ecmascript中的一切,包括变量、函数名和操作符都是区分大小写的。例如:text和text表示两种不同的变量。2、标识符所谓标识符,…

    2024年05月19日 编程语言

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com