zoukankan      html  css  js  c++  java
  • js声明变量的三种方式

    JS 声明变量的三种方式

    (1)使用变量步骤:a.声明-->b.赋值-->3.调用

    正确用法:

    <script type="text/javascript">
       // 方式一:声明和赋值不分离
       var correctUsage = "正确使用变量的方式一";
        alert(correctUsage); //能够弹出来该变量所对应的值
        // 方式二:声明和赋值分离
        var correctUsage2;
        correctUsage2 = "正确使用变量的方式二";
        alert(correctUsage2);
    </script> 

    错误用法:

    <script type="text/javascript">
       var correctUsage;
        // 错误一: 没有赋值就使用
        alert(correctUsage); //underfined
        // 错误二:没有赋值就拼接字符串
        correctUsage += "没有赋值就改值";
        alert(correctUsage); //undefined没有赋值就改值
    </script> 

    (2)变量的产生与死亡

       已使用var关键词声明表里为例

      2.1 声明在函数外部的变量

       产生:js加载到该变量所在行时产生

       死亡:js代码加载完毕,变量死亡

       2.2声明在函数内部的变量

        前提:该变量所在的函数被调用

        产生:js执行到该变量所在行时产生

        死亡: 该变量所在的函数执行行结束

        举例:

         情景一:函数只声明,不调用

    <script type="text/javascript">
      function test(){
         var aa = "test";
         aa +="只声明,但不调用该函数时,该函数会不会执行?"; //添加内容
         alert(aa);
         aa = "该函数的变量不会执行!";
         alert(aa);
    }
    </script> 

       说明:上面2个alert不会执行

       情景二:声明并调用该函数

      function test(){
         var aa = "test";
         aa +="只声明,但不调用该函数时,该函数会不会执行?"; //添加内容
         alert(aa);
         aa = "该函数的变量不会执行!";
         alert(aa);
       }
       test();

    说明:上面2个alert均会执行

    (3)全局变量与局部变量

         3.1全局变量

         声明在函数体外,任何地方都可访问到该变量

          3.2局部变量

          声明在函数体内,只有在函数体内可访问到该变量

     (4)声明变量的3种方式及作用域

          4.1使用var (最常见)

          var声明的变量可以是全局的(函数外面),也可以是函数级的(函数内部)

    function test() {
      globalVar = "这是一个全局变量";
      var partialVar = "这是一个局部变量";
    }
    test();
    alert(globalVar); //这是一个全局变量
    alert(partialVar);  //直接报错

    说明:函数内部声明变量的时候,一定要使用var命令,如果不用的话,你实际上声明了一个全局变量

    情景一:

    var varLocation = "函数外部声明并赋值";
    function test(){
      varLocation = "函数内部改值";
       alert(varLocation); // 函数内部改值
    }
    test();
    alert(varLocation);  // 函数内部改值

    说明:函数外面声明的变量,在函数内部改变该值后,函数外面的该变量的值也随之改变

    情景二:

    var varLocation = "函数外部声明并赋值";
    function test(){
       var  varLocation = "函数内部改值";
       alert(varLocation); // 函数内部改值
    }
    test();
    alert(varLocation);  // 函数内部改值

    说明:在函数外面使用var声明一个变量后,再在函数内部使用var再次声明一次并改变其值,函数外面的该变量的值不会发生改变。 

    4.2 使用const

      const用于修饰常量,定义的变量不可修改,而且必须初始化,声明位置不限(通常声明在js开头),与java类的final关键字性质一样

    举例:

    function test(){
      const testConstant = "测试常量";
      alert(testConstant);
      testConstant = "改变常量值";
    }
    test();

    4.3 使用let

    let声明的变量在{}中使用,变量的作用域限制在块级域中

    举例:使用js动态给ul添加li对象并点击第几项,显示当前点击是第几个

    window.onload = function(){
       var ul = document.getElementById("ulList");
       for(var i = 0 i <= 5; i++){
          // 创建一个li对象
          var li = document.createElement("li");
           // li标签内内容设置为:Itemi
           li.appendChild(document.createTextNode("Item" + i));
           // 声明一个块级变量j,并将i赋给j
           let j = i;
            // 绑定点击事件
            li.onclick = function(){
                alert("Item" + i + "is clicked.");
             };
             ul.appendClild(li);
         }
    }
    
           

    错误方式:

    window.onload = function(){
       var ul = document.getElementById("ulList");
       for(var i = 0 i <= 5; i++){
          // 创建一个li对象
          var li = document.createElement("li");
           // li标签内内容设置为:Itemi
           li.appendChild(document.createTextNode("Item" + i));
    
            // 绑定点击事件
            li.onclick = function(){
                alert("Item" + i + "is clicked.");
             };
             ul.appendClild(li);
         }
    }

    结果:点击每个li,提示的都是“Item 6 is clicked.”

    扩展:使用var如何实现这种效果?闭包

    window.onload = function(){
       var ul = document.getElementById("ulList");
       for(var i = 0 i <= 5; i++){
          // 创建一个li对象
          var li = document.createElement("li");
           // li标签内内容设置为:Itemi
           li.appendChild(document.createTextNode("Item" + i));
    
            // 绑定点击事件
            li.onclick = (function(i){
                return function (){
                alert("Item" + i + "is clicked.");
             };
          })(i) // 闭包
           // 将LI对象item拼接到UL标签体内
           ul.appendClild(li);
         }
    }

    说明:采用的闭包的方式在绑定的时候已经把j的值已经传递给对应的click事件了,所以能够实现相同的结果,但是,从程序的可维护性来说不推荐使用。 

    4.4 声明变量的要项  

    4.4.1 js声明的变量取值的原则:就近原则;

    4.4.2 js是弱类型语言,不同的数据类型可以用同一个变量名表示;

    4.4.3 函数内部声明的变量,不会影响函数外部同名的变量的值。

    举例:

    var testVarValue = "测试就近原则";
    <script type="text/javascript">
          function test() {
           const testRepeatStatement = "测试用一个变量赋予不同的类型及不同的值";
           alert(testRepeatStatement);  //测试用一个变量赋予不同的类型及不同的值
       }
       test();
    </script>

    (5)如何避免全局污染?  

     方法:闭包

     举例:

    (function(){
    
    // 声明一个JSON对象
    
    var JsonObj = {};
    
    //定义该对象的属性及属性值
    
    JsonObj.name = "对象的属性";
    
    JsonObj.method = function() {
    
       alert("测试是否能够调用该方法");
    
       return JsonObj.name;
    
    }
    
    // 通过操作window对象,供外部访问该对象的属性和方法
    
    window.GlobalObj = JsonObj;
    
    })();
    
    // 调取该对象的方法并接受返回值
    
    var name = GlobalObj.method(); // 获取的是返回值name
    
    alert(name); //对象属性
    
    //  只获取该方法但不调用
    
    var method = GlobalObj.method; // 获取的是对象GlobalObj2的method1()方法
    
    alert(method);
    
    // function (){
    
    //  alert("测试是否能够调用该方法");
    
    //   return JsonObj.name;
    
    //}
    
    // 调用接受到的方法,但不接受返回值
    
    method();

    闭包的优缺点说明:

    优点:设计私有的方法和变量,保护函数内的变量安全;

    弊端:闭包有一个非常严重的问题,那就是内存浪费问题,这个内存浪费不仅仅因为它常驻内存,更重要的是,对闭包的使用不当会造成无效内存的产生。

  • 相关阅读:
    Anaconda+Tensorflow环境安装与配置
    计算机视觉(视频追踪检测分类、监控追踪)常用测试数据集
    迁移学习( Transfer Learning )
    matlab函数_连通区域
    GMM的EM算法实现
    对​O​p​e​n​C​V​直​方​图​的​数​据​结​构​C​v​H​i​s​t​o​g​r​a​m​的​理​解
    opencv基于混合高斯模型的图像分割
    LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
    视频测试序列(转)
    高职扩招,拿大专学历
  • 原文地址:https://www.cnblogs.com/amujoe/p/8874343.html
Copyright © 2011-2022 走看看